d3.js svg drawing contour lines from (geo/topo)json - json

Question

I am looking for some guidance on how to create SVG image composed of paths based on contour line data coming from (geo/topo)JSON and render it with d3.js.
This is an image of what I'd like to create essentially:
Ultimately, I'd like the image to be able to scale responsively, animate (draw in lines, change color interactively) the paths, and be able to swap out different data files to render other images.
I have looked through several guides, tutorials etc, but it seems I am missing some steps or implementing the wrong procedure thus far, so I thought I'd ask here. Thanks for any help.
I'm trying to clarify the best way to do this and figure out what I'm misinterpreting in terms of the capabilities/procedures in d3.js.
I'm creating contour lines from DEM (Digital Elevation Model) data by extracting contours in QGIS. To get the JSON from these I have tried saving as GeoJSON in QGIS, and converting Shapefiles (ESRI .shp) to GeoJSON in OGR2OGR. I have also tried using Node's Topojson (https://www.npmjs.org/package/topojson). For the most part, I've been able to get JSON files, although there might be something wrong with the way I'm converting them, or the original contour data coming from QGIS that makes it incompatible with what I've tried in d3.
The results that I have gotten when the JSON gets rendered basically look like black boxes (looks like improperly rendered polygons gone wild inside the svg container). If I change the fill color to none I see crazy lines all over. I read somewhere that TopoJSON has to be polygons not lines or polylines since it uses arcs, but I got the same results with GeoJSON.
I'm wondering if this is a problem with the way I've exported the contour lines from QGIS and converted to JSON, perhaps the projections are not lining up? There also might be some errors in the lines that were created automatically when converting, but I'm not sure how to fix these. As you can see in the example image, some of my contours are not closed loops because they extend beyond the boundaries of the area I have data for/want to show. Does it make sense that these are supposed to be rendered as polylines or paths?
Also a note, I am not particularly interested in the "geospaciality" of these lines in terms of their lat-long or geographic location in this project. Basically just using contour lines from real geographic data to display the line patterns.
Here is my code:
<script type="text/javascript">
var width = 500,
height = 500;
var svg = d3.select("#section-1-svg").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("contour.json", function(error, contour) {
console.log(contour);
});
var path = d3.geo.path()
.projection(d3.geo.mercator());
d3.json("contour.json", function(error, json) {
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
So other than just getting this to render on a basic level, other questions are:
Will I be able to select individual lines to animate with for example stroke-dashoffset?
Does this source JSON still contain elevation data so I can color lines based on elevation?
Thanks for your help in getting me on track with this! I would appreciate anyone clarifying this for me and informing me on the best way to render this.
EDIT: Using the code from user1614080's example, I'm rendering the lines thus:
svg.selectAll("path")
.data(topo).enter()
.append("path")
.style("fill", "none")
.style("stroke", function(d, i) {
return interp(cScale(d.properties.ELEV));
})
.attr("d", path)
.each(function(d) {
d.totalLength = this.getTotalLength();
console.log(d.totalLength);
})
.attr("stroke-dasharray", function(d) { return d.totalLength + " " + d.totalLength;})
.attr("stroke-dashoffset", function(d) { return d.totalLength; })
.transition()
.delay(function(d, i) { return i * 200; })
.duration(4000)
.ease("linear")
.attr("stroke-dashoffset", "0");
});
But I can't get the effect I need (lines drawing in). They seem to fade in from small dashes instead of drawing the entire dash. I can see in browser that the stroke-dasharray and offset is being assigned correctly, just can't figure out why the transition is not respected.

Answer 1

Following on from what Lar's mentioned I can't really see anything wrong with what you've got there (except that you're two identical d3.json calls but this shouldn't be causing you problems).
The workflow you describe is more or less identical to what I've done before. The only thing that I can think of that might be causing you trouble (although not in the code you've presented) is that topojson's default does not preserve feature properties and you have to use the -p switch.
Anyway, I've been meaning t do a contour example for a while and this seemed like a good opportunity so I created one which you can see here. There's a fair bit of explanation in the code and readme so I hope this helps you along the way.
Once you get your vis working you will be able to create all sorts of interactions etc. For instance in my example you could highlight contours on mouseover events, using the something like the following:
.on("mouseover", highlight)
.on("mouseout", unhighlight(this, d)
function highlight(x) {
var s = d3.select(this);
s.style("stroke", "red");
}
function unhighlight(x,y) {
var old = y.properties.ELEV;
var u = d3.select(x);
u.style("stroke", function(d, i) {
return interp(cScale(old));
})
}
Hope this gets you going