Published
Edited
Oct 6, 2021
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]).style("border","1px solid black");

const gx = svg.append("g").call(xAxis, x);

const gy = svg.append("g").call(yAxis, y);

const gc = svg.append("g");
const circles = gc.selectAll('circle').data(data).join('circle')
.style('fill', 'steelblue')
.attr("cx", d => x(d.Longitude))
.attr("cy", d => y(d.Latitude))
.attr("r", 3);

//setupBrush(svg, circles, gx, gy);
//setupZoom(svg, circles, gx, gy);
//setupZoom2(svg, circles, gc, gx, gy);

//svg.node().update = function(xz, yz) {
// update the plot, given new x & y scales
// circles.attr("cx", d => xz(d.Longitude))
// .attr("cy", d => yz(d.Latitude));
// gx.call(xAxis, xz);
// gy.call(yAxis, yz);
//}
return svg.node();
}
Insert cell
Insert cell
[x.domain(), x.range()] // view the x domain extent in Longitude, and range extent in pixels
Insert cell
x = d3.scaleLinear()
.domain(d3.extent(data, r=>r.Longitude))
//.domain([-90,-70])
.range([margin.left, width - margin.right])
//.range([-900, 950])
Insert cell
y = d3.scaleLinear()
.domain(d3.extent(data, r=>r.Latitude))
.range([height - margin.bottom, margin.top])
Insert cell
Insert cell
function setupBrush(svg, circles, gx, gy) {
const brush = d3.brush().on("end", brushing); // Only zoom on 'end'
const gb = svg.append("g").call(brush);
var xz = x.copy();
var yz = y.copy();

function brushing(event) {
if (event.selection) {
const [[x0, y0], [x1, y1]] = mutable brushCoords = event.selection; // Get brush pixel coordinates
// Brush zoom here...

gb.call(brush.clear); // remove the brush
}
}
}
Insert cell
mutable brushCoords = null
Insert cell
Insert cell
function setupZoom(svg, circles, gx, gy) {
// D3 Zoom API:
const extent = [[margin.left, margin.top], [width - margin.right, height - margin.bottom]];
const zoom = d3.zoom()
.extent(extent) // Where the interaction occurs
.translateExtent(extent) // Limits panning to the original extent
.scaleExtent([1, 32]) // Sets the maximum zoom factor
.on("zoom", zooming);
svg.call(zoom);
function zooming(event) {
mutable transform = event.transform;
// Do zooming here, event.transform expresses the pan+zoom from original x & y scales

}
}
Insert cell
mutable transform = null
// k = scale; x,y = translate
// zooming is exponential, double click changes scale by factor of 2
Insert cell
transform
Insert cell
Insert cell
function setupZoom2(svg, circles, gc, gx, gy) {
// D3 Zoom API:
const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];
const zoom = d3.zoom()
.extent(extent) // Where the interaction occurs
.translateExtent(extent) // Limits panning to the original extent
.scaleExtent([1, 32]) // Sets the maximum zoom factor
.on("zoom", zooming);
svg.call(zoom);
function zooming(event) {
mutable transform = event.transform;
// Do zooming here, event.transform expresses the pan+zoom from original x & y scales
// Geometric zoom:
//gc.attr('transform', event.transform);
// Spatial "semantic" zoom:


}
}
Insert cell
Insert cell
// zoom slider
viewof zoom = html`<input type="range" min=1 max=32 value=1 step=0.1>`
// need an exponential slider!
Insert cell
zoom
Insert cell
{
var t = d3.zoomIdentity.translate(width/2, height/2).scale(zoom).translate(-width/2, -height/2);
const xz = t.rescaleX(x); // Apply zoom to x scale
const yz = t.rescaleY(y); // Apply zoom to y scale
chart.update(xz,yz);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more