d3 = require("d3@6")
viewof buttons = Inputs.button([
["+"],
["-"],
["Reset"]
], {label: "Zoom Effects"})
chart = {
const width = 1300,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [25, 25, width-100, height-90]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 10, height - 40], DCbb);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var path5 = d3.geoPath().projection(projection);
var path6 = d3.geoPath().projection(projection);
var path7 = d3.geoPath().projection(projection);
var path8 = d3.geoPath().projection(projection);
var path9 = d3.geoPath().projection(projection);
var path10 = d3.geoPath().projection(projection);
var path11 = d3.geoPath().projection(projection);
var path12 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path9") //d3 geopath
.data(DMV_stateboundaries.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','static')
.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style("stroke", "rgb(0,0,0)")
.style('stroke-opacity','.05')
.style("stroke-width", '3')
const zoom = d3.zoom()
.scaleExtent([.5, 9])
.translateExtent([[-(2 * width), -(.5 * height)], [2 * width, 1.5 * height]])
.on("zoom", zoomed);
svg.call(zoom);
document.querySelectorAll("button")
.forEach(function(btn) {
btn.addEventListener("click", selectZoom);
});
function selectZoom(e){
var text = e.target.textContent
if (text === "+") {
zoom.scaleBy(svg, 2);
} else if (text === "-"){
zoom.scaleBy(svg, .5);
} else{
svg.transition()
.duration(1000)
.call(zoom.transform, d3.zoomIdentity);
}
}
function zoomed(event) {
const {transform} = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
return svg.node();
}
mapRegions = [
{ region: 'boundingbox_DC',
bounds: [[-77.595155, 39.195340], [-76.780821, 38.703513]],
},
{ region: 'boundingbox_MALL',
bounds: [[-77.059341, 38.867852], [-76.980985, 38.907220]],
}
]
mapOptions = () => {
const buttons = html`
<form>
<input value="Full metro system" type="button" name="zoomOUT">
<input value="Zoom in to National Mall" type="button" name="zoomIN">
</form>
`
buttons.value = true
buttons.zoomOUT.onclick = event => {
buttons.value = true;
event.preventDefault(); // Don’t submit the form.
buttons.dispatchEvent(new CustomEvent("input"));
}
buttons.zoomIN.onclick = event => {
buttons.value = false;
event.preventDefault(); // Don’t submit the form.
buttons.dispatchEvent(new CustomEvent("input"));
}
return buttons
}
width_a = width
height = width_a / 2;
DCbb = FileAttachment("DC_BB.geojson").json()
DCinset = FileAttachment("DC_BB_inset.geojson").json()
DMV_stateboundaries = FileAttachment("DMV_stateboundaries.geojson").json()
DCstationsGROWTH = FileAttachment("DCnewlines5.csv").csv()
DClines = FileAttachment("DClinesFUTURE_5.geojson").json()
lines1976 = FileAttachment("1976lines_V2.geojson").json()
lines1978 = FileAttachment("1978lines_V2.geojson").json()
lines1983 = FileAttachment("1983lines_V2.geojson").json()
lines1991 = FileAttachment("1991lines_V2.geojson").json()
lines2004 = FileAttachment("2004lines_V2.geojson").json()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
chronology = ['Current','1976','1978','1983','1991','2004','2022','2026','2028','2030']
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.
