chart2 = {
const svg = d3.create("svg")
.attr("width", diameter)
.attr("height", diameter)
.style("cursor", "default");
// TimeSpiral needs getBBox()
yield svg.node();
const chart = new TimeSpiral(svg)
.size([diameter, diameter])
.style({
align: options2.align,
barWidth: options2.barwidth,
rounded: options2.rounded,
colorBy: options2.colorby,
showTicks: options2.showTicks,
tickInterval: "monthly"
})
.layers(+options2.layers)
.palette(options2.colorby === "time" ? d3.schemeTableau10 : d3.interpolateBuPu)
.field({value: `new${options.field}`})
.data(data("New York"))
.render();
return svg.node();
}
chart3 = {
const svg = d3.create("svg")
.attr("width", diameter)
.attr("height", diameter)
.style("cursor", "default");
// TimeSpiral needs getBBox()
yield svg.node();
const data = weather[options3.city].map(d => ({
date: new Date(d["Date time"]),
temp: +d["Temperature"]
}));
const chart = new TimeSpiral(svg)
.size([diameter, diameter])
.layers(3)
.style({
align: options3.align,
reverseColor: true // reverse d3.interpolateRdYlBu
})
.palette(d3.interpolateRdYlBu)
.field({value:"temp"})
.data(data)
.render();
return svg.node();
}
exports = d3.csvParse(await FileAttachment("region_grouped3@1.csv").text()).map(d => ({date: new Date(d.date), value: +d.sum}))
china = d3.csvParse(await FileAttachment("China@1.csv").text()).map(d => ({date: new Date(d.date), value: +d.sum}))
EU = d3.csvParse(await FileAttachment("EU@1.csv").text()).map(d => ({date: new Date(d.date), value: +d.sum}))
US = d3.csvParse(await FileAttachment("US@1.csv").text()).map(d => ({date: new Date(d.date), value: +d.sum}))
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.
