Published
Edited
Nov 6, 2021
13 forks
Importers
135 stars
Interactive BCG Matrix Component🔮Bubble Matrix🔮 ComponentWhat story do two decades of weather data tell you?Funnel Chart3D Clustered ChartTime PlotPerformance ChartTurning prototypes into DataViz components using ObservableGrid Cartogram component with live COVID demos (plus a MapEditor)SVG DataGrid with many features and a live COVID Dashboard demoWest Coast weather from Seattle to San DiegoSunny day, rainy day in SeattleHierarchical Heatmap (update - now works well with larger dataset)
Time Spiral with a COVID Demo
chart2 = {
const svg = d3.create("svg")
.attr("width", diameter)
.attr("viewBox", [0, 0, diameter, diameter])
.style("max-width", "100%")
.style("cursor", "default");
// TimeSpiral needs getBBox()
document.body.append(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();
svg.node().remove();
return svg.node();
}
chart3 = {
const svg = d3.create("svg")
.attr("width", diameter)
.attr("viewBox", [0, 0, diameter, diameter])
.style("max-width", "100%")
.style("cursor", "default");
// TimeSpiral needs getBBox()
document.body.append(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();
svg.node().remove();
return svg.node();
}
chart4 = {
const svg = d3.create("svg")
.attr("width", diameter)
.attr("viewBox", [0, 0, diameter, diameter])
.style("max-width", "100%")
.style("cursor", "default");
// TimeSpiral needs getBBox()
document.body.append(svg.node());
const chart = new TimeSpiral(svg)
.size([diameter, diameter])
.layers(4)
.style({
align: "base",
colorBy: "time",
tickInterval: "auto",
titleFormat: "$,.2f"
})
.palette(d3.schemePaired)
.field({value:"value"})
.data(sample)
.render();
svg.node().remove();
return svg.node();
}
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.
