d3.js Choropleth для каждого почтового индекса - PullRequest
Новая
       23

d3.js Choropleth для каждого почтового индекса

0 голосов
/ 07 ноября 2019

Я пытаюсь создать нам город Хороплет с d3.js о средней заработной плате. У меня есть данные с JSON. (например: [{"Zipcode": "06010", "avg": "25405.80078125"}, {"Zipcode": "07055", "avg": "15190"})

Я положил данные JSONв карту. Как я могу поставить цвет для каждого города зависит от среднего?

вот мой код 

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <style>


   .county{
       fill: #e3e3e3;
       stroke: #fff;
       stroke-width: 0.5;
   }

 </style>

 <!-- Load d3.js -->
 <script src="https://d3js.org/d3.v4.js"></script>
 <script src="https://d3js.org/d3-scale-chromatic.v1.min.js" 
 </script>
 <script src="https://d3js.org/d3-geo-projection.v2.min.js"> 
 </script>
 <script src="https://unpkg.com/topojson-client@3"></script>

  <!-- Create an element where the map will take place -->
  <svg id="my_dataviz" width="950" height="600"></svg>

</head>
<body>
   <script>
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

// Map and projection
 var path = d3.geoPath();
 var projection = d3.geoMercator()
                 .scale(100)
                 .center([0,20])
                 .translate([width / 2, height / 2]);

// Data and color scale
 var colorScale = d3.scaleThreshold()
     .domain([0,10000,50000,70000,80000,150000,290000,360000])
     .range(d3.schemeBlues[7]);

// Load external data and boot
 var averagewage = d3.map();
  d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.json, "data.php")
    .await(ready);
  console.log(averagewage)

function ready(error, topo, wage) {
console.log(topo);
console.log(averagewage);

wage.forEach(function(d){

    averagewage.set(d.Zipcode, +d.avg);
});

console.log(averagewage);

var counties = topojson.feature(topo, topo.objects.counties).features
svg.append("g")
    .selectAll(".county")
    .data(counties)
    .enter()
    .append("path")
    .attr("class","county")
    .attr("d", path)
            .attr("fill", function(d)
             {
          d.total = averagewage.get(d.id) || 0;
          return colorScale(d.total);
          });

}

когда я запускаю этот код, я вижу диаграммуно я вижу только карту без цвета.

...