Public
Edited
Nov 20, 2024
2 forks
1 star
chart = {
const width = 900,//pixel size of the map
height = 1200;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], qgisBorder);
var path1 = d3.geoPath().projection(projection);//need one of these for each line layer from qgis
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 g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type
var c = svg.selectAll("circle")//for circles
var p = svg.selectAll("polyline")//for polylines from rhino
var t = svg.selectAll("text")
//static lines from qgis
staticLines(path1, qgisBorder.features,"none",'1','1',"rgb(0,0,0)")
staticLines(path2, manhattanDistrictOutlines.features,"none",'1','5.',"rgb(0,0,0)")
staticLines(path3, buildingFootprints.features,"none",'1','.35',"black")
staticLines(path4, roadCenterlines.features,"none",'.5','.125',"black")
staticLines(path5, manhattanOutline.features,"none",'1','.125',"black")
staticLines(path7, qgistoobservable.features,"none",'1','.2',"black")
function staticLines(path, data, sfill, sOpac, sW, stroke){
g.enter().append("path")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
g.enter().append("path")
.data(buildingFootprints.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path7) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", fillColor)
.style('stroke-opacity','1')
.style("stroke-width",'0')
.style("stroke", 'none')
function fillColor(d, i) {
var year = 2024 - d.properties.cnstrct_yr;
// Scale and exaggerate the year for variation
year = Math.min(255, Math.max(0, Math.pow(year, 1.2)));
var scaledYear = year % 255;
var red = Math.min(180, scaledYear * 0.6);
var green = Math.min(180, scaledYear * 0.3);
var blue = Math.min(255, scaledYear * 1.2);
var color = `rgb(${red},${green},${blue})`;
console.log(color);
return color;
}
return svg.node();
}
qgisBorder = FileAttachment("QGIS Border.geojson").json()
qgistoobservable = FileAttachment("QGIStoOBSERVABLE2.geojson").json()
buildingFootprints = FileAttachment("Building Footprints.geojson").json()
manhattanDistrictOutlines = FileAttachment("Manhattan District Outlines.geojson").json()
manhattanOutline = FileAttachment("Manhattan Outline.geojson").json()
roadCenterlines = FileAttachment("Road Centerlines.geojson").json()
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.
