Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active January 28, 2025 18:06
Show Gist options
  • Save mbostock/4060606 to your computer and use it in GitHub Desktop.
Save mbostock/4060606 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mbostock revised this gist Oct 5, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    license: gpl-3.0
    height: 600
    border: no
    redirect: https://beta.observablehq.com/@mbostock/d3-choropleth
  2. mbostock revised this gist Nov 3, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -69,7 +69,7 @@
    .remove();

    d3.queue()
    .defer(d3.json, "https://unpkg.com/us-atlas/us/10m.json")
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); })
    .await(ready);

  3. mbostock revised this gist Nov 3, 2016. 1 changed file with 5 additions and 7 deletions.
    12 changes: 5 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -40,13 +40,11 @@
    .attr("transform", "translate(0,40)");

    g.selectAll("rect")
    .data(color.range()
    .map(color.invertExtent, color)
    .map(function(interval) {
    var domain = x.domain();
    if (interval[0] == null) interval[0] = domain[0];
    if (interval[1] == null) interval[1] = domain[1];
    return interval;
    .data(color.range().map(function(d) {
    d = color.invertExtent(d);
    if (d[0] == null) d[0] = x.domain()[0];
    if (d[1] == null) d[1] = x.domain()[1];
    return d;
    }))
    .enter().append("rect")
    .attr("height", 8)
  4. mbostock revised this gist Nov 3, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    Source: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables), [Census Bureau](https://www.census.gov/geo/maps-data/data/tiger-cart-boundary.html)
    Source: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables), [Census Bureau](https://github.com/topojson/us-atlas)

    This choropleth shows unemployment rates as of August, 2016 with a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold). I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including [dsv2dsv](https://github.com/d3/d3-dsv/blob/master/README.md#dsv2dsv):

  5. mbostock revised this gist Nov 3, 2016. 2 changed files with 48 additions and 6 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    Source: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables), [Census Bureau](https://www.census.gov/geo/maps-data/data/tiger-cart-boundary.html)

    This choropleth shows unemployment rates as of August, 2016 with a [quantize scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize). A [threshold scale](/mbostock/3306362) is a useful alternative for coloring arbitrary ranges. I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including [dsv2dsv](https://github.com/d3/d3-dsv/blob/master/README.md#dsv2dsv):
    This choropleth shows unemployment rates as of August, 2016 with a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold). I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including [dsv2dsv](https://github.com/d3/d3-dsv/blob/master/README.md#dsv2dsv):

    ```
    cat <(echo "id,rate") \
    52 changes: 47 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@
    </style>
    <svg width="960" height="600"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <script>

    @@ -26,9 +27,48 @@

    var path = d3.geoPath();

    var quantize = d3.scaleQuantize()
    .domain([0, 12])
    .range(["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]);
    var x = d3.scaleLinear()
    .domain([1, 10])
    .rangeRound([600, 860]);

    var color = d3.scaleThreshold()
    .domain(d3.range(2, 10))
    .range(d3.schemeBlues[9]);

    var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");

    g.selectAll("rect")
    .data(color.range()
    .map(color.invertExtent, color)
    .map(function(interval) {
    var domain = x.domain();
    if (interval[0] == null) interval[0] = domain[0];
    if (interval[1] == null) interval[1] = domain[1];
    return interval;
    }))
    .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });

    g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Unemployment rate");

    g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return i ? x : x + "%"; })
    .tickValues(color.domain()))
    .select(".domain")
    .remove();

    d3.queue()
    .defer(d3.json, "https://unpkg.com/us-atlas/us/10m.json")
    @@ -43,8 +83,10 @@
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("fill", function(d) { return quantize(unemployment.get(d.id)); })
    .attr("d", path);
    .attr("fill", function(d) { return color(d.rate = unemployment.get(d.id)); })
    .attr("d", path)
    .append("title")
    .text(function(d) { return d.rate + "%"; });

    svg.append("path")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
  6. mbostock revised this gist Nov 3, 2016. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,14 @@
    Source: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables), [Census Bureau](https://www.census.gov/geo/maps-data/data/tiger-cart-boundary.html)

    This choropleth shows unemployment rates as of September, 2016 with a [quantize scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize). A [threshold scale](/mbostock/3306362) is a useful alternative for coloring arbitrary ranges. I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including [dsv2dsv](https://github.com/d3/d3-dsv/blob/master/README.md#dsv2dsv):
    This choropleth shows unemployment rates as of August, 2016 with a [quantize scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize). A [threshold scale](/mbostock/3306362) is a useful alternative for coloring arbitrary ranges. I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including [dsv2dsv](https://github.com/d3/d3-dsv/blob/master/README.md#dsv2dsv):

    ```
    cat <(echo "id,rate") \
    <(tail -n +7 laucntycur14.txt \
    | grep 'Aug-16' \
    | cut -b 21-22,28-30,129-133 \
    | tr -s ' ' \
    | dsv2dsv -r ' ' -w ',') \
    > unemployment.csv
    | dsv2dsv -r ' ') \
    | csv2tsv \
    > unemployment.tsv
    ```
  7. mbostock revised this gist Nov 3, 2016. 3 changed files with 3241 additions and 3244 deletions.
    13 changes: 12 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,12 @@
    This choropleth encodes unemployment rates from 2008 with a [quantize scale](https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-quantize) ranging from 0 to 15%. A [threshold scale](../3306362) is a useful alternative for coloring arbitrary ranges.
    Source: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables), [Census Bureau](https://www.census.gov/geo/maps-data/data/tiger-cart-boundary.html)

    This choropleth shows unemployment rates as of September, 2016 with a [quantize scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize). A [threshold scale](/mbostock/3306362) is a useful alternative for coloring arbitrary ranges. I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including [dsv2dsv](https://github.com/d3/d3-dsv/blob/master/README.md#dsv2dsv):

    ```
    cat <(echo "id,rate") \
    <(tail -n +7 laucntycur14.txt \
    | cut -b 21-22,28-30,129-133 \
    | tr -s ' ' \
    | dsv2dsv -r ' ' -w ',') \
    > unemployment.csv
    ```
    35 changes: 10 additions & 25 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,42 +12,27 @@
    stroke-linejoin: round;
    }

    .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>
    <svg width="960" height="600"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <script>

    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

    var rateById = d3.map();

    var quantize = d3.scaleQuantize()
    .domain([0, 0.15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
    var unemployment = d3.map();

    var projection = d3.geoAlbersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);
    var path = d3.geoPath();

    var path = d3.geoPath()
    .projection(projection);
    var quantize = d3.scaleQuantize()
    .domain([0, 12])
    .range(["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]);

    d3.queue()
    .defer(d3.json, "/mbostock/raw/4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .defer(d3.json, "https://unpkg.com/us-atlas/us/10m.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); })
    .await(ready);

    function ready(error, us) {
    @@ -56,9 +41,9 @@
    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("class", function(d) { return quantize(rateById.get(d.id)); })
    .attr("fill", function(d) { return quantize(unemployment.get(d.id)); })
    .attr("d", path);

    svg.append("path")
    6,437 changes: 3,219 additions & 3,218 deletions unemployment.tsv
    View file
    3,219 additions, 3,218 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  8. mbostock revised this gist Oct 27, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,8 +24,8 @@

    </style>
    <svg width="960" height="600"></svg>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script>

    var svg = d3.select("svg"),
  9. mbostock revised this gist Jul 6, 2016. 2 changed files with 12 additions and 16 deletions.
    2 changes: 2 additions & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    license: gpl-3.0
    height: 600
    border: no
    26 changes: 10 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,33 +23,29 @@
    .q8-9 { fill:rgb(8,48,107); }

    </style>
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/queue.v1.min.js"></script>
    <svg width="960" height="600"></svg>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script>

    var width = 960,
    height = 600;
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

    var rateById = d3.map();

    var quantize = d3.scale.quantize()
    .domain([0, .15])
    var quantize = d3.scaleQuantize()
    .domain([0, 0.15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

    var projection = d3.geo.albersUsa()
    var projection = d3.geoAlbersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);

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

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    queue()
    d3.queue()
    .defer(d3.json, "/mbostock/raw/4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);
    @@ -71,6 +67,4 @@
    .attr("d", path);
    }

    d3.select(self.frameElement).style("height", height + "px");

    </script>
  10. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  11. mbostock revised this gist Oct 31, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,9 +24,9 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/queue.v1.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script>

    var width = 960,
  12. mbostock revised this gist Jun 11, 2015. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,9 +24,9 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script>

    var width = 960,
    @@ -55,6 +55,8 @@
    .await(ready);

    function ready(error, us) {
    if (error) throw error;

    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
  13. mbostock revised this gist Mar 30, 2014. 1 changed file with 9 additions and 2 deletions.
    11 changes: 9 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,15 +30,20 @@
    <script>

    var width = 960,
    height = 500;
    height = 600;

    var rateById = d3.map();

    var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

    var path = d3.geo.path();
    var projection = d3.geo.albersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);

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

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    @@ -64,4 +69,6 @@
    .attr("d", path);
    }

    d3.select(self.frameElement).style("height", height + "px");

    </script>
  14. mbostock revised this gist Jun 15, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -45,7 +45,7 @@
    .attr("height", height);

    queue()
    .defer(d3.json, "/d/4090846/us.json")
    .defer(d3.json, "/mbostock/raw/4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

  15. mbostock revised this gist Apr 7, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -53,7 +53,7 @@
    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features.filter(function(d) { return d.geometry; })) // https://github.com/mbostock/d3/pull/1186
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("class", function(d) { return quantize(rateById.get(d.id)); })
    .attr("d", path);
  16. mbostock revised this gist Apr 5, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -53,7 +53,7 @@
    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .data(topojson.feature(us, us.objects.counties).features.filter(function(d) { return d.geometry; })) // https://github.com/mbostock/d3/pull/1186
    .enter().append("path")
    .attr("class", function(d) { return quantize(rateById.get(d.id)); })
    .attr("d", path);
  17. mbostock revised this gist Apr 5, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>

    var width = 960,
    @@ -53,7 +53,7 @@
    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.object(us, us.objects.counties).geometries)
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("class", function(d) { return quantize(rateById.get(d.id)); })
    .attr("d", path);
  18. mbostock revised this gist Mar 26, 2013. 1 changed file with 6 additions and 8 deletions.
    14 changes: 6 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -32,6 +32,8 @@
    var width = 960,
    height = 500;

    var rateById = d3.map();

    var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
    @@ -44,24 +46,20 @@

    queue()
    .defer(d3.json, "/d/4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

    function ready(error, us, unemployment) {
    var rateById = {};

    unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });

    function ready(error, us) {
    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.object(us, us.objects.counties).geometries)
    .enter().append("path")
    .attr("class", function(d) { return quantize(rateById[d.id]); })
    .attr("class", function(d) { return quantize(rateById.get(d.id)); })
    .attr("d", path);

    svg.append("path")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
    .attr("class", "states")
    .attr("d", path);
    }
  19. mbostock revised this gist Mar 26, 2013. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,10 @@
    <meta charset="utf-8">
    <style>

    .counties {
    fill: none;
    }

    .states {
    fill: none;
    stroke: #fff;
  20. mbostock revised this gist Dec 7, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@
    .attr("height", height);

    queue()
    .defer(d3.json, "../4090846/us.json")
    .defer(d3.json, "/d/4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv")
    .await(ready);

  21. mbostock revised this gist Dec 7, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@
    .attr("height", height);

    queue()
    .defer(d3.json, "../4090846/us-bad.json")
    .defer(d3.json, "../4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv")
    .await(ready);

  22. mbostock revised this gist Dec 7, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,9 +20,9 @@

    </style>
    <body>
    <script src="../d3.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="../topojson.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
    <script>

    var width = 960,
  23. mbostock revised this gist Dec 7, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,9 +20,9 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="../d3.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
    <script src="../topojson.js"></script>
    <script>

    var width = 960,
    @@ -39,7 +39,7 @@
    .attr("height", height);

    queue()
    .defer(d3.json, "../4090846/us.json")
    .defer(d3.json, "../4090846/us-bad.json")
    .defer(d3.tsv, "unemployment.tsv")
    .await(ready);

  24. mbostock revised this gist Dec 4, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This choropleth encodes unemployment rates from 2008 with a [quantize scale](https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-quantize) ranging from 0 to 15%.
    This choropleth encodes unemployment rates from 2008 with a [quantize scale](https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-quantize) ranging from 0 to 15%. A [threshold scale](../3306362) is a useful alternative for coloring arbitrary ranges.
  25. mbostock revised this gist Dec 4, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    This choropleth encodes unemployment rates from 2008 with a [quantize scale](https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-quantize) ranging from 0 to 15%.
  26. mbostock revised this gist Dec 1, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    .states {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    }

    .q0-9 { fill:rgb(247,251,255); }
  27. mbostock revised this gist Nov 30, 2012. 2 changed files with 329 additions and 337 deletions.
    38 changes: 15 additions & 23 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,32 +2,26 @@
    <meta charset="utf-8">
    <style>

    .counties {
    stroke: #fff;
    stroke-width: .5px;
    stroke-opacity: .5;
    }

    .states {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
    }

    .Blues .q0-9{fill:rgb(247,251,255)}
    .Blues .q1-9{fill:rgb(222,235,247)}
    .Blues .q2-9{fill:rgb(198,219,239)}
    .Blues .q3-9{fill:rgb(158,202,225)}
    .Blues .q4-9{fill:rgb(107,174,214)}
    .Blues .q5-9{fill:rgb(66,146,198)}
    .Blues .q6-9{fill:rgb(33,113,181)}
    .Blues .q7-9{fill:rgb(8,81,156)}
    .Blues .q8-9{fill:rgb(8,48,107)}
    .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.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
    <script>

    var width = 960,
    @@ -41,30 +35,28 @@

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "Blues");
    .attr("height", height);

    queue()
    .defer(d3.json, "../3750900/us-counties.json")
    .defer(d3.json, "../3750900/us-states.json")
    .defer(d3.json, "../4090846/us.json")
    .defer(d3.tsv, "unemployment.tsv")
    .await(ready);

    function ready(error, counties, states, unemployment) {
    function ready(error, us, unemployment) {
    var rateById = {};

    unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });

    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(counties.features)
    .data(topojson.object(us, us.objects.counties).geometries)
    .enter().append("path")
    .attr("class", function(d) { return quantize(rateById[d.id]); })
    .attr("d", path);

    svg.append("path")
    .datum(states)
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
    .attr("class", "states")
    .attr("d", path);
    }
    628 changes: 314 additions & 314 deletions unemployment.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,318 +1,318 @@
    id rate
    01001 .097
    01003 .091
    01005 .134
    01007 .121
    01009 .099
    01011 .164
    01013 .167
    01015 .108
    01017 .186
    01019 .118
    01021 .099
    01023 .127
    01025 .17
    01027 .159
    01029 .104
    01031 .085
    01033 .114
    01035 .195
    01037 .14
    01039 .101
    01041 .097
    01043 .096
    01045 .093
    01047 .211
    01049 .143
    01051 .09
    01053 .129
    01055 .107
    01057 .128
    01059 .123
    01061 .1
    01063 .147
    01065 .127
    01067 .099
    01069 .089
    01071 .118
    01073 .107
    01075 .148
    01077 .105
    01079 .136
    01081 .086
    01083 .093
    01085 .185
    01087 .114
    01089 .075
    01091 .148
    01093 .152
    01095 .092
    01097 .111
    01099 .187
    01101 .102
    01103 .104
    01105 .198
    01107 .13
    01109 .087
    01111 .151
    01113 .126
    01115 .107
    01117 .076
    01119 .139
    01121 .136
    01123 .137
    01125 .09
    01127 .119
    01129 .151
    01131 .256
    01133 .175
    02013 .101
    02016 .084
    02020 .07
    02050 .148
    02060 .036
    02068 .034
    02070 .084
    02090 .069
    02100 .062
    02110 .057
    02122 .097
    02130 .061
    02150 .066
    02164 .059
    02170 .088
    02180 .121
    02185 .057
    02188 .132
    02201 .136
    02220 .059
    02232 .073
    02240 .081
    02261 .064
    02270 .204
    02280 .098
    02282 .063
    02290 .136
    04001 .148
    04003 .074
    04005 .077
    04007 .109
    04009 .144
    04011 .215
    04012 .089
    04013 .085
    04015 .102
    04017 .142
    04019 .084
    04021 .118
    04023 .172
    04025 .095
    04027 .242
    05001 .143
    05003 .091
    05005 .082
    05007 .053
    05009 .064
    05011 .078
    05013 .062
    05015 .043
    05017 .096
    05019 .063
    05021 .104
    05023 .059
    05025 .06
    05027 .081
    05029 .065
    05031 .059
    05033 .066
    05035 .099
    05037 .071
    05039 .076
    05041 .099
    05043 .091
    05045 .06
    05047 .059
    05049 .061
    05051 .066
    05053 .057
    05055 .082
    05057 .086
    05059 .073
    05061 .072
    05063 .078
    05065 .077
    05067 .092
    05069 .092
    05071 .061
    05073 .086
    05075 .079
    05077 .082
    05079 .082
    05081 .056
    05083 .077
    05085 .052
    05087 .053
    05089 .112
    05091 .045
    05093 .113
    05095 .074
    05097 .058
    05099 .087
    05101 .062
    05103 .071
    05105 .056
    05107 .088
    05109 .063
    05111 .075
    05113 .064
    05115 .062
    05117 .067
    05119 .06
    05121 .073
    05123 .094
    05125 .058
    05127 .063
    05129 .059
    05131 .062
    05133 .051
    05135 .078
    05137 .066
    05139 .095
    05141 .091
    05143 .05
    05145 .067
    05147 .091
    05149 .064
    06001 .113
    06003 .152
    06005 .121
    06007 .122
    06009 .143
    06011 .145
    06013 .112
    06015 .119
    06017 .112
    06019 .141
    06021 .138
    06023 .103
    06025 .301
    06027 .095
    06029 .139
    06031 .139
    06033 .147
    06035 .118
    06037 .127
    06039 .123
    06041 .08
    06043 .088
    06045 .101
    06047 .157
    06049 .111
    06051 .103
    06053 .1
    06055 .087
    06057 .109
    06059 .094
    06061 .113
    06063 .139
    06065 .147
    06067 .122
    06069 .125
    06071 .136
    06073 .102
    06075 .097
    06077 .155
    06079 .09
    06081 .09
    06083 .085
    06085 .118
    06087 .102
    06089 .147
    06091 .137
    06093 .135
    06095 .115
    06097 .099
    06099 .153
    06101 .151
    06103 .137
    06105 .159
    06107 .149
    06109 .127
    06111 .11
    06113 .109
    06115 .178
    08001 .081
    08003 .055
    08005 .069
    08007 .062
    08009 .034
    08011 .05
    08013 .055
    08014 .066
    08015 .051
    08017 .02
    08019 .07
    08021 .051
    08023 .084
    08025 .076
    08027 .052
    08029 .066
    08031 .077
    08033 .132
    08035 .059
    08037 .062
    08039 .06
    08041 .072
    08043 .077
    08045 .058
    08047 .06
    08049 .058
    08051 .044
    08053 .022
    08055 .072
    08057 .033
    08059 .067
    08061 .028
    08063 .029
    08065 .071
    08067 .047
    08069 .056
    08071 .07
    08073 .037
    08075 .046
    08077 .082
    08079 .053
    08081 .056
    08083 .063
    08085 .069
    08087 .049
    08089 .058
    08091 .041
    08093 .061
    08095 .026
    08097 .05
    08099 .05
    08101 .075
    08103 .039
    08105 .048
    08107 .06
    08109 .078
    08111 .053
    08113 .042
    08115 .033
    08117 .058
    08119 .067
    08121 .032
    08123 .075
    08125 .026
    09001 .078
    09003 .088
    09005 .079
    09007 .067
    09009 .089
    09011 .076
    09013 .067
    09015 .09
    1001 .097
    1003 .091
    1005 .134
    1007 .121
    1009 .099
    1011 .164
    1013 .167
    1015 .108
    1017 .186
    1019 .118
    1021 .099
    1023 .127
    1025 .17
    1027 .159
    1029 .104
    1031 .085
    1033 .114
    1035 .195
    1037 .14
    1039 .101
    1041 .097
    1043 .096
    1045 .093
    1047 .211
    1049 .143
    1051 .09
    1053 .129
    1055 .107
    1057 .128
    1059 .123
    1061 .1
    1063 .147
    1065 .127
    1067 .099
    1069 .089
    1071 .118
    1073 .107
    1075 .148
    1077 .105
    1079 .136
    1081 .086
    1083 .093
    1085 .185
    1087 .114
    1089 .075
    1091 .148
    1093 .152
    1095 .092
    1097 .111
    1099 .187
    1101 .102
    1103 .104
    1105 .198
    1107 .13
    1109 .087
    1111 .151
    1113 .126
    1115 .107
    1117 .076
    1119 .139
    1121 .136
    1123 .137
    1125 .09
    1127 .119
    1129 .151
    1131 .256
    1133 .175
    2013 .101
    2016 .084
    2020 .07
    2050 .148
    2060 .036
    2068 .034
    2070 .084
    2090 .069
    2100 .062
    2110 .057
    2122 .097
    2130 .061
    2150 .066
    2164 .059
    2170 .088
    2180 .121
    2185 .057
    2188 .132
    2201 .136
    2220 .059
    2232 .073
    2240 .081
    2261 .064
    2270 .204
    2280 .098
    2282 .063
    2290 .136
    4001 .148
    4003 .074
    4005 .077
    4007 .109
    4009 .144
    4011 .215
    4012 .089
    4013 .085
    4015 .102
    4017 .142
    4019 .084
    4021 .118
    4023 .172
    4025 .095
    4027 .242
    5001 .143
    5003 .091
    5005 .082
    5007 .053
    5009 .064
    5011 .078
    5013 .062
    5015 .043
    5017 .096
    5019 .063
    5021 .104
    5023 .059
    5025 .06
    5027 .081
    5029 .065
    5031 .059
    5033 .066
    5035 .099
    5037 .071
    5039 .076
    5041 .099
    5043 .091
    5045 .06
    5047 .059
    5049 .061
    5051 .066
    5053 .057
    5055 .082
    5057 .086
    5059 .073
    5061 .072
    5063 .078
    5065 .077
    5067 .092
    5069 .092
    5071 .061
    5073 .086
    5075 .079
    5077 .082
    5079 .082
    5081 .056
    5083 .077
    5085 .052
    5087 .053
    5089 .112
    5091 .045
    5093 .113
    5095 .074
    5097 .058
    5099 .087
    5101 .062
    5103 .071
    5105 .056
    5107 .088
    5109 .063
    5111 .075
    5113 .064
    5115 .062
    5117 .067
    5119 .06
    5121 .073
    5123 .094
    5125 .058
    5127 .063
    5129 .059
    5131 .062
    5133 .051
    5135 .078
    5137 .066
    5139 .095
    5141 .091
    5143 .05
    5145 .067
    5147 .091
    5149 .064
    6001 .113
    6003 .152
    6005 .121
    6007 .122
    6009 .143
    6011 .145
    6013 .112
    6015 .119
    6017 .112
    6019 .141
    6021 .138
    6023 .103
    6025 .301
    6027 .095
    6029 .139
    6031 .139
    6033 .147
    6035 .118
    6037 .127
    6039 .123
    6041 .08
    6043 .088
    6045 .101
    6047 .157
    6049 .111
    6051 .103
    6053 .1
    6055 .087
    6057 .109
    6059 .094
    6061 .113
    6063 .139
    6065 .147
    6067 .122
    6069 .125
    6071 .136
    6073 .102
    6075 .097
    6077 .155
    6079 .09
    6081 .09
    6083 .085
    6085 .118
    6087 .102
    6089 .147
    6091 .137
    6093 .135
    6095 .115
    6097 .099
    6099 .153
    6101 .151
    6103 .137
    6105 .159
    6107 .149
    6109 .127
    6111 .11
    6113 .109
    6115 .178
    8001 .081
    8003 .055
    8005 .069
    8007 .062
    8009 .034
    8011 .05
    8013 .055
    8014 .066
    8015 .051
    8017 .02
    8019 .07
    8021 .051
    8023 .084
    8025 .076
    8027 .052
    8029 .066
    8031 .077
    8033 .132
    8035 .059
    8037 .062
    8039 .06
    8041 .072
    8043 .077
    8045 .058
    8047 .06
    8049 .058
    8051 .044
    8053 .022
    8055 .072
    8057 .033
    8059 .067
    8061 .028
    8063 .029
    8065 .071
    8067 .047
    8069 .056
    8071 .07
    8073 .037
    8075 .046
    8077 .082
    8079 .053
    8081 .056
    8083 .063
    8085 .069
    8087 .049
    8089 .058
    8091 .041
    8093 .061
    8095 .026
    8097 .05
    8099 .05
    8101 .075
    8103 .039
    8105 .048
    8107 .06
    8109 .078
    8111 .053
    8113 .042
    8115 .033
    8117 .058
    8119 .067
    8121 .032
    8123 .075
    8125 .026
    9001 .078
    9003 .088
    9005 .079
    9007 .067
    9009 .089
    9011 .076
    9013 .067
    9015 .09
    10001 .079
    10003 .086
    10005 .073
  28. mbostock revised this gist Nov 13, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  29. mbostock revised this gist Nov 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  30. mbostock revised this gist Nov 12, 2012. 1 changed file with 3 additions and 6 deletions.
    9 changes: 3 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@
    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v0.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script>

    var width = 960,
    @@ -50,11 +50,8 @@
    .defer(d3.tsv, "unemployment.tsv")
    .await(ready);

    function ready(error, data) {
    var counties = data[0],
    states = data[1],
    unemployment = data[2],
    rateById = {};
    function ready(error, counties, states, unemployment) {
    var rateById = {};

    unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });