Public
Edited
Dec 12, 2024
1 fork
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
chart = {
const width = 900,//pixel size of the map
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width-50, height-10]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], bboxNol);//out bounding box is here
var path = 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 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")
var l = svg.selectAll("line")
//static lines from qgis
//staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path, hexagon_nol_merge7.features,"rgb(250,250,250)",'.25','.1',"rgb(250,250,250)")
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", fillcolor)
.style('stroke-opacity',"blue")
.style("stroke-width", "1")
.style("stroke", stroke)
}
function fillcolor(d){
var color = 'rgb(100,100,100)'
if(category=="Redlining Grade"){
if(d.properties.properties.grade == "A"){color = "rgb(102,153,0)"}
if(d.properties.properties.grade == "B"){color = "rgb(181,228,88)"}
if(d.properties.properties.grade == "C"){color = "rgb(249,246,68)"}
if(d.properties.properties.grade == "D"){color = "rgb(244,52,42)"}
}
if(category=="Asthma Index"){
if(d.properties.properties.grade == "A"){color = "rgb(102,153,0)"}
if(d.properties.properties.grade == "B"){color = "rgb(181,228,88)"}
if(d.properties.properties.grade == "C"){color = "rgb(249,246,68)"}
if(d.properties.properties.grade == "D"){color = "rgb(244,52,42)"}
}
return color
}
return svg.node();
}
viewof category = Inputs.radio(["Redlining Grade", "Asthma Index", "Air Quality Index", "Tree Coverage" ], {label: "Category",value:"Asthma Index"})
hexagon_nol_merge7 = FileAttachment("hexagon_nol_merge7.geojson").json()
hexagon_nol_merge6 = FileAttachment("hexagon_nol_merge6.geojson").json()
bboxNol = FileAttachment("bbox nol.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.
