Skip to content

Instantly share code, notes, and snippets.

@palewire

palewire/.block

Forked from mbostock/.block
Last active August 17, 2023 03:59
Download ZIP

Revisions

  1. palewire revised this gist Jul 9, 2017. No changes.
  2. palewire revised this gist Jul 9, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    Source: [California Civic Data Coalition](https://github.com/california-civic-data-coalition/python-calaccess-notebooks/blob/master/project-management/mooc-students.ipynb)

    This choropleth shows the total number of students by country enrolled in the online class ["Python for Data Journalists"](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017. More than 2,700 total students from more than 120 countries participated in the month-long course.
    This map shows the number of students in each country enrolled in the online class ["Python for Data Journalists"](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) and the [California Civic Data Coalition](http://www.californiacivicdata.org/) in 2017. More than 2,700 total students from more than 120 countries participated in the month-long course.

    It uses a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) and is based on previous choropleth maps [published by Mike Bostock](https://bl.ocks.org/mbostock/4060606).
    The code uses d3 version 4 and a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold). It is based on previous choropleth maps [published by Mike Bostock](https://bl.ocks.org/mbostock/4060606).
  3. palewire revised this gist Jul 9, 2017. 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,5 +1,5 @@
    Source: [California Civic Data Coalition](https://github.com/california-civic-data-coalition/python-calaccess-notebooks/blob/master/project-management/mooc-students.ipynb)

    This choropleth shows the total number of students by country enrolled in the online class ["Python for Data Journalists"](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017. More than 2,700 total students participated in the month-long course.
    This choropleth shows the total number of students by country enrolled in the online class ["Python for Data Journalists"](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017. More than 2,700 total students from more than 120 countries participated in the month-long course.

    It uses a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) and is based on previous choropleth maps [published by Mike Bostock](https://bl.ocks.org/mbostock/4060606).
  4. palewire revised this gist Jul 9, 2017. 2 changed files with 0 additions and 0 deletions.
    Binary file added preview.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.
    Binary file added 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.
  5. palewire revised this gist Jul 9, 2017. 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,5 +1,5 @@
    Source: [California Civic Data Coalition](https://github.com/california-civic-data-coalition/python-calaccess-notebooks/blob/master/project-management/mooc-students.ipynb)

    This choropleth shows the total number of students by country enrolled in the online class [Python for Data Journalists](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017. More than 2,700 total students participated in the month-long course.
    This choropleth shows the total number of students by country enrolled in the online class ["Python for Data Journalists"](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017. More than 2,700 total students participated in the month-long course.

    It uses a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) and is based on previous choropleth maps [published by Mike Bostock](https://bl.ocks.org/mbostock/4060606).
  6. palewire revised this gist Jul 9, 2017. 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,5 +1,5 @@
    Source: [California Civic Data Coalition](https://github.com/california-civic-data-coalition/python-calaccess-notebooks/blob/master/project-management/mooc-students.ipynb)

    This choropleth shows the total number of students by country enrolled in the online class [Python for Data Journalists](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017.
    This choropleth shows the total number of students by country enrolled in the online class [Python for Data Journalists](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017. More than 2,700 total students participated in the month-long course.

    It uses a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) and is based on previous choropleth maps [published by Mike Bostock](https://bl.ocks.org/mbostock/4060606).
  7. palewire revised this gist Jul 9, 2017. 6 changed files with 192 additions and 3307 deletions.
    2 changes: 1 addition & 1 deletion .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    license: gpl-3.0
    license: MIT
    height: 600
    border: no
    15 changes: 3 additions & 12 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,5 @@
    Source: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables), [Census Bureau](https://github.com/topojson/us-atlas)
    Source: [California Civic Data Coalition](https://github.com/california-civic-data-coalition/python-calaccess-notebooks/blob/master/project-management/mooc-students.ipynb)

    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):
    This choropleth shows the total number of students by country enrolled in the online class [Python for Data Journalists](http://journalismcourses.org/PDJ0517.html) taught by [Ben Welsh](http://palewi.re/who-is-ben-welsh/) in 2017.

    ```
    cat <(echo "id,rate") \
    <(tail -n +7 laucntycur14.txt \
    | grep 'Aug-16' \
    | cut -b 21-22,28-30,129-133 \
    | tr -s ' ' \
    | dsv2dsv -r ' ') \
    | csv2tsv \
    > unemployment.tsv
    ```
    It uses a [threshold scale](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) and is based on previous choropleth maps [published by Mike Bostock](https://bl.ocks.org/mbostock/4060606).
    139 changes: 65 additions & 74 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,95 +1,86 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .counties {
    fill: none;
    }

    .states {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    }

    .countries {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    }
    .legendThreshold {
    font-size: 12px;
    font-family: sans-serif;
    }
    .caption {
    fill: #000;
    text-anchor: start;
    font-weight: bold;
    }
    </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 src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
    <script>

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

    var unemployment = d3.map();

    // Map and projection
    var path = d3.geoPath();

    var x = d3.scaleLinear()
    .domain([1, 10])
    .rangeRound([600, 860]);

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

    var projection = d3.geoNaturalEarth()
    .scale(width / 2 / Math.PI)
    .translate([width / 2, height / 2])
    var path = d3.geoPath()
    .projection(projection);

    // Data and color scale
    var data = d3.map();
    var colorScheme = d3.schemeReds[6];
    colorScheme.unshift("#eee")
    var colorScale = d3.scaleThreshold()
    .domain([1, 6, 11, 26, 101, 1001])
    .range(colorScheme);

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

    g.selectAll("rect")
    .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)
    .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]); });

    .attr("class", "legendThreshold")
    .attr("transform", "translate(20,20)");
    g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("x", 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();

    .text("Students");
    var labels = ['0', '1-5', '6-10', '11-25', '26-100', '101-1000', '> 1000'];
    var legend = d3.legendColor()
    .labels(function (d) { return labels[d.i]; })
    .shapePadding(4)
    .scale(colorScale);
    svg.select(".legendThreshold")
    .call(legend);

    // Load external data and boot
    d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); })
    .defer(d3.json, "http://enjalot.github.io/wwsd/data/world/world-110m.geojson")
    .defer(d3.csv, "mooc-countries.csv", function(d) { data.set(d.code, +d.total); })
    .await(ready);

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

    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("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; }))
    .attr("class", "states")
    .attr("d", path);
    function ready(error, topo) {
    if (error) throw error;

    // Draw the map
    svg.append("g")
    .attr("class", "countries")
    .selectAll("path")
    .data(topo.features)
    .enter().append("path")
    .attr("fill", function (d){
    // Pull data for this country
    d.total = data.get(d.id) || 0;
    // Set the color
    return colorScale(d.total);
    })
    .attr("d", path);
    }

    </script>
    </script>
    123 changes: 123 additions & 0 deletions mooc-countries.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@
    name,total,percent,code
    Albania,2,0.000730727073438,ALB
    Algeria,2,0.000730727073438,DZA
    Antigua And Barbuda,3,0.00109609061016,ATG
    Argentina,52,0.0189989039094,ARG
    Armenia,1,0.000365363536719,ARM
    Australia,34,0.0124223602484,AUS
    Austria,6,0.00219218122031,AUT
    Azerbaijan,3,0.00109609061016,AZE
    Bangladesh,3,0.00109609061016,BGD
    Belarus,2,0.000730727073438,BLR
    Belgium,13,0.00474972597735,BEL
    Belize,1,0.000365363536719,BLZ
    Bermuda,1,0.000365363536719,BMU
    "Bolivia, Plurinational State Of",3,0.00109609061016,BOL
    Bosnia And Herzegovina,1,0.000365363536719,BIH
    Botswana,1,0.000365363536719,BWA
    Brazil,319,0.116550968213,BRA
    Bulgaria,2,0.000730727073438,BGR
    Burundi,1,0.000365363536719,BDI
    Cambodia,1,0.000365363536719,KHM
    Cameroon,3,0.00109609061016,CMR
    Canada,62,0.0226525392766,CAN
    Chile,23,0.00840336134454,CHL
    China,26,0.00949945195469,CHN
    Colombia,32,0.011691633175,COL
    Costa Rica,9,0.00328827183047,CRI
    Croatia,1,0.000365363536719,HRV
    Cuba,3,0.00109609061016,CUB
    Czechia,6,0.00219218122031,CZE
    Denmark,5,0.0018268176836,DNK
    Dominican Republic,5,0.0018268176836,DOM
    Ecuador,21,0.0076726342711,ECU
    Egypt,13,0.00474972597735,EGY
    El Salvador,5,0.0018268176836,SLV
    Ethiopia,1,0.000365363536719,ETH
    Fiji,2,0.000730727073438,FJI
    Finland,9,0.00328827183047,FIN
    France,23,0.00840336134454,FRA
    Georgia,3,0.00109609061016,GEO
    Germany,63,0.0230179028133,DEU
    Ghana,9,0.00328827183047,GHA
    Greece,14,0.00511508951407,GRC
    Guatemala,13,0.00474972597735,GTM
    Guyana,1,0.000365363536719,GUY
    Haiti,1,0.000365363536719,HTI
    Honduras,6,0.00219218122031,HND
    Hong Kong,20,0.00730727073438,HKG
    Hungary,9,0.00328827183047,HUN
    India,70,0.0255754475703,IND
    Indonesia,7,0.00255754475703,IDN
    Iraq,2,0.000730727073438,IRQ
    Ireland,7,0.00255754475703,IRL
    Israel,3,0.00109609061016,ISR
    Italy,26,0.00949945195469,ITA
    Jamaica,1,0.000365363536719,JAM
    Japan,8,0.00292290829375,JPN
    Jordan,4,0.00146145414688,JOR
    Kazakhstan,1,0.000365363536719,KAZ
    Kenya,10,0.00365363536719,KEN
    "Korea, Republic Of",11,0.00401899890391,KOR
    Kyrgyzstan,1,0.000365363536719,KGZ
    Latvia,2,0.000730727073438,LVA
    Lebanon,3,0.00109609061016,LBN
    Liberia,2,0.000730727073438,LBR
    Libya,1,0.000365363536719,LBY
    Malawi,5,0.0018268176836,MWI
    Malaysia,12,0.00438436244063,MYS
    Mexico,81,0.0295944464742,MEX
    Mongolia,1,0.000365363536719,MNG
    Morocco,3,0.00109609061016,MAR
    Mozambique,4,0.00146145414688,MOZ
    Myanmar,2,0.000730727073438,MMR
    Nepal,3,0.00109609061016,NPL
    Netherlands,26,0.00949945195469,NLD
    New Zealand,10,0.00365363536719,NZL
    Nicaragua,4,0.00146145414688,NIC
    Nigeria,39,0.014249177932,NGA
    Norway,10,0.00365363536719,NOR
    Pakistan,11,0.00401899890391,PAK
    "Palestine, State Of",3,0.00109609061016,PSE
    Panama,2,0.000730727073438,PAN
    Paraguay,3,0.00109609061016,PRY
    Peru,18,0.00657654366094,PER
    Philippines,14,0.00511508951407,PHL
    Poland,3,0.00109609061016,POL
    Portugal,22,0.00803799780782,PRT
    Puerto Rico,2,0.000730727073438,PRI
    Romania,10,0.00365363536719,ROU
    Russian Federation,14,0.00511508951407,RUS
    Rwanda,2,0.000730727073438,RWA
    Réunion,1,0.000365363536719,REU
    Saudi Arabia,1,0.000365363536719,SAU
    Senegal,1,0.000365363536719,SEN
    Serbia,3,0.00109609061016,SRB
    Sierra Leone,2,0.000730727073438,SLE
    Singapore,11,0.00401899890391,SGP
    Slovakia,3,0.00109609061016,SVK
    Somalia,1,0.000365363536719,SOM
    South Africa,18,0.00657654366094,ZAF
    South Sudan,1,0.000365363536719,SSD
    Spain,104,0.0379978078188,ESP
    Sri Lanka,2,0.000730727073438,LKA
    Sudan,1,0.000365363536719,SDN
    Sweden,20,0.00730727073438,SWE
    Switzerland,9,0.00328827183047,CHE
    Taiwan,18,0.00657654366094,TWN
    "Tanzania, United Republic Of",1,0.000365363536719,TZA
    Thailand,2,0.000730727073438,THA
    Timor-Leste,1,0.000365363536719,TLS
    Togo,1,0.000365363536719,TGO
    Trinidad And Tobago,5,0.0018268176836,TTO
    Tunisia,3,0.00109609061016,TUN
    Turkey,7,0.00255754475703,TUR
    Uganda,1,0.000365363536719,UGA
    Ukraine,30,0.0109609061016,UKR
    United Arab Emirates,1,0.000365363536719,ARE
    United Kingdom,87,0.0317866276946,GBR
    United States,1064,0.388746803069,USA
    Uruguay,4,0.00146145414688,URY
    "Venezuela, Bolivarian Republic Of",28,0.0102301790281,VEN
    Viet Nam,1,0.000365363536719,VNM
    Zimbabwe,3,0.00109609061016,ZWE
    Binary file removed thumbnail.png
    View file
    Binary file not shown.
    3,220 changes: 0 additions & 3,220 deletions unemployment.tsv
    View file
    0 additions, 3,220 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  8. @mbostock 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);

  9. @mbostock 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)
  10. @mbostock 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):

  11. @mbostock 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; }))
  12. @mbostock 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
    ```
  13. @mbostock 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.
  14. @mbostock 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"),
  15. @mbostock 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>
  16. @mbostock 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
  17. @mbostock 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,
  18. @mbostock 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")
  19. @mbostock 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>
  20. @mbostock 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);

  21. @mbostock 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);
  22. @mbostock 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);
  23. @mbostock 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);
  24. @mbostock 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);
    }
  25. @mbostock 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;
  26. @mbostock 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);

  27. @mbostock 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);

  28. @mbostock 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,
  29. @mbostock 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);

  30. @mbostock 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.