Useful Javascript Array functions.SVG cheat sheetD3: IntroducingScales and AxesUseful D3 Functions for Data handlingWeek 2, TuesdayclipPath and textPathUS Baby NamesData Fetch and Meta dataWeek 3Week 4: Getting Started With InteractionWeb Scraping Table data from HTML file.Fetch Covid-19 dataWeek 5Week 8: HierarchiesCircle PackingTreemapGraph LayoutWeek 6Week 7: TuesdayDrawing Axis in d3 CanvasInteraction in d3 Canvas based Scatter PlotsTopoJSON and GeoVisualizationMore d3 Scale functions and InterpolationsColor from Wavelength, Correlated Temperature and HTML color pickerHSV and HSL Color ModelsMore on d3 join()Final Projects
GeoVisualization using D3
Table([
{
Type: "Point",
Example: `{
"type": "Point",
"coordinates": [30, 10]
}`
},
{
Type: "LineString",
Example: `{
"type": "LineString",
"coordinates": [
[30, 10], [10, 30], [40, 40]
]
}`
},
{
Type: "Polygon",
Example: `{
"type": "Polygon",
"coordinates": [
[[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
]
}`
},
{
Type: "Polygon with hole",
Example: `{
"type": "Polygon",
"coordinates": [
[[35, 10], [45, 45], [15, 40], [10, 20], [35, 10]],
[[20, 30], [35, 35], [30, 20], [20, 30]]
]
}`
},
{
Type: "MultiPoint",
Example: `{
"type": "MultiPoint",
"coordinates": [
[10, 40], [40, 30], [20, 20], [30, 10]
]
}`
},
{
Type: "MultiLineString",
Example: `{
"type": "MultiLineString",
"coordinates": [
[[10, 10], [20, 20], [10, 40]],
[[40, 40], [30, 30], [40, 20], [30, 10]]
]
}`
},
{
Type: "MultiPolygon",
Example: `{
"type": "MultiPolygon",
"coordinates": [
[
[[30, 20], [45, 40], [10, 40], [30, 20]]
],
[
[[15, 5], [40, 10], [10, 20], [5, 10], [15, 5]]
]
]
}`
},
{
Type: "MultiPolygon with hole",
Example: `{
"type": "MultiPolygon",
"coordinates": [
[
[[40, 40], [20, 45], [45, 30], [40, 40]]
],
[
[[20, 35], [10, 30], [10, 10], [30, 5], [45, 20], [20, 35]],
[[30, 20], [20, 15], [20, 25], [30, 20]]
]
]
}`
},
{
Type: "GeometryCollection",
Example: `{
"type": "GeometryCollection",
"geometries": [
{
"type": "Point",
"coordinates": [40, 10]
},
{
"type": "LineString",
"coordinates": [
[10, 10], [20, 20], [10, 40]
]
},
{
"type": "Polygon",
"coordinates": [
[[40, 40], [20, 45], [45, 30], [40, 40]]
]
}
]
}`
}
])
md`### Graticules
Grid of parallels and meridians.
- D3 support:
- d3.geoGraticule10(): generates meridians and parallels every 10° between ±80° latitude; for the polar regions, there are meridians every 90°.
`
graticules= d3.geoGraticule10()
d3
.geoCircle()
.radius(5)
.precision(1)([0, 0])
countryData
md`### Creating your GeoJson data for Plotting and using geo interpolator
~~~
const geoInterpolator = d3.geoInterpolate(sourceLonLat, destLonLat);
~~~
`
{
const context = DOM.context2d(width, height);
const margin = 25;
const projection = d3["geo" + projectionOption]()
.fitExtent([[margin, margin], [width - margin, height - margin]], outline)
.rotate([rotateAngles.lambda, rotateAngles.phi, rotateAngles.gamma]); //Projection.get(projectionChoice)
const geoPathGenerator = d3
.geoPath()
.projection(projection)
.context(context);
const drawRegions = event => {
context.clearRect(0, 0, width, height);
context.beginPath();
context.strokeStyle = "black";
geoPathGenerator(outline);
context.stroke();
countryData.features.forEach(feature => {
if (
event &&
d3.geoContains(feature, projection.invert(d3.pointer(event)))
) {
showRegionSpecificInfo(context, geoPathGenerator, feature);
context.strokeStyle = "red";
} else context.strokeStyle = "steelblue";
context.beginPath();
geoPathGenerator(feature);
context.stroke();
});
};
drawRegions();
d3.select(context.canvas).on("click", drawRegions);
return context.canvas;
function showRegionSpecificInfo(ctx, generator, feature) {
const centroid = generator.centroid(feature);
const bounds = generator.bounds(feature);
const measure = generator.measure(feature);
const area = generator.area(feature);
(ctx.strokeStyle = "green"), ctx.beginPath();
ctx.arc(centroid[0], centroid[1], 5, 0, 2 * Math.PI);
ctx.stroke();
ctx.strokeRect(
bounds[0][0],
bounds[0][1],
bounds[1][0] - bounds[0][0],
bounds[1][1] - bounds[0][1]
);
ctx.textAlign = 'center';
ctx.fillText(
"Boundary Pixel Length: " + measure.toFixed(0),
centroid[0],
centroid[1] - 10
);
ctx.fillText(
"Total Pixel area: " + area.toFixed(0),
centroid[0],
centroid[1] + 10
);
}
}
projectionOption = options.projectionOption
outline = ({ type: "Sphere" })
Thursday = md`## Thursday: Geovisualization Techniques
- Geographical data
- Choropleth
- Bubble Map
- Dot density map: see https://observablehq.com/@floledermann/dot-density-maps-with-d3
- Cartogram: see https://observablehq.com/@d3/non-contiguous-cartogram
`
md`### Flight Path`
{
const height = width * 0.6;
const margin = 25;
const [svgNode, svg] = getSVG(width, height, margin);
const W = width - 2 * margin,
H = height - 2 * margin;
//const projection = d3.geoNaturalEarth1().fitSize([W, H], countryData);
const projection = d3.geoAlbers().fitSize([W, H], USstatesJson);
const outline = { type: "Sphere" };
const geoGenerator = d3.geoPath().projection(projection);
svg
.append("path")
.attr("d", geoGenerator(outline))
.style("stroke", "black")
.style("fill", "none");
svg
.append("path")
.attr("d", geoGenerator(graticules))
.style("stroke", "lightgrey")
.style("fill", "none");
svg
.append("g")
.selectAll("path")
.data(USstatesJson.features)
.join("path")
.attr("d", geoGenerator)
.style("stroke", "steelblue")
.style("fill", "none");
svg
.append("g")
.selectAll("path")
.data(flightpath)
.join("path")
.attr("d", d =>
geoGenerator({
type: "Feature",
geometry: {
type: "LineString",
coordinates: [[d.start_lon, d.start_lat], [d.end_lon, d.end_lat]]
}
})
)
.style("fill", d => "none")
.style("stroke", "lightgrey");
return svgNode;
}
md`### Choropleth`
legend({ color: colorScale, title: "population", tickFormat: ".02s" })
viewof prop = radio({ options: ["pop_est", "gdp_md_est"], value: "pop_est" })
ISO = countryDataDetailed.features.map(d =>
currentDataGroupedByISO.get(d.properties.sov_a3)
)
md`### US Covid map`
md`### Non-Contiguous Cartogram`
USstatesJson.features[10]
mutable feedback = ""
usCovidDensityColorScale = d3
.scaleSequential()
.domain(
d3.extent(
USstatesJson.features,
d => (10000 * d.properties.death) / d.properties.population
)
)
.interpolator(d3.interpolateOrRd)
.unknown("#ccc")
bubbleScale = d3
.scaleSqrt()
.domain(d3.extent(US_Covid_data, d => d.death)).range([3, 20])
cartoScale = d3
.scaleLinear()
.domain(
d3.extent(
USstatesJson.features,
d => d.properties.death / d.properties.population
)
)
.range([0, 1])
USstatesJson
US_Covid_data
md`### Bubble Plot`
scaleRad = d3
.scaleSqrt()
.domain([0, 50000])
.range([2, 20])
{
const height = width * 0.6;
const margin = 25;
const [svgNode, svg] = getSVG(width, height, margin);
const W = width - 2 * margin,
H = height - 2 * margin;
const projection = d3.geoAlbersUsa().fitSize([W, H], USstatesJson);
const geoGenerator = d3.geoPath().projection(projection);
/*
svg
.append("path")
.attr("d", geoGenerator(graticules))
.style("stroke", "lightgrey")
.style("fill", "none");
*/
svg
.append("g")
.selectAll("path")
.data(USstatesJson.features)
.join("path")
.attr("d", geoGenerator)
.style("stroke", "lightgrey")
.style("fill", "none");
svg
.append("g")
.selectAll("circle")
.data(USstatesJson.features)
.join("circle")
.attr("transform", d => {
const [cx, cy] = geoGenerator.centroid(d);
return `translate(${cx}, ${cy})`;
})
.attr("r", d => scaleRad(d.properties.death))
.style("opacity", 0.5)
.style("fill", "black");
return svgNode;
}
USstatesJson
scaleRad(40000)
md`### Data`
height = width * 0.5
airports = {
const rawAirports = await (await fetch(
"https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat"
)).text();
const airportDataHeading =
"Airport ID,Name,City,Country,IATA,ICAO,Latitude,Longitude,Altitude,Timezone,DST,Tz,Type,Source\n";
return d3.csvParse(airportDataHeading + rawAirports);
}
airPortColor = d3
.scaleOrdinal()
.domain(["airport", "unknown", "station", "port", "\\N"])
.range(d3.schemeCategory10)
[...new Set(airportExtended.map(d => d.Type))]
rawCovidData = d3.csv("https://covid.ourworldindata.org/data/owid-covid-data.csv")
covidDataDates = [...new Set(rawCovidData.map(d => d.date))].sort(d3.descending)
latestCovidDataDate = covidDataDates[0]
currentData = rawCovidData.filter(d => d.date == latestCovidDataDate)
currentDataGroupedByLocation = d3.group(currentData, d => d.location)
currentDataGroupedByISO = d3.group(currentData, d => d.iso_code)
US_Covid_data_by_USPS = d3.group(US_Covid_data, d => d.state)
flightpath = d3.csv(
"https://raw.githubusercontent.com/plotly/datasets/master/2011_february_aa_flight_paths.csv",
d3.autoType
)
md`### GeoJson Data`
countryData = d3.json(
"https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_land.geojson"
) // Data source: http://geojson.xyz/
Object.keys(countryDataDetailed.features[0].properties).filter(
d => typeof countryDataDetailed.features[0].properties[d] == "number"
)
countryDataDetailed = d3.json(
"https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson"
)
USstatesJsonRaw = (await soFetch(
"https://eric.clst.org/assets/wiki/uploads/Stuff/gz_2010_us_040_00_500k.json"
)).json()
USstatesJson = ({
type: "FeatureCollection",
features: USstatesJsonRaw.features.map(d => {
const stateCodeArray = USstateCodeGroupedByST.get(d.properties.STATE);
if (stateCodeArray) {
const usps = stateCodeArray[0].USPS;
const data = US_Covid_data_by_USPS.get(usps);
d.properties.death = data && data[0].death ? data[0].death : 0;
d.properties.population = +USstatePopulationEstimateGroupedByStateCode.get(
d.properties.STATE
)[0].POPESTIMATE2020;
} else d.properties.death = 0;
return d;
})
})
US_Covid_data
USstateCode = (await d3.csv(
"https://gist.githubusercontent.com/dantonnoriega/bf1acd2290e15b91e6710b6fd3be0a53/raw/11d15233327c8080c9646c7e1f23052659db251d/us-state-ansi-fips.csv"
)).map(d => ({
NAME: d.stname,
STATE: d[" st"].trim(),
USPS: d[" stusps"].trim()
}))
USstatePopulationEstimateGroupedByStateCode = d3.group(
USstatePopulationEstimate,
d => d.STATE
)
USstatePopulationEstimate = d3.csvParse(
await (await soFetch(
"https://www2.census.gov/programs-surveys/popest/datasets/2010-2020/national/totals/sc-est2020-18+pop-res.csv"
)).text()
)
USstateCodeGroupedByST = d3.group(USstateCode, d => d.STATE)
Object.keys(USstateCode[0])
//files = Promise.all( Array.from(unzippedFiles.keys()).map(d => unzippedFiles.get(d)))
//unzippedFiles = zipreader( await fetch("https://datahub.io/core/geo-countries/r/geo-countries_zip.zip"))
US_state_Json_Data = JSON.parse(US_state_files[0])
US_state_files = Promise.all(
Array.from(unzippedUSstateFiles.keys()).map(d => unzippedUSstateFiles.get(d))
)
Promise.resolve(unzippedUSstateFiles.get("states.geojson"))
md`### External Libraries and Imports`
import { columns } from "@bcardiff/observable-columns"
import { radio, select, slider, button, checkbox } from "@jashkenas/inputs"
import { geoAlbersUsaPr } from "@jake-low/u-s-map-with-puerto-rico"
import { zip, zipreader } from "@fil/jszip"
import { soFetch } from '@alecglassford/so-fetch'
import { Table } from "@observablehq/table"
import { legend } from "@d3/color-legend"
d3 = require("d3@6", "d3-geo-projection@3")
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.
