chart = {
const width = 900,//pixel size of the map
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], newQgisBorder);
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','.25',"black")
staticLines(path3, buildingFootprints.features,"none",'1','.75',"black")
staticLines(path4, roadCenterlines.features,"none",'.5','.5',"black")
staticLines(path5, manhattanOutline.features,"none",'1','.5',"black")
staticLines(path7, qgistoobservable.features,"none",'1','.5',"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() // Select extra data elements
.append("path") // Append path to data
.attr('class', 'outlines')
.attr("d", path7) // The d attribute defines a path to be drawn
.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;
// Emphasize cyan (low red, high green and blue)
var red = Math.min(50, scaledYear * 0.2); // Low red for cyan emphasis
var green = Math.min(255, scaledYear * 0.8); // Higher green
var blue = Math.min(255, scaledYear * 1.2); // Higher blue
var color = `rgb(${red},${green},${blue})`;
console.log(color);
return color;
}
//lines from rhino
//polyline(testBorderFill,'white','1','.25','white')
//polyline(testBorderDetailing,'black','1','.25','black')
polyline(testBorder,'white','1','2','white')
polyline(legendLinesM,'none','1','.5','black')
polyline(legendTextM,'black','1','.5','black')
function polyline(data, sfill, sOpac, sW, stroke){
g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d}) //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)
}
return svg.node();
}
newQgisBorder = FileAttachment("New QGIS Border.geojson").json()
legendLinesM = FileAttachment("Legend Lines M.txt").tsv({array:true})
legendTextM = FileAttachment("Legend Text M.txt").tsv({array:true})
testBorderDetailing = FileAttachment("Test Border Detailing.txt").tsv({array:true})
testBorderFill = FileAttachment("Test Border Fill.txt").tsv({array:true})
testBorder = FileAttachment("Test Border@7.txt").tsv({array:true})
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.
