Forked from Mike Bostock's example. TopoJSON for congressional districts.
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
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
svg { | |
font: 10px sans-serif; | |
} | |
path { | |
fill: steelblue; |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This choropleth encodes unemployment rates from 2008 with a quantize scale ranging from 0 to 15%. A threshold scale is a useful alternative for coloring arbitrary ranges.
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
[{"n":"Albania","d":[-1,-1,-1,-1,-1,-1,-1,84.604,75.713,72.67,69.634,65.86,65.464,60.708,57.721,58.228,56.682,53.846,55.099,59.76,58.223,59.363],"e":2010},{"n":"Algeria","d":[0.0,79.506,62.926,74.028,98.376,116.195,98.148,85.095,84.508,89.357,69.823,63.459,53.756,43.921,36.565,27.283,23.61,12.517,8.225,10.356,10.393,10.655],"e":2009},{"n":"Angola","d":[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,104.542,102.053,70.948,63.967,51.302,42.493,20.627,20.816,31.5,36.285,35.022,29.909],"e":2009},{"n":"Antigua and Barbuda","d":[-1,-1,-1,-1,-1,-1,-1,41.614,93.082,88.983,108.256,118.919,124.946,114.567,112.482,87.255,85.158,63.738,62.138,81.139,69.581,68.629],"e":2010},{"n":"Argentina","d":[-1,-1,-1,-1,-1,-1,-1,34.508,37.569,42.963,45.001,53.69,164.974,139.455,127.027,87.125,76.457,67.098,58.52,58.704,49.102,43.346],"e":2010},{"n":"Armenia","d":[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,48.907,46.364,47.019,40.896,32.555,24.404,18.725,16.102,16.144,40.159,39.181,41.475],"e":2010},{"n":"Australia","d":[16.256,21.375,27.382,30.379,31.485,30.933,2 |
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
. |
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
license: gpl-3.0 |
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
Drag from an existing node to add a new node or link. Click to select/deselect nodes/links. Hit the DELETE key to remove the selected node or link. Drag to pan. Scroll to zoom. | |
Built with [D3.js](http://mbostock.github.com/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
{ | |
"graph": [], | |
"links": [ | |
{"source": 0, "target": 1}, | |
{"source": 0, "target": 2}, | |
{"source": 0, "target": 3}, | |
{"source": 0, "target": 4}, | |
{"source": 0, "target": 5}, | |
{"source": 0, "target": 6}, | |
{"source": 1, "target": 3}, |
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
This is part of a series of examples that describe the basic operation of | |
the [D3.js](http://d3js.org) [force layout](https://github.com/mbostock/d3/wiki/Force-Layout). | |
Eventually they may end up in a blog post that wraps everything together. | |
If the [previous example](http://jsdatav.is/visuals.html?id=11550728) didn't look very | |
impressive, that's probably because it wasn't. Why bother to use a force layout | |
just to place two circles a specific distance apart? Here's the payoff, though. | |
With nearly the _exact same code_ we can see what a more complex graph looks like. | |
There are plenty of ways to improve this graph (most of which we'll cover in |
OlderNewer