Public
Edited
Mar 5, 2024
2 forks
Importers
23 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pie({
data: dataset,
colorScheme: 'schemePastel1'
})
Insert cell
Insert cell
Insert cell
doughnut({
data: dataset,
// color array copied from https://observablehq.com/@makio135/give-me-colors
colorScheme: ["#FE4365", "#FC9D9A", "#F9CDAD", "#C8C8A9", "#83AF9B"]
})
Insert cell
Insert cell
bar({
data: [
{ name: "Category 1", "Dataset 1": 423, "Dataset 2": 0, "Dataset 3": 0 },
{ name: "Category 2", "Dataset 1": 0, "Dataset 2": 350, "Dataset 3": 0 },
{ name: "Category 3", "Dataset 1": 0, "Dataset 2": 0, "Dataset 3": 20 }
],
// color array copied from https://observablehq.com/@makio135/give-me-colors
// patterns by RJ Andrews https://github.com/infowetrust/albumcolors
colorScheme: [patterns[3], "#FC9D9A", "#F9CDAD", "#C8C8A9", "#83AF9B"],
pattern: true
})
Insert cell
doughnut({
data: dataset,
// color array copied from https://observablehq.com/@makio135/give-me-colors
// patterns by RJ Andrews https://github.com/infowetrust/albumcolors
colorScheme: [patterns[3], "#FC9D9A", "#F9CDAD", "#C8C8A9", "#83AF9B"],
pattern: true
})
Insert cell
Insert cell
Insert cell
stackedHorizontalBar({
data: datasetBars,
width: width,
height: 150
})
Insert cell
Insert cell
Insert cell
stackedBar({
data: datasetBars,
datasetOptions: {
datalabels: {
anchor(context) {
const value = context.dataset.data[context.dataIndex];
return value > 100 ? 'end' : 'center';
},
align(context) {
const value = context.dataset.data[context.dataIndex];
return value > 100 ? 'start' : 'center';
}
}
},
options: {
plugins: {
datalabels: {
color: 'white',
display: function(context) {
return context.dataset.data[context.dataIndex] > 20;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
}
}
})
Insert cell
Insert cell
verticalBar({
data: datasetBars,
options: {
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: 'Expenditures (€/y)'
}
}
]
}
}
})
Insert cell
Insert cell
filledLine({
data: datasetLines,
colorScheme: ['rgba(255,255,180,0.7)', patterns[8]],
datasetOptions: {
borderColor: '#e0d496',
borderWidth: 5,
pointBackgroundColor: '#fcf281',
pointHitRadius: 25,
pointHoverRadius: 0,
pointRadius: 0
},
options: {
scales: {
xAxes: [
{
gridLines: {
drawOnChartArea: false
}
}
],
yAxes: [
{
gridLines: {
drawOnChartArea: false
}
}
]
}
},
pattern: true
})
Insert cell
Insert cell
pie({
data: [
{ name: 'A', value: 120 },
{ name: 'B', value: 270 },
{ name: 'C', value: 653 }
],
width: 420,
colorScheme: [patterns[10], '#bf9b83', '#386887'],
datasetOptions: {
borderWidth: 3
},
pattern: true,
options: {
zoomOutPercentage: 60,
plugins: {
outlabels: {
text: 'Arc %l\'s value: $%v'
}
}
}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more