frontend + d3
Published
Edited
Jun 16, 2020
6 stars
{
const _height = 300;
const viewportWidth = 100;
const viewportHeight = 100;
const scaleX = d3
.scaleLinear()
.domain([0, 1])
.range([0, width]);
const scaleY = d3
.scaleLinear()
.domain([0, 1])
.range([0, _height]);
const scaleAxisX = d3
.scaleLinear()
.domain([0, width])
.range([0, viewportWidth]);
const scaleAxisY = d3
.scaleLinear()
.domain([0, _height])
.range([0, viewportHeight]);
const randomizedData = d3
.range(500)
.map(i => [
scaleX(d3.randomNormal(.5, .1)(i)),
scaleY(d3.randomNormal(.5, .25)(i))
]);
const svg = d3
.create('svg')
.attr('width', viewportWidth)
.attr('height', viewportHeight);
const gX = svg.append('g');
const gY = svg.append('g');
const g = svg.append('g');
g.selectAll('circle')
.data(randomizedData)
.enter()
.append('circle')
.attr('r', 5)
.attr('transform', ([x, y], i, e) => q.trans(x, y))
.attr('fill', 'black')
.attr('opacity', .2)
.on('click', onCircleClick);
const zoom = d3
.zoom()
.extent([[0, 0], [viewportWidth, viewportHeight]]) // viewport
.translateExtent([[0, 0], [width, _height]])
.on('zoom', onZoom); // world
gX.call(d3.axisBottom(scaleAxisX).ticks(3));
gY.call(d3.axisRight(scaleAxisY).ticks(3));
svg.call(zoom);
zoom.translateTo(svg, 50, 50);
function onCircleClick(d, i, e) {
svg.select('circle[fill="red"]').attr('fill', 'gray');
d3.select(this).attr('fill', 'red');
const [x, y] = d;
console.log({ x, y });
zoom.translateTo(svg.transition(), x, y);
}
function onZoom() {
const t = d3.event.transform;
g.attr('transform', q.trans(t.x, t.y, t.k));
scaleAxisX.domain([t.invertX(0), t.invertX(viewportWidth)]);
scaleAxisY.domain([t.invertY(0), t.invertY(viewportHeight)]);
gX.call(d3.axisBottom(scaleAxisX).ticks(3));
gY.call(d3.axisRight(scaleAxisY).ticks(3));
console.log(q.trans(t.x, t.y, t.k), t.invertX(0), t.invertX(viewportWidth));
}
zoom.translateTo(svg.transition(), width / 2, _height / 2);
return svg.node();
}
q = require('d3-quicktool')
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.
