D3 Examples - Small test of D3 API used to map track data from a geojson.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<title>Time &amp; Distance mapped of tracks...</title>
<meta charset="utf-8">
<style>
    #theMapSVG  {
        fill : none;
        stroke : gray;
        stroke-width : .3pt;
    }
    .timecircle {
        fill : red;
        stroke : none;
    }
    .distancecircle {
        fill : blue;
        stroke : none;
    }
    .connectors {
        fill : none;
        stroke : black;
        stroke-width : .1pt;
    }
    text {
        fill : gray;
        stroke : none;
    }
​
</style>
</head>
<body>
<H2>Time &amp; Distance mapped of tracks...</H2>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
var SVGwidth = 750, SVGheight = 750;
var xMargin = 10, yT = 200, yD = 100;
var totaldistance = 70, totaltime = 70, distancescale=10, timescale = 10;
​
//create SVG placeholder
var svg = d3.select("body").append("svg")
        .attr("id", "theMapSVG")
        .attr("width", SVGwidth)
        .attr("height", SVGheight)
        ;
//draw baseline + text for distance
svg.append("line")
        .attr("id","distanceLine")
        .attr("y1", yD)
        .attr("y2", yD)
        .attr("x1", xMargin)
        .attr("x2", xMargin + (totaldistance * distancescale))
        ;
svg.append("text")
        .attr("x", xMargin+10)
        .attr("y", yT+20)
        .text("TIME")
;
​
//draw baseline + text for time
svg.append("line")
        .attr("id","timeLine")
        .attr("y1", yT)
        .attr("y2", yT)
        .attr("x1", xMargin)
        .attr("x2", xMargin + (totaltime * timescale))
        ;
svg.append("text")
        .attr("x", xMargin+10)
        .attr("y", yD+20)
        .text("DISTANCE")
;
​
//read trackdata (asynchronously)
d3.json("trackdata.geojson", function(json) { //when read, do function
    track=json;
    //create distance events
    svg.selectAll(".distancecircle")
        .data(track.features)
            .enter().append("circle")
            .attr("class", "distancecircle")
            .attr("cx", function(d) {
                    return xMargin + (d.properties.dist * distancescale); })
            .attr("cy", yD)
            .attr("r", "5")
​
    //create time events
    svg.selectAll(".timecircle")
            .data(track.features)
            .enter().append("circle")
            .attr("class", "timecircle")
            .attr("cx", function(d) {
                return xMargin + (d.properties.timestamp * timescale); })
            .attr("cy", yT)
            .attr("r", "5")
​
    //create connectors
    svg.selectAll(".connectors")
            .data(track.features)
            .enter().append("line")
            .attr("class", "connectors")
            .attr("x1", function(d) {
                return xMargin + (d.properties.timestamp * timescale); })
            .attr("y1", yT)
            .attr("x2", function(d) {
                return xMargin + (d.properties.dist * distancescale); })
            .attr("y2", yD)
​
});
​
//set SVG placeholder height (and thus location in HTML)
d3.select(self.frameElement).style("height", SVGheight + "px");
​
</script>
​
</body>
</html>
    