| license: gpl-3.0 |
A demo of TopoJSON on a U.S. counties shapefile from the U.S. census bureau. The same TopoJSON file can also be used to show states.
forked from mbostock's block: U.S. Counties TopoJSON
forked from anonymous's block: U.S. Counties TopoJSON
forked from GitNoise's block: Map 5 - lan, topojson
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| } | |
| path { | |
| stroke: #fff; | |
| stroke-width: .5px; | |
| } | |
| path:hover { | |
| stroke: black; | |
| stroke-width: 1px; | |
| } | |
| #main .zoom { | |
| fill: steelblue !important; | |
| } | |
| .caption { | |
| font-size: 30px; | |
| font-family: Verdana, Geneva, sans-serif; | |
| } | |
| circle { | |
| fill: red; | |
| stroke: black; | |
| } | |
| line { | |
| stroke: black; | |
| stroke-opacity: 0.2 | |
| } | |
| </style> | |
| <body> | |
| <svg id='main' /> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| // helpers | |
| d3.selection.prototype.moveToFront = function() { | |
| return this.each(function(){ | |
| this.parentNode.appendChild(this); | |
| }); | |
| }; | |
| var distance = function distance (firstObject, secondObject) { | |
| return Math.sqrt( | |
| ( firstObject[0] - secondObject[0] ) * | |
| ( firstObject[0] - secondObject[0] ) + ( firstObject[1] - secondObject[1] ) * | |
| ( firstObject[1] - secondObject[1] ) ); | |
| } | |
| // main code | |
| var width = 400, | |
| height = 900, | |
| max_distance = 10000, | |
| cities = [['Stockholm', "Stockholm"], | |
| ['G�teborg', "Goteborg"], | |
| ['Malm�', 'Malmo']], | |
| city = cities[0]; | |
| var projection = d3.geo.mercator() | |
| .scale(1200) | |
| .translate([width / 2, height / 2]) | |
| .center([0, 55]) | |
| .rotate([-17, -4]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("#main") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("alla_lan(1).json", function(error, topology) { | |
| if (error) throw error; | |
| // setup scale | |
| var max = d3.max( | |
| topojson.feature(topology, topology.objects.svenskarna_kommun).features, | |
| function(d) { | |
| //console.log(+d.properties.Stockholm_ANDELFR_NF); | |
| return +d.properties.Stockholm_ANDELFR_NF; } ); | |
| // scales | |
| sizeScale = d3.scale.sqrt() | |
| .domain([0, 1]) | |
| .range([0, 10]) | |
| .clamp(true); | |
| var point = topojson.feature(topology, topology.objects.svenskarna_kommun).features.filter( | |
| function(f) { | |
| //console.log(f.properties); | |
| return f.properties.KnNamn == city[0]; })[0]; | |
| var features = topojson.feature(topology, topology.objects.svenskarna_kommun).features; | |
| var groups = svg.selectAll("g") | |
| .data(features) | |
| .enter() | |
| .append("g"); | |
| groups | |
| .style("fill", "#ccc") | |
| .append("path") | |
| .attr("d", path) | |
| var lines = svg.selectAll("g.lines") | |
| .data(features) | |
| .enter() | |
| .append("g") | |
| .classed("lines", true); | |
| lines.each(function (d) { | |
| var me = d3.select(this); | |
| if(d.properties[city[1] + "_ANDELFR_NF"] > 0.05) | |
| me | |
| .append("line") | |
| .attr({ | |
| x1: projection(d3.geo.centroid(point))[0] , | |
| y1: projection(d3.geo.centroid(point))[1], | |
| x2: projection(d3.geo.centroid(d))[0], | |
| y2: projection(d3.geo.centroid(d))[1] | |
| }); | |
| }) | |
| var circles = svg.selectAll("g.circles") | |
| .data(features) | |
| .enter() | |
| .append("g") | |
| .classed("circles", true); | |
| circles.each(function (d) { | |
| var me = d3.select(this); | |
| if(d.properties[city[1] + "_ANDELFR_NF"] > 0.05) | |
| me | |
| .append("circle") | |
| .attr({ | |
| cx: function(d) { return projection(d3.geo.centroid(d))[0]; }, | |
| cy: function(d) { return projection(d3.geo.centroid(d))[1]; }, | |
| r: function(d) { | |
| return sizeScale(+d.properties[city[1] + "_ANDELFR_NF"]); } , | |
| }) | |
| .style("fill", '#d7191c'); | |
| }) | |
| }); | |
| </script> |