Created
November 9, 2015 12:23
-
-
Save chilijung/fd61662d87c12c20f492 to your computer and use it in GitHub Desktop.
Before react-d3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var w = 800, | |
| h = 600; | |
| var projection = d3.geo.mercator() | |
| .center([120.979531, 23.978567]) | |
| .scale(10000); | |
| var color = d3.scale.quantize() | |
| .domain([0, 1]) | |
| .range(d3.range(11).map(function(d) { return "q" + d + "-11"; })); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select('#content') | |
| .append('svg') | |
| .attr('width', w) | |
| .attr('height', h) | |
| .attr('viewBox', "0 0 800 600") | |
| .attr('preserveAspectRatio', 'xMidYMid'); | |
| var g = svg.append("g") | |
| .attr("class", "key") | |
| .attr("transform", "translate(40,40)"); | |
| var year = []; | |
| var district = []; | |
| var districtName = []; | |
| var townValue = []; | |
| d3.json("population.json", function(error, population_data) { | |
| for(_key in population_data) { | |
| // year | |
| year.push(_key); | |
| } | |
| var year_data = population_data[year[0]]; | |
| for(_key_year in year_data) { | |
| district.push(_key_year); | |
| // district | |
| for(_district in year_data[_key_year]) { | |
| districtName.push(_key_year + _district); | |
| townValue.push(+year_data[_key_year][_district]); | |
| } | |
| } | |
| d3.json('../../data/taiwan-map/twTown1982.topo.json', function(err, data) { | |
| var color_scale = d3.scale.linear() | |
| .domain([0, d3.max(townValue)]) | |
| var x = d3.scale.linear() | |
| .domain([0, d3.max(townValue)]) | |
| .range([0, 330]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .tickValues(x.domain()) | |
| .orient("bottom"); | |
| var topo = topojson.feature(data, data.objects["twTown1982.geo"]); | |
| var topomesh = topojson.mesh(data, data.objects["twTown1982.geo"], function(a, b){ | |
| return a !== b; | |
| }); | |
| topo.features.forEach(function(d, i) { | |
| if(d.properties.TOWNID === "1605" || d.properties.TOWNID === "1603" || d.properties.TOWNID=== "1000128") { | |
| topo.features.splice(i, 1); | |
| } | |
| }) | |
| svg.selectAll('path.town') | |
| .data(topo.features) | |
| .enter() | |
| .append('path') | |
| .attr('id', function(d) { return d.properties.TOWNNAME; }) | |
| .attr('d', path) | |
| .attr("class", function(d) { | |
| var count_district = districtName.indexOf(d.properties.COUNTYNAME.trim() + d.properties.TOWNNAME.trim()); | |
| var color_class = color(color_scale(townValue[count_district])); | |
| if(count_district >= 0){ | |
| return ("town " + color_class); | |
| }else { | |
| return "town RdYlGn"; | |
| } | |
| }) | |
| svg.append('path') | |
| .attr('class', 'boundary') | |
| .datum(topomesh) | |
| .attr('d', path) | |
| .style('fill', 'none') | |
| .style('stroke', "rgba(255,255,255,0.5)") | |
| .style('stroke-width', '2px'); | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment