data = await FileAttachment("response@4.json").json()
datagroup = d3.group(data,data => data.date.slice(0,4))
url = "http://localhost:3000/person"
data2 = fetch(url).then(res => res.json())
subgroups = Object.keys(data2[0]).slice(1)
groups = data2.map(d => d.date)
max = d3.max([0,1])
color = d3.scaleOrdinal()
.domain(subgroups)
.range(['#802bbe','#3c6fbc','#611eb2'])
xSubgroup = d3.scaleBand()
.domain(subgroups)
.range([0, xband.bandwidth()])
.padding([0.05])
xband = d3.scaleBand()
.domain(groups)
.range([75, width - 75])
.padding([0.2])
xAxisband = g => g
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xband).tickSize(0))
.call(g => g.selectAll("text").attr("transform", "translate(-10,-20)"))
.attr("stroke-opacity", 0);
yband = d3.scaleLinear()
.domain([0, 20])
.range([height - margin.bottom, margin.top]);
yAxisband = g => g
.attr("transform", `translate(${60},0)`)
.call(d3.axisLeft(yband).ticks(null, data.format))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll("line").remove());
height = 700
margin = ({top: 30, right: 0, bottom: 40, left: 40})
d3 = require("d3@6")
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.
