d3.js - Create a Graduated Symbol Map using D3 -

- April 15, 2015

i'm trying create graduated symbol map , struggling find way make happen. can create pie charts , can create symbol map, how place pie charts @ specific coordinates on map?

i've placed proportional symbols @ proper coordinates, can't figure out how replace symbols pie charts. every attempt leaves me empty map.

i've tried merge mike bostock's pie multiples example symbol map example have instead managed expose lack of understanding of d3's data , event functions.

index.html

<!doctype html> <html> <head>     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>     <title>graduated symbol map</title>     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>     <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>     <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>     <style type="text/css">  body { text-align: center; }      </style> </head> <body>     <script type="text/javascript">  var width = 400,     height = 500;  var radius = d3.scale.sqrt()     .domain([0, 5e5])     .range([0, 40]);  // define map projection var projection = d3.geo.transversemercator()     .rotate([72.57, -44.20])     .translate([175,190])     .scale([12000]);  // define path generator var path = d3.geo.path()     .projection(projection);  // create svg element var svg = d3.select("body").append("svg")     .attr("width", width)     .attr("height", height);  queue()     .defer(d3.json, "vermont.json")     .defer(d3.json, "fed.json")     .await(ready)  function ready(error, vt, centroid) {     svg.append("path")         .attr("class", "towns")         .datum(topojson.feature(vt, vt.objects.vt_towns))         .attr("d", path)         .style("stroke", "#ddd")         .style("stroke-width", "1px")         .style("fill", "#ccc");      svg.append("path")         .datum(topojson.feature(vt, vt.objects.lake))         .attr("d", path)         .style("stroke", "#89b6ef")         .style("stroke-width", "1px")         .style("fill", "#b6d2f5");      svg.selectall(".symbol")         .data(centroid.features.sort(function(a,b) {             return b.properties.dollars - a.properties.dollars; }))         .enter().append("path")             .attr("class", "symbol")             .attr("d", path.pointradius(function(d) {                 return radius(d.properties.dollars); })             )             .style("fill", "#509e2f")             .style("stroke", "#ddd")             .style("fill-opacity", 0.7); }      </script> </body> </html>

fed.json (there 14 points, same format)

'dollars' total dollars spent 4 organizations, size of pie chart should relate value.

{     "type": "feature",     "id": "53",     "geometry": {         "type": "point",         "coordinates": [-73.1349605, 43.0278745]     },     "properties": {         "name": "bennington county",         "dollars": 79730,         "unit": "county",         "ecp": 49608,         "lip": 3451,         "nap": 0,         "sure": 26671     } },

vermont.json

large file, map not issue.

references i've used

here's solution, using @larskotthoff's answer this question solve projection issue.

i've scaled pie charts in rather hackish way.

index.html

below ready function. else has remained unchanged.

function ready(error, vt, centroid) {     svg.append("path")         .attr("class", "towns")         .datum(topojson.feature(vt, vt.objects.vt_towns))         .attr("d", path)         .style("stroke", "#ddd")         .style("stroke-width", "1px")         .style("fill", "#ccc");      svg.append("path")         .datum(topojson.feature(vt, vt.objects.lake))         .attr("d", path)         .style("stroke", "#89b6ef")         .style("stroke-width", "1px")         .style("fill", "#b6d2f5");      var piearray = [],         piemeta = [];      function piedata() {         (var i=0; i<centroid.features.length; i++) {             piearray.push([                 parseint(centroid.features[i].properties.ecp),                 parseint(centroid.features[i].properties.lip),                 parseint(centroid.features[i].properties.nap),                 parseint(centroid.features[i].properties.sure)                 ]);             piemeta.push([                 projection(centroid.features[i].geometry.coordinates),                 radius(parseint(centroid.features[i].properties.dollars))                 ]);         }         return [piearray, piemeta];     };      var svgsvg = d3.select("body").select("svg").selectall("g")             .data(piedata()[0])         .enter().append("svg:svg")             .attr("width", width)             .attr("height", height)         .append("svg:g")             .style("opacity", 0.8)             .attr("property", function (d,i) {                 return piedata()[1][i][1];             })             .attr("transform", function (d,i) {                 var coordinates = piedata()[1][i][0];                 return ("translate(" + (coordinates[0]) + "," +                     (coordinates[1]) + ")");                 });      svgsvg.selectall("path")             .data(d3.layout.pie())         .enter().append("svg:path")             .attr("d", d3.svg.arc()                 .innerradius(0)                 .outerradius(function (d) {                     var chartlist = d3.select(this.parentnode).attr("property");                     return chartlist;                 }))             .style("fill", function(d, i) { return color[i]; });  }

Search This Blog

Search