chartEl2 = {
// Make data - 10,000 random points
const data = d3.range(numPoints).map(_ => { return { x: 2*(Math.random() - .5), y: 2*(Math.random() - .5)}; })
// Make point series _render_
const pointSeries = fc
.seriesWebglPoint()
.size(30)
.crossValue(d => d.x) // X Axis value
.mainValue(d => d.y) // Y Asix value
// Skipped: setting up scales for the chart
const xScale = d3.scaleLinear().domain([-1, 1]);
const yScale = d3.scaleLinear().domain([-1, 1]);
// Plot the chart
const chart = fc
.chartCartesian(xScale, yScale)
.webglPlotArea(
fc
.seriesWebglMulti()
.series([pointSeries])
.mapping(d => d.data)
);
const el = d3.select(DOM.element('div'));
el.style("height", `${height/2}px`);
el.style("width", `${width}px`);
el.datum({ data /*, annotations */ }).call(chart);
// const zoom = d3
// .zoom()
// .scaleExtent([1, 500])
// .translateExtent([[0, 0], [width, height]])
// .on("zoom", ({ transform }) => {
// xScale.domain(transform.rescaleX(xScaleCopy).domain());
// yScale.domain(transform.rescaleY(yScaleCopy).domain());
// el.datum({ data, annotations }).call(chart);
// });
// el.select('d3fc-svg.plot-area')
// .on("measure.range", ({ detail }) => {
// xScaleCopy.range([0, detail.width]);
// yScaleCopy.range([detail.height, 0]);
// })
// .call(zoom)
// .on("dblclick.zoom", e => {
// el.select('d3fc-svg.plot-area')
// .transition()
// .duration(750)
// .call(zoom.transform, d3.zoomIdentity);
// });
return el.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.
