javascript - d3 Choropleth map with different dates and times -
i created own germany.json administrative regions.
as data germany.json, created simple table 2 columns: (name of administrative region)(rate of administrative region)
my map works great, job isn't done that.
i have detailed tables 4 columns (date, time, administrative region , rate).
so choropleth map can created if choose date first, time. after choosing date , time, map given input shows up.
the problem here, i'm beginner in javascript. have ideas in mind, can't move ideas code.
that's why ask here , ideas.
is i'm asking possible?
http://www.vincentbroute.fr/mapael/usecases/world/
the map @ above link interesting choropleth map have found far has in common map want make.
thanks reading far.
here code:
<!doctype html> <meta charset="utf-8"> <style> .properties { fill: none; } //hier werden die farben für verschiedene kategorien zugeteilt .q0-9 { fill:rgb(247,251,255); } .q1-9 { fill:rgb(222,235,247); } .q2-9 { fill:rgb(198,219,239); } .q3-9 { fill:rgb(158,202,225); } .q4-9 { fill:rgb(107,174,214); } .q5-9 { fill:rgb(66,146,198); } .q6-9 { fill:rgb(33,113,181); } .q7-9 { fill:rgb(8,81,156); } .q8-9 { fill:rgb(8,48,107); } </style> <body> <script src="http://d3js.org/d3.v3.js"></script> <script src="http://d3js.org/topojson.v1.js"></script> <script src="http://d3js.org/colorbrewer.v1.js"></script> <script src="http://d3js.org/queue.v1.js"></script> </body> <script> //größe der karte wird eingestellt var width = 1050, height = 1000; var ratebyid = d3.map(); //skalierung für die einfärbung var quantize = d3.scale.quantize() .domain([1, 50]) .range(d3.range(9).map(function(i) { return "q" + + "-9"; })); //skalierung und ausrichtung auf deutschland var projection = d3.geo.albers() .center([10.4, 51.35]) .rotate([1, 0]) .parallels([50, 60]) .scale(1200 * 5) .translate([width / 2, height / 2]); //d3 projection wird angelegt var path = d3.geo.path() .projection(projection); //svg wird angelegt var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); //warteschlange zum ausführen des skripts wird angelegt queue() .defer(d3.json, "germany.json") .defer(d3.tsv, "test2.tsv", function(d) { ratebyid.set(d.name_2, +d.rate); }) .await(ready); //karte wird geladen und mit den gewünschten properties geöffnet und zugewiesen function ready(error, de) { svg.append("g") .attr("class", "properties") svg.selectall("path") .data(topojson.feature(de, de.objects.collection).features) .enter().append("path") .attr("class", function(d) { return quantize(ratebyid.get(d.properties.name_2)); }) .attr("d", path); } //d3.select(self.frameelement).style("height", height + "px"); </script>
queue() .defer(d3.json, "germany.json") .defer(d3.tsv, "test2.tsv", function(d) { ratebyid.set(d.name_2, +d.rate); }) .await(ready); function ready(error, de) { svg.append("g") .attr("class", "properties") svg.selectall("path") .data(topojson.feature(de, de.objects.collection).features) .enter().append("path") .attr("class", function(d) { return quantize(ratebyid.get(d.properties.name_2)); }) .attr("d", path); how upload data , .json jsfiddle? i've got on drive
now problem: how map when pick date , time date picker , slider time. dont know how code this
Comments
Post a Comment