roundBarGauge(scores, "Language Test Scores").draw()
roundBarGauge(lots_of_scores, "Various Test Scores").draw()
{
var chart = roundBarGauge(scores, "Language Test Scores");
chart.setProperties('container', { rounding : 0 })
// Taller, squarer, more spaced out bars.
chart.setProperties('bar', {
height: 80,
spacing: 2,
rounding: 0,
centered: true
});
// Set my colors via a scheme.
var color = d3.schemePurples[9];
chart.setProperties('color', {
container: color[8],
title: color[1],
bar_value: color[2],
bar_total: color[6],
bar_value_text: color[8],
bar_total_text: color[1]
});
return chart.draw();
}
{
var scores_sorted = lots_of_scores.slice(0).sort((a, b) => d3.descending(a.value/a.total, b.value/b.total)),
chart = roundBarGauge(scores_sorted); // No title
// Hide container
chart.setProperties('container', { draw: false });
// Taller, squarer, less spaced out bars.
chart.setProperties('bar', {
height: 35,
spacing: 2,
rounding: 8,
percent: true
});
// Set my colors via a scheme.
var color = d3.schemeBlues[9];
chart.setProperties('color', {
container: color[0],
title: color[2],
bar_value: color[8],
bar_total: "rgba(0,0,0,0)", // transparent!
bar_value_text: color[1]
});
// Hide some labels
chart.setProperties('label', {
total: false
});
return chart.draw();
}
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.
