Day 21: RasterDay 10: North AmericaDay 30: My favoriteDay 8: AfricaDay 14: EuropeDay 9: HexagonsTurkey vulture migrations in South AmericaDay 18: AtmosphereDay 29: PopulationDay 2: LinesDay 28: Is this a chart or a mapDay 23: 3DDay 11: RetroDay 20: OutdoorsDay 16: OceaniaDay 13: ChoroplethProjection importsDay 6: AsiaDay 7 - NavigationDay 4: Bad mapDay 17: FlowDay 1: Points
Day 3: Polygons
Plot.plot({
height: 600,
insetTop: 90, insetBottom: 60, insetLeft: 20, insetRight: 20,
marginTop: 20,
axis: null,
color: {type: "sequential", legend: true,
range: ["#008080", "#836539"],
label: "Total production of housing by county",
style: {fontSize: 20}, width: 630, ticks: 4},
marks: [
Plot.frame({fill: "black", opacity: 1}),
Plot.hexgrid({fill: "#008080", opacity: .2}),
Plot.hexgrid({fill: "black", opacity: .3, dy: 10}),
Plot.cell(counties.features, {x: d=>d.properties.x, y: d=>d.properties.y, fill: d=>d.properties.totalproduction}),
Plot.hexgrid({fill: "#836539", opacity: .3, dy: 20, stroke: "black"}),
Plot.text(counties.features, {x: d=>d.properties.x, y: d=>d.properties.y, text: d=>d.properties.name, dy: -2, fill: "white", fontSize: 25}),
Plot.text(['New construction'],{x:2, y: 0, dx: -170, dy: -100, fontSize: 48, fill: "#008080", opacity: 1, lineHeight: 1.2, fontWeight: "Bold", lineWidth: 15, textAnchor: "middle"}),
Plot.text(['San\nFrancisco\ncounties'],{x:0, y: 2, dx: 0, dy: 50, fontSize: 35, fill: "#008080", opacity: 1, lineHeight: 1.2, lineWidth: 45, textAnchor: "middle", fontStyle: "italic"}),
Plot.text(['Data: sfgov.org | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:2, y: 3, dx: 70, dy: 80, fontSize: 17, fill: "#008080", opacity: 1, lineHeight: 1.2, lineWidth: 25, textAnchor: "end", fontStyle: "italic"}),
]
})
new_construction_sf.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
new_construction_sf
import {addTooltips} from "@mkfreeman/plot-tooltip"
import {counties} from "ff0a83b495637684"
function mergeData() {
counties.features = counties.features.filter(feature => {
return new_construction_sf_2018.some(row => row.county === feature.properties.name);
});
counties.features = counties.features.map(feature => {
const matchedState = new_construction_sf_2018.find(row => row.county == feature.properties.name);
if (matchedState) {
feature.properties.totalproduction = matchedState.totalproduction;
feature.properties.x = matchedState.x;
feature.properties.y = matchedState.y;
feature.properties.year = matchedState.year;
}
return feature;
});
}
mergeData()
counties
import {Scrubber} from "@mbostock/scrubber"
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.
