Public
Edited
Aug 1, 2023
24 forks
Importers
41 stars
Spilhaus shoreline mapNew Jersey State PlaneCustom cartesian projectionU.S. state choroplethWorld choroplethSpike mapBubble mapChoroplethRotating orthographicOceansWinding orderOrthographic shadingSolar TerminatorStar mapSolar pathRaster tilesThreshold ChoroplethMapbox Vector TilesRaster Tiles (Canvas)Raster & vector IIClipped map tilesGraticule labels (stereographic)Sketchy EarthCloud ContoursCountries by AreaVector fieldRaster & vectorVector tilesHexbin mapAntimeridian CuttingWorld AirportsWorld Airports DelaunayWorld airports Voronoiprojection.reflectXTesting projection visibilityNon-contiguous cartogramVersor ZoomingThree-Axis RotationContext to CurveOrthographic to equirectangularU.S. Map with Puerto RicoProjection TransitionsZoom to bounding boxZoomable Raster & VectorWorld Map (SVG)Web Mercator tilesU.S. Map (Canvas)Bivariate choroplethTissot’s indicatrixProjection comparisonCassiniWorld tourU.S. State CapitalsWorld map (canvas)U.S. MapConic Equal-AreaTransverse MercatorVersor draggingStereographicGnomonicOrthographicMercatorAzimuthal Equal-AreaAzimuthal EquidistantEquirectangularConic ConformalTobler–MercatorConic EquidistantNatural EarthEqual EarthOrthographic (SVG)Quantile Choropleth
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.
