Public
Edited
Mar 26, 2024
import {topojson} from "https://d3js.org/topojson.v3.min.js";
{
const svg = d3.create("svg")
.attr("viewBox", "0 0 975 610");
const g = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
g.append("path")
.attr("stroke-width", "0.5")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));
g.append("path")
.attr("d", path(topojson.feature(us, us.objects.nation)));
// Define the map projection
const projection = d3.geoAlbersUsa()
.scale(1300)
.translate([487.5, 305]);
// Sample data points
const points = [
{lat: 37.7749, lon: -122.4194}, // San Francisco
{lat: 40.7128, lon: -74.0060}, // New York
// Add more points as needed
];
// Convert lat/lon to x/y and add circles for each point
svg.selectAll(".dot")
.data(points)
.enter().append("circle")
.attr("class", "dot")
.attr("transform", d => {
const [x, y] = projection([d.lon, d.lat]);
return `translate(${x}, ${y})`;
})
.attr("r", 5)
.attr("fill", "blue");
// Implement brushing (Assuming we have a brushed function ready to use)
const brush = d3.brush().on("brush end", brushed);
svg.append("g")
.attr("class", "brush")
.call(brush);
function brushed({selection}) {
if (selection) {
const [[x0, y0], [x1, y1]] = selection;
svg.selectAll('circle')
.classed("selected", d => {
const [x, y] = projection([d.lon, d.lat]);
return x0 <= x && x <= x1 && y0 <= y && y <= y1;
});
} else {
svg.selectAll('circle').classed("selected", false);
}
}
;
// Define zoom behavior
const zoom = d3.zoom()
.scaleExtent([1, 8]) // This defines the scale range for zooming (min, max)
.on("zoom", (event) => {
g.attr("transform", event.transform); // Apply transformation to the group elements like paths
// Recalculate and update positions of the points based on the current zoom level
svg.selectAll(".dot").attr("transform", d => {
const [x, y] = projection([d.lon, d.lat]);
// Apply the current zoom transformation to the points
const transformedX = x * event.transform.k + event.transform.x;
const transformedY = y * event.transform.k + event.transform.y;
return `translate(${transformedX}, ${transformedY})`;
}).attr("r", 5 ); // Optionally adjust the radius based on zoom level to keep the visual size consistent
});
// Apply the zoom behavior to the SVG
svg.call(zoom);
// Optional: disable double-click zoom
// svg.on("dblclick.zoom", null);
// Return the SVG element to render it
return svg.node();}
embed = require('vega-embed@6')
path = d3.geoPath()
us = FileAttachment("counties-albers-10m.json").json()
usCounties10m = FileAttachment("us-counties-10m.json").json()
import {vl} from '@vega/vega-lite-api'
d3 = require("d3")
vl.markArea()
.data()
.encode()
.width(300)
.height(200)
"data": {"url": "data/unemployment-across-industries.json"},
"encoding": {
"x": {
"timeUnit": "yearmonth", "field": "date",
"axis": {"domain": false, "format": "%Y", "tickSize": 0}
},
"y": {
"aggregate": "sum", "field": "count",
"axis": null,
"stack": "center"
},
"color": {"field":"series", "scale":{"scheme": "category20b"}}}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.