Maps, Data, Viz, UX, Design
Published
Edited
Feb 7, 2021
2 forks
19 stars
Carto SQL API (v3)Hello, Carto Maps API (v3)ArcGIS JS API: Custom Elevation Profile Chart% Chance GOP Takes House Seat in November (Diverging Scale)Color Legend ElementInternet Access BeeswarmSWD: Internet Access Choropleth MakeoverThreshold Color ScaleColor Scales: Continuous vs DiscreteData Vis ArticlesCollapsable Gantt ChartU.S. County Population Age DistributionU.S. Hexagon Map SVG with Data JoinedU.S. Coronavirus Cumulative Cases Animated MapVisualizing Racial/Ethnic Disparities in COVID-19 DeathsPopulation Age Distribution by Race/Ethnicity ChartNY Times COVID-19 Cases by Race/EthnicityDate Time HistogramTraffic Violence in NYC: Bikes vs Motor VehiclesZoomable Circle Packing: SVG + CanvasZoomable Circle Packing: CanvasInternet Access and Poverty in U.S. CountiesHeatmap of Persons Injured by Vehicle Collisions in New York CityBar Chart WaveUsing the ForceCircle Packing: Grouped, descendantsCircle Packing: BasicCircle Packing: GroupedStacked Area ChartMapD Connector
General Update Pattern in Observable
beeswarm = {
let el = this
const t = d3.transition().duration(2000)
if (!el) {
el = DOM.svg(width, height)
const svg = d3.select(el)
el.g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
el.g.append("g")
.classed("axis axis--x", true)
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
.call(xAxis)
el.g.append("g")
.classed("circles", true)
// create an empty selection from data binding
el.circles = el.g.select("g.circles")
.selectAll("circle")
.data(simulation.nodes(), d => d.id)
// render the circles
el.circles.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 3)
.attr("fill", d => color(d.value))
.attr("stroke", "#e2e2e2")
.attr("stroke-width", 0.7)
} else {
el.g.select("g.axis.axis--x")
.transition(t)
.call(xAxis)
// bind new data to existing circles, store selection in a local variable
const update = d3.select(el)
.selectAll("circle")
.data(simulation.nodes(), d => d.id)
// update existing circles position and fill color
update
.transition(t)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("fill", d => color(d.value))
// set the notebook cell `circles` property to the updated selection
el.circles = update
}
return el
}
simulation = {
const simulation = d3.forceSimulation(lq_change)
.force("x", d3.forceX(d => xScale(d.value)).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(4))
.stop()
for (let i = 0; i < 120; ++i) {
simulation.tick();
}
return simulation
}
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.
