Passionate about viz & systems thinking. Stanford CS 2017
mutable hoveredPoint = null
zoomableScatter(data, 600, 'x')
zoomableScatter = (data, height = 600, colorProperty = null) => {
const xScale = d3
.scaleLinear()
.domain(d3.extent(data, ({ x }) => x))
.range([0, width]);
const yScale = d3
.scaleLinear()
.domain(d3.extent(data, ({ y }) => y))
.range([0, height]);
const colorScale =
colorProperty &&
d3
.scaleLinear()
.domain(d3.extent(data, d => +d[colorProperty]))
.range(['blue', 'red']);
const convertD = ({ x, y }) => [xScale(x), yScale(y)];
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const circle = svg
.selectAll("circle")
.data(data)
.join("circle")
.attr("transform", d => `translate(${convertD(d)})`)
.attr("r", 1.5)
.attr('fill', d => (colorScale ? colorScale(d[colorProperty]) : 'black'))
.on('mouseover', (e, d) => {
mutable hoveredPoint = d;
});
function zoomed({ transform }) {
circle.attr("transform", d => `translate(${transform.apply(convertD(d))})`);
}
svg.call(
d3
.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([1, 8])
.on("zoom", zoomed)
);
return svg.node();
}
data = {
const height = 600
const randomX = d3.randomNormal(width / 2, 80);
const randomY = d3.randomNormal(height / 2, 80);
return Array.from({length: 4000}, () => ({x: randomX(), y: randomY()}));
return Array.from({length: 4000}, () => [randomX(), randomY()]);
}
d3 = require("d3@6")
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.
