chart = {
const figure = html`<div style="height: 500px;">`;
Highcharts.chart(figure, {
chart: {
type: "dumbbell",
inverted: true
},
legend: {
enabled: false
},
subtitle: {
text: "1960 vs 2018"
},
title: {
text: "Change in Life Expectancy"
},
tooltip: {
shared: true
},
xAxis: {
type: "category"
},
yAxis: {
title: {
text: "Life Expectancy (years)"
}
},
series: [{
name: "Life expectancy change",
data
}]
});
return figure;
}
data = d3.csvParse(await FileAttachment("countries.csv").text(), d3.autoType)
Highcharts = {
// https://www.highcharts.com/docs/chart-and-series-types/dumbbell-series
const Highcharts = await require("highcharts");
await require("highcharts/highcharts-more.js");
await require("highcharts/modules/dumbbell.js");
return Highcharts;
}
d3 = require("d3-dsv@1")
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.
