Public
Edited
Apr 13, 2023
5 stars
beeswarmSettings = ({
x: (d) => d.x,
y: () => 0,
r: (d) => 5,
gap: 1,
ticks: 2,
//stroke: '#ccc',
strokeWidth: 0.5,
dynamic: true,
title: getTitle
})
plotProps = ({ marginLeft:100, marginRight: 100})
data = FileAttachment("ukr-civharm-2023-04-13.json").json()
marginLeft = 100
parseDate = d3.timeParse('%m/%d/%Y')
getTitle = (d) => `
${d.date}
${d.location}
${d.description}
`;
timeExtent = d3.extent(data, d => parseDate(d.date))
numDays = d3.timeDay.count(timeExtent[0], timeExtent[1])
xScale = d3.scaleTime().domain(timeExtent).range([0, numDays])
pointsData = data.map(d => ({
...d,
x: (parseDate(d.date)),
weaponType: d.filters?.find(f => f.key === 'Weapon System')?.value ?? "Unknown",
areaType: d.filters?.find(f => f.key === 'Type of area affected')?.value ?? "Undefined",
}))
xScale.domain()
weaponTypeColor.domain(weaponTypes)
locations = new Set(pointsData.map(d => d.location))
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {beeswarmX} from "@fil/experimental-plot-beeswarm"
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.
