Published
Edited
Oct 12, 2022
1 fork
Importers
1 star
Insert cell
Insert cell
// use a cell reference so observable waits for the dom before render
svgCell = { return html`
<svg width="900" height="200">
<g class="cl" transform="translate(10, 10)"></g>
<g class="cl-2" transform="translate(300, 0)"></g>
<g class="cl-3" transform="translate(600, 0)"></g>
</svg>
`}
Insert cell
circleLegend([8, 34, 89], { // pass in array of values (e.g. min,mean/median & max)
// overide defaults
circleColor: 'tomato',
textColor: 'tomato',
svg: d3.select(svgCell).select('g.cl'),
})

Insert cell
circleLegend([25, 50, 75], {
// overide defaults
circleColor: '#19cc33',
textColor: '#19cc33',
fontSize: 11,
svg: d3.select(svgCell).select('g.cl-2'),
})
Insert cell
circleLegend([50, 600, 900], {
// overide defaults
circleColor: '#3400a3',
textColor: '#3400a3',
domain: [0, 1000],
textPadding: 45,
svg: d3.select(svgCell).select('g.cl-3'),
})
Insert cell
Insert cell
Insert cell
<hr>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<style>
text {
font-family:'Space Mono',monospace;
}
</style>

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