frontend + d3
Published
Edited
Jan 13, 2020
md`# observing trigonometry`
Math.cos(value);
Math.sin(value);
Math.tan(value);
{
const width = 800;
const height = 800;
const svg = d3.create('svg');
svg.attr('width', width).attr('height', height);
const margin = 100;
const realWidth = width - margin * 2;
const realHeight = height - margin * 2;
const stage = svg
.append('g')
.attr('transform', `translate(${margin},${margin})`);
const xScale = d3
.scaleLinear()
.domain([0, value * multiplier])
.range([0, realWidth]);
const values = dataset.map(d => d[1]);
const yMin = Math.min(...values);
const yMax = Math.max(...values);
const yScale = d3
.scaleLinear()
.domain([yMin, yMax])
.range([realHeight, 0]);
const lineCreator = d3
.line()
.x((d, i, e) => xScale(d[0]))
.y((d, i, e) => yScale(d[1]))
.curve(d3.curveCardinal);
const line = stage.append('path');
// datum should be attached to object, not svg. as it can only represent single data.
line
.datum(dataset)
.attr('d', lineCreator)
.attr('stroke', 'black')
.attr('stroke-width', 0.5)
.attr('fill', 'transparent');
const points = stage
.selectAll('.point')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d => xScale(d[0]))
.attr('cy', d => yScale(d[1]))
.attr('r', 1)
.attr('fill', 'gray');
const delaunay = Delaunay.Delaunay.from(
dataset,
d => xScale(d[0]),
d => yScale(d[1])
);
const voronoi = delaunay.voronoi([0, 0, realWidth, realHeight]);
const tooltip = stage.append('g');
const tooltipPoint = tooltip.append('circle');
tooltipPoint
.attr('cx', 0)
.attr('cy', 0)
.attr('r', 3)
.attr('fill', 'black');
const tooltipText = tooltip.append('text');
const voronoiVisible = false;
const onMouseOver = (d, i, e) => {
tooltip.attr('transform', `translate(${xScale(d[0])},${yScale(d[1])})`);
tooltipText.text(`input: ${d[0]} = ${d[1].toString().slice(0, 7)}`);
console.log(d);
};
const voronoiPath = stage
.append('g')
.selectAll('voronoi-path')
.data(dataset)
.join('path')
.attr('d', (d, i) => voronoi.renderCell(i))
.classed('voronoi-path', true)
.attr('stroke-width', 1.0)
.attr('stroke', voronoiVisible ? 'pink' : 'transparent')
.attr('fill', 'transparent')
.on('mouseover', onMouseOver);
return svg.node();
}
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.
