Public
Edited
Aug 1, 2023
24 forks
Importers
41 stars
Topographic MappingBubble mapChoroplethAccess to Family planningMD Counties Total Cases MapTendance de la production des déchets en Union EuropéenneAndy's Walgreens COVID-19 Tracker TrackerElection Maps for Incomplete ResultsA better U.S. house election results map?1983 Mayoral Election, Dot density mapsMastodon 🐘Cheat sheet bertinBertin.js: regular squaresWaterlinesNeumorphism Contour Density MapCartographic DoodlesStars and constellationsPlot: Grid choroplethHello Polygon MorphingMapping with pie chartsU.S. Geographic DataHow big are countries... like really!AttitudeB&W ChoroplethWeb Mercator Tile VisibilityMARTINI: Real-Time RTIN Terrain Mesh"Magnifying-Glass" projectionsTissot's indicatrixAntipodal mapMapping gridded data with a Voronoi diagramA Map of Every BuildingUrbano Monti’s Planisphere (1587)Bivariate choroplethDIY HillshadeMapbox Map MakerWorld tourHillshaderSimplified Earth with curved shapesHexbin mapInner glowNicolosi vs. StereographicData-driven projections: Darwin's worldSatellite ground track visualizerDirection to shoreHello, OpenLayers!Hello, NYC Geosearch API!Mapbox Fly-ToSpilhaus shoreline mapWalmart’s growthHow well does population density predict U.S. voting outcomes?Drawing maps from geodata with D3 & ObservableHexgrid maps with d3-hexgridTissot's indicatrixWorld airports VoronoiSwiss Elevation Line GraphsVector tilesVersor draggingOrthographicSolar TerminatorStreaming ShapefilesFake GlobesPeirce Quincuncial🍃 LeafletU.S.G.S. World Earthquake MapUsing Mapbox GL JSUsing Google Maps
U.S. airports Voronoi
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610])
.attr("width", 975)
.attr("height", 610)
.attr("style", "max-width: 100%; height: auto;");
svg.append("path")
.datum(topojson.merge(us, us.objects.states.geometries.filter(d => d.id !== "02" && d.id !== "15")))
.attr("fill", "#ddd")
.attr("d", d3.geoPath());
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath());
svg.append("g")
.attr("fill", "none")
.attr("stroke", "red")
.attr("pointer-events", "all")
.selectAll("path")
.data(d3.geoVoronoi().polygons(data).features)
.join("path")
.attr("d", d3.geoPath(projection))
.append("title")
.text(d => {
const p = d.properties.site.properties;
return `${p.name} Airport
${p.city}, ${p.state}`;
});
svg.append("path")
.datum({type: "FeatureCollection", features: data})
.attr("d", d3.geoPath(projection).pointRadius(1.5));
return svg.node();
}
data = FileAttachment("airports.csv").csv({ typed: true })
.then((data) =>
data.map((d) => ({
type: "Feature",
properties: d,
geometry: {
type: "Point",
coordinates: [+d.longitude, +d.latitude]
}
}))
)
projection = d3.geoAlbers().scale(1300).translate([487.5, 305])
us = FileAttachment("states-albers-10m.json").json()
d3 = require.alias({"d3-array": "d3@7", "d3-delaunay": "d3@7", "d3-geo": "d3@7"})("d3@7", "d3-geo-voronoi@2")
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.
