U.S. Broadband Internet Access / Chris Henrick

Chris Henrick

Maps, Data, Viz, UX, Design

Workspace

Published

Edited

Apr 18, 2019

Importers

6 stars

maps and geo

Carto SQL API (v3)Hello, Carto Maps API (v3)Hello, Mapbox Geocoder API Hello, Polyline ArcGIS JS API: Custom Elevation Profile Chart ArcGIS JS API: GPX route overlay from file upload ArcGIS JS API: GPX Route Mapper ArcGIS JS API: GPX route overlay Hello, ArcGIS JS SDK % Chance GOP Takes House Seat in November (Diverging Scale)Location Map using d3-geo and d3-tile SWD: Internet Access Choropleth Makeover U.S. County Population Density Choropleth U.S. Hexagon Map SVG with Data Joined Reusable U.S. Choropleth Map Hello, CARTO Maps API U.S. Coronavirus Cumulative Cases Animated Map NY Times COVID-19 Cases by Race/Ethnicity SF Bay Area Jobs: Quantiles CARTO-VL: Update Vis Layer Hello, CARTO-VL Autocomplete Search Leaflet Pattern Fills California Chronic Drinking Water Safety Violations d3.geoIdentity Lat Lon or Lon Lat?Implementing an SVG Zoom Animation Without a D3 Transition Household Internet Access by Population Density Dorling Cartogram Circle Packs Golden Gate Bathymetry Contours U.S. County Centroids

U.S. Broadband Internet Access

SF Bay Area Jobs Viz SVG Exporter v2 Hello, NYC Geosearch API!Mapping Airline Data From OmniSciDB Tutorial: MapBoxGL HexBin Map SF Bay Area Job Density SF Bay Area Basemap MapD Connector NPM test

Also listed in…

U.S. Census

chart = {

// code borrowed from https://beta.observablehq.com/@mbostock/d3-choropleth

const width = 960;

const height = 600;

const path = d3.geoPath();

const svg = d3.select(DOM.svg(width, height))

.style("width", "100%")

.style("height", "auto");

const g = svg.append("g")

.call(legend)

svg.append("g")

.classed("features", true)

.selectAll(".feature")

.data(topojson.feature(us10m, us10m.objects.counties).features)

.enter()

.append("path")

.classed("feature", true)

.attr("fill", d => color(getRatio(d)))

.attr("stroke", "#fff")

.attr("stroke-width", 0.3)

.attr("d", path)

.append("title")

.text(d =>

`${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} ${d3.format(".2f")(getRatio(d))}`

);

svg.append("path")

.classed("state-boundaries", true)

.datum(topojson.mesh(us10m, us10m.objects.states, (a, b) => a !== b))

.attr("fill", "none")

.attr("stroke", "white")

.attr("stroke-linejoin", "round")

.attr("d", path);

return svg.node();

}

legend = g => {

const xScale = d3.scaleLinear()

.range([600, 860])

.domain(d3.extent(color.domain()));

g.classed("legend", true)

.attr("transform", "translate(0, 40)")

.selectAll("rect")

.data(color.range().map(d => color.invertExtent(d)))

.enter()

.append("rect")

.attr("height", 8)

.attr("x", d => xScale(d[0]))

.attr("width", d => xScale(d[1]) - xScale(d[0]))

.attr("fill", d => color(d[0]));

g.append("text")

.attr("class", "caption")

.attr("x", xScale.range()[0])

.attr("y", -6)

.attr("fill", "#000")

.attr("text-anchor", "start")

.attr("font-weight", "bold")

.text(`Ratio of households ${label}`);

g.call(d3.axisBottom(xScale)

.tickSize(13)

.tickFormat(format)

.tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))

.select(".domain")

.remove();

}

getRatio = d => {

const m = acs.get(d.id);

return m[option] / m["HD01_VD01"];

}

color = d3.scaleQuantize()

.domain(colorDomain)

.range(colorRange)

colorDomain = label === "without internet access" ? [0, 0.8] : [0, 1]

colorRange = label === "without internet access" ? colorScheme[7] : colorScheme[9]

colorScheme = d3.schemeRdPu

options = {

const descriptions = ["with broadband access", "without internet access"]

const keys = Object.keys(acs.get("01001")).slice(2, 4)

return d3.zip(descriptions, keys).map(d => ({ label: d[0], value: d[1] }))

}

label = options.find(d => d.value === option).label

format = d3.format(".1f")

parse = function(datum) {

for (let key in datum) {

datum[key] = Number(datum[key]);

}

return datum;

}

acs = {

const data = await d3.csv("https://gist.githubusercontent.com/clhenrick/b22ba8d3304ea0adad64486f3aec034a/raw/cf754ca2b2781836b4c7d106e0a6d6721f52b54d/acs_internet_presence.csv");

return data.reduce((acc, cur) => {

const { geoid, ...rest } = cur;

return acc.set(geoid, ({...(parse(rest))}));

}, new Map());

}

states = new Map(us10m.objects.states.geometries.map(d => [d.id, d.properties]))

us10m = await d3.json("https://unpkg.com/us-atlas@2/us/10m.json")

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more