D3 Choropleth Map CSV

Я борюсь за то, чтобы моя карта choropleth работала. У меня есть CSV-файл значений и названия районов, которые я хочу сопоставить с моей топографической картой TopoJSON. Данные на карте CSV выглядит следующим образом:D3 Choropleth Map CSV

id, values 
NAIROBI,50 
MOMBASA,10 
KWALE,20 
KILIFI,40 
TANA RIVER,50 
LAMU,10

колонок идентификатор для названий районов в Кении, значения произвольны и предназначены только для создания цвета в соответствии с набором домена для порогового масштаба я нахожусь с помощью. По какой-то причине цвета просто не генерируются. Вот остальная часть моего кода. Пожалуйста, дайте мне знать, где я ошибаюсь? Я продолжаю исправлять это безрезультатно:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
      <script type="text/javascript" src="d3.v3.js"></script> 
      <script type="text/javascript" src="js/topojson.js"></script> 
      <script type="text/javascript" src="js/jquery.js"></script> 
      <script type="text/javascript" src="js/bootstrap.js"></script> 



      <link rel="stylesheet" href="css/bootstrap.css" media="screen"> 
    </head> 
    <body> 
     <div class="row"> 
     <header class="span12"> 
      <h1>Aphellion Activity 1 - Kenya Maps</h1> 
      <h3>The goal of this activity is generate two maps one drawn with D3.js using GeoJSON to generates the paths, the other drawn using TopoJSON to generate the paths.</h3> 
     </header> 
     </div> 
     </br> 
     <div class="row"> 
      <div class="span6" id="Map1"> 
       <p>This first map of Kenya was made using TopoJSON.</p> 
      </div> 
      <div class="span6" id="Map2"> 
       <p>This second map of Kenya was made using GeoJSON.</p> 
      </div> 
     </div> 
    </body> 
    <script type="text/javascript"> 
     var width = 460; 
     var height = 400; 

     //Setting the color domains for the choropleth maps 
     var color = d3.scale.threshold() 
        .domain([10, 20, 30, 40, 50]) 
        .range(["#9e9ac8", "756bb1", "dadaeb", "bcbddc", "#E82D0C"]); 

    //TopoJSON Map 
     //new projection 
      var projection = d3.geo.mercator() 
          .center([36.8000, 1.2667]) 
          .scale([1000]) 
          .translate([width/2, height/2]); 



     var path = d3.geo.path().projection(projection); 

     //Drawing Choropleth 

     var svg = d3.select("div#Map1") 
        .append("svg") 
        .attr("width", width) 
        .attr("height", height); 

     var g = svg.append("g") 
        .call(d3.behavior.zoom() 
        .scaleExtent([1, 10]) 
        .on("zoom", zoom)); 

     d3.json("js/output.json", function(error, topology) { 
      d3.csv("js/Schools.csv", function(error, Schools) { 
       var rateById = {}; 

       Schools.forEach(function (d) { 
       rateById[d.id] = +d.values; 
        }); 

     g.append("g") 
      .attr("class", "districts") 
      .selectAll("path") 
      .data(topojson.feature(topology, topology.objects.kenya).features) 
      .enter() 
      .append("path") 
      .attr("d", path) 
      .style("fill", function(d) { 
       return color(rateById[d.id]); 
      }); 


     });       
     }); 

     //Draw a rect around the map 
     svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none") 
        ; 

     function zoom() { 
      g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")}; 
    </script> 
</html>

источник

2014-05-27 Siya

Есть ли сообщения об ошибке? Возможно, вам захочется создать [plunk] (http://plnkr.co/edit/?p=catalogue), где вы можете указать файлы json и csv. Ваша ошибка, вероятно, не связана с вашей обработкой цветов, которая выглядит правильно ... но это может быть трудно помочь без запуска кода ... – FernOfTheAndes

Я не вижу сообщений об ошибках в консоли или в IDE, поэтому я не знаю, что это может быть. Я попытался создать Plunkr, надеюсь, что это поможет. Мне действительно нужно закончить это скоро: http://plnkr.co/edit/RkmSOkgljz8nPEIHUHUc?p=preview – Siya

Вы были очень, очень близки. Вы возвращали пустой хэш, return rateById = {}; вместо объявления его для использования в вашем коде, var rateById = {};.

Я обновил PLUNK с правильными ссылками на библиотеки и добавил к нему стили CSS.

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

источник

2014-05-28 07:46:19 FernOfTheAndes

Большое спасибо. Я попробую это позже, но спасибо за ваши усилия. – Siya

Я подключил ваш рефрактерный код, но по какой-то причине цвета пока не отображаются. – Siya

Можете ли вы показать мне плунжер с вашими изменениями? – FernOfTheAndes

D3 Choropleth Map CSV

ответ

Смежные вопросы