The end-to-end solution for building and hosting better data apps, dashboards, and reports.
mySVG = html`<div style="width:${width}px; height:${height+50}px">
<div id="legend"></div>
<svg width=${width} height=${height}>
<circle r=50 cx=100 cy=100 fill="seagreen"></circle>
<g id="xAxis" transform="translate(0,${height-20})"></g>
<g id="yAxis" transform="translate(25,0)"></g>
</svg>
</div>`
render(mySVG)
xProperty = 'flipper_length_mm'
yProperty = 'bill_length_mm'
function render(div) {
// draw on the SVG with D3
const selection = d3.select(div).select('svg');
const xExtent = d3.extent(penguins, d => d[xProperty]);
const x = d3.scaleLinear().domain(xExtent).range([30,width-30]);
const xAxis = d3.axisBottom(x);
selection.select("#xAxis")
.call(xAxis);
const yExtent = d3.extent(penguins, d => d[yProperty]);
const y = d3.scaleLinear().domain(yExtent).range([30,height-30]);
const yAxis = d3.axisLeft(y);
selection.select("#yAxis")
.call(yAxis);
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
selection.selectAll('circle')
.data(penguins.filter(d => d[xProperty] !== "NA"))
.join('circle')
.attr('r', 15)
.style('opacity', 0.2)
.style('fill', d => colorScale(d.species))
.transition()
.duration(3000)
.attr('cx', d => x(d[xProperty]) )
.attr('cy', d => y(d[yProperty]) );
const legend = swatches({color: colorScale});
d3.select(div).select("#legend")
.append(() => legend);
}
height = 500
penguins
import {penguins} from "@enjalot/palmer-penguins"
import {swatches} from "@d3/color-legend"
d3 = require('d3')
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.
