The avatar for @inanimated
inanimatedObjects
animating the inanimate
Public
Edited
Mar 27
Fork of Exportable Gauge
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
{

let chart = GaugeChart();

chart.setProperties({
rotation: rotation,
thickness: thickness,
arc: arc,
ticks: ticks,
color_scheme: color_scheme,
color_step: color_step,
tick_color: "#FFF",
needle_color: "#BB345B"
});

chart.setPercentage(percentage);

var svg = chart.draw();
yield svg.node();
// Resize height of SVG automatically - not strictly necessary.
var gauge_element = document.querySelector('.gauge-container'),
gauge_object = svg.select('.gauge-container'),
props = chart.getProperties(),
size = autoHeight(gauge_element);
svg.attr("viewBox", [0, 0, chart.getProperties().width, size.h + 2 * props.margin]);
gauge_object.attr("transform", `translate(${props.width / 2}, ${-size.y + props.margin})`);
}
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