Public
Edited
Dec 16, 2024
Fork of Miami
Insert cell
Insert cell
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
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], bboxMiami);//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")

//rhino displays
function polyline(data, sfill, sOpac, sW, stroke,classVar){

g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class',classVar)
.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", sfill)
.style("fill-opacity", .5)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
.on("mouseover", addText)
.on("mouseout", removeText)
function addText(event,d){

svg//draw text
.append("text") //appends path to data
.attr('class','dText')
.attr('x', projection([d.Longitude,d.Lattitude])[0]-5)
.attr("y", projection([d.Longitude,d.Lattitude])[1]+10)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "11px")
.text(d.AF_PFS)
}
function removeText(){
svg.selectAll('text.mText').remove()
}
return svg.node();
}

//staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path, hexagonMiamiMerge.features,"rgb(250,250,250)",'.25','.1',"rgb(250,250,250)")

//lines from rhino
polyline(miaminame2,'black','1','0','none','angles')
polyline(island,'red','1','0','none','angles')
polyline(core2,'red','1','0','none','angles')
polyline(lowriskmiami1,'green','1','0','none','angles')
polyline(medriskmiami,'yellow','1','0','none','angles')

polyline(ai1m,'rgb(50,0,0)','1','0','none','angles')
polyline(ai2m,'rgb(100,0,0)','1','0','none','angles')
polyline(ai3m,'rgb(150,0,0)','1','0','none','angles')
polyline(ai4m,'rgb(200,0,0)','1','0','none','angles')
polyline(ai5m,'rgb(255,0,0)','1','0','none','angles')
polyline(td1m,'rgb(247,252,245)','1','0','none','angles')
polyline(td2m,'rgb(201,234,194)','1','0','none','angles')
polyline(td3m,'rgb(123,199,124)','1','0','none','angles')
polyline(td4m,'rgb(42,146,75)','1','0','none','angles')
polyline(td5m,'rgb(0,68,27)','1','0','none','angles')

polyline(aq1m,'rgb(255,255,212','1','0','none','angles')
polyline(aq2m,'rgb(254,217,142)','1','0','none','angles')
polyline(aq3m,'rgb(254,153,41)','1','0','none','angles')
polyline(aq4m,'rgb(217,95,14','1','0','none','angles')
polyline(aq5m,'rgb(153,52,4)','1','0','none','angles')

polyline(miamiLedgend,'black','1','0','none','angles')

polyline(rlam,'rgb(102,153,0)','1','0','none','angles')
polyline(rlbm,'rgb(181,228,88','1','0','none','angles')
polyline(rlcm,'rgb(249,246,68)','1','0','none','angles')
polyline(rldm,'rgb(244,52,42)','1','0','none','angles')
polyline(rlledgendm,'black','1','0','none','angles')




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)
.on("mouseover", addText)
.on("mouseout", removeText)
function addText(event,d){
svg
.append('rect')
.attr("class", "dRect")
.attr('x', path.centroid(d)[0])
.attr("y", path.centroid(d)[1])
.attr('width', 75)
.attr("height", 75)
.attr("fill", 'white')
.attr("stroke", 'black')
svg//draw text
.append("text") //appends path to data
.attr("class", "dText")
.attr('x', path.centroid(d)[0])
.attr("y", path.centroid(d)[1])
.attr("fill", "black")
.style("font-family", "helvetica")
.style("font-size", "15px")
.text(d.properties.grade)

svg//draw text
.append("text") //appends path to data
.attr("class", "dText")
.attr('x', path.centroid(d)[0])
.attr("y", path.centroid(d)[1])
.attr("fill", "black")
.style("font-family", "helvetica")
.style("font-size", "15px")
.text(d.properties.AF_PFS)

}
function removeText(){
svg.selectAll('text.dText').remove()
svg.selectAll('rect.dRect').remove()
}
return svg.node();
}
//color for cells

function fillcolor(d){
var color = 'rgb(100,100,100)'
if(category=="Redlining Grade"){
if(d.properties.grade == "A"){color = "rgb(102,153,0)"}
if(d.properties.grade == "B"){color = "rgb(181,228,88)"}
if(d.properties.grade == "C"){color = "rgb(249,246,68)"}
if(d.properties.grade == "D"){color = "rgb(244,52,42)"}
}

if(category=="Asthma Index"){
if(d.properties.AF_PFS >= 0.00 && d.properties.AF_PFS < 0.09){color = "rgb(50,0,0)"}
if(d.properties.AF_PFS >= 0.09 && d.properties.AF_PFS < 0.27){color = "rgb(100,0,0)"}
if(d.properties.AF_PFS >= 0.27 && d.properties.AF_PFS < 0.68){color = "rgb(150,0,0)"}
if(d.properties.AF_PFS >= 0.68 && d.properties.AF_PFS < 0.89){color = "rgb(200,0,0)"}
if(d.properties.AF_PFS >= 0.89 && d.properties.AF_PFS < 0.97){color = "rgb(255,0,0)"}
}
if(category=="Air Quality Index"){
if(d.properties.PM25F_PFS >= 0.00 && d.properties.PM25F_PFS < 0.31){color = "rgb(255,255,212)"}
if(d.properties.PM25F_PFS >= 0.314 && d.properties.PM25F_PFS < 0.33){color = "rgb(254,217,142)"}
if(d.properties.PM25F_PFS >= 0.33 && d.properties.PM25F_PFS < 0.34){color = "rgb(254,153,41)"}
if(d.properties.PM25F_PFS >= 0.34 && d.properties.PM25F_PFS < 0.36){color = "rgb(217,95,14)"}
if(d.properties.PM25F_PFS >= 0.36 && d.properties.PM25F_PFS < 0.42){color = "rgb(153,52,4)"}
}
if(category=="Tree Coverage"){
if(d.properties.Percent_by >= 0.00 && d.properties.Percent_by < 10.00){color = "rgb(247,252,245)"}
if(d.properties.Percent_by >= 10.00 && d.properties.Percent_by< 14.00){color = "rgb(201,234,194)"}
if(d.properties.Percent_by>= 14.00 && d.properties.Percent_by < 16.00){color = "rgb(123,199,124)"}
if(d.properties.Percent_by >= 16.00 && d.properties.Percent_by < 25.00){color = "rgb(42,146,75)"}
if(d.properties.Percent_by >= 25.00 && d.properties.Percent_by < 32.00){color = "rgb(0,68,27)"}
}
return color
}
return svg.node();
}




Insert cell
medriskmiami = FileAttachment("medriskmiami.txt").tsv({array:true})
Insert cell
lowriskmiami1 = FileAttachment("lowriskmiami@1.txt").tsv({array:true})
Insert cell
lowriskmiami = FileAttachment("lowriskmiami.txt").tsv({array:true})
Insert cell
rlam = FileAttachment("rlam.txt").tsv({array:true})
Insert cell
rlbm = FileAttachment("rlbm.txt").tsv({array:true})
Insert cell
rlcm = FileAttachment("rlcm.txt").tsv({array:true})
Insert cell
rldm = FileAttachment("rldm.txt").tsv({array:true})
Insert cell
rlledgendm = FileAttachment("rlledgendm.txt").tsv({array:true})
Insert cell
ai1m = FileAttachment("ai1m.txt").tsv({array:true})
Insert cell
ai2m = FileAttachment("ai2m.txt").tsv({array:true})
Insert cell
ai3m = FileAttachment("ai3m.txt").tsv({array:true})
Insert cell
ai4m = FileAttachment("ai4m.txt").tsv({array:true})
Insert cell
ai5m = FileAttachment("ai5m.txt").tsv({array:true})
Insert cell
aq1m = FileAttachment("aq1m.txt").tsv({array:true})
Insert cell
aq2m = FileAttachment("aq2m.txt").tsv({array:true})
Insert cell
aq3m = FileAttachment("aq3m.txt").tsv({array:true})
Insert cell
aq4m = FileAttachment("aq4m.txt").tsv({array:true})
Insert cell
aq5m = FileAttachment("aq5m.txt").tsv({array:true})
Insert cell
miamiLedgend = FileAttachment("miami ledgend.txt").tsv({array:true})
Insert cell
td1m = FileAttachment("td1m.txt").tsv({array:true})
Insert cell
td2m = FileAttachment("td2m.txt").tsv({array:true})
Insert cell
td3m = FileAttachment("td3m.txt").tsv({array:true})
Insert cell
td4m = FileAttachment("td4m.txt").tsv({array:true})
Insert cell
td5m = FileAttachment("td5m.txt").tsv({array:true})
Insert cell
island = FileAttachment("island.txt").tsv({array:true})
Insert cell
core2 = FileAttachment("core 2.txt").tsv({array:true})
Insert cell
radiusButton1Txt = FileAttachment("radius button 1.txt.crdownload").tsv({array:true})
Insert cell
heatIslandRadiusMiami1 = FileAttachment("heat island radius miami@1.txt").tsv({array:true})
Insert cell
miaminame2 = FileAttachment("miaminame2.txt").tsv({array:true})
Insert cell
heatIslandRadiusMiami = FileAttachment("heat island radius miami.txt").tsv({array:true})
Insert cell
heatIslandCore = FileAttachment("heat island core.txt").tsv({array:true})
Insert cell
miaminame = FileAttachment("miaminame.txt").tsv({array:true})
Insert cell
bboxMiami = FileAttachment("bbox miami.geojson").json()
Insert cell
hexagonMiamiMerge = FileAttachment("hexagon miami merge.geojson").json()
Insert cell
viewof category = Inputs.radio(["Redlining Grade", "Asthma Index", "Air Quality Index", "Tree Coverage" ], {label: "Category",value:"Redlining Grade"})
Insert cell
category
Insert cell
bboxNol = FileAttachment("bbox nol.geojson").json()
Insert cell
heatIsland2 = FileAttachment("heat island 2.txt").tsv({array:true})
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