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], bbox_seattle);//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, hexagonMergeSeattle3.features,"rgb(250,250,250)",'.25','.1',"rgb(250,250,250)")
//lines from rhino
polyline(name3,'black','1','0','none','angles')
polyline(heatIslandSeattle,'red','1','0','none','angles')
polyline(core,'red','1','0','none','angles')
polyline(seattleHi2,'red','1','0','none','angles')
polyline(lowriskseat,'green','1','0','none','angles')
polyline(medriskseat,'yellow','1','0','none','angles')
polyline(ai1S2,'rgb(50,0,0)','1','0','none','angles')
polyline(ai2s,'rgb(100,0,0)','1','0','none','angles')
polyline(ai3s,'rgb(150,0,0)','1','0','none','angles')
polyline(ai4s,'rgb(200,0,0)','1','0','none','angles')
polyline(ai5s,'rgb(255,0,0)','1','0','none','angles')
polyline(td1s,'rgb(247,252,245)','1','0','none','angles')
polyline(td2s,'rgb(201,234,194)','1','0','none','angles')
polyline(td3s,'rgb(123,199,124)','1','0','none','angles')
polyline(td4s,'rgb(42,146,75)','1','0','none','angles')
polyline(td5s,'rgb(0,68,27)','1','0','none','angles')
polyline(aq1s,'rgb(255,255,212','1','0','none','angles')
polyline(aq2s,'rgb(254,217,142)','1','0','none','angles')
polyline(aq3s,'rgb(254,153,41)','1','0','none','angles')
polyline(aq4s,'rgb(217,95,14','1','0','none','angles')
polyline(aq5s,'rgb(153,52,4)','1','0','none','angles')
polyline(seattleLedgend,'black','1','0','none','angles')
polyline(rlas,'rgb(102,153,0)','1','0','none','angles')
polyline(rlbs,'rgb(181,228,88','1','0','none','angles')
polyline(rlcs,'rgb(249,246,68)','1','0','none','angles')
polyline(rlds,'rgb(244,52,42)','1','0','none','angles')
polyline(rlledgend,'black','1','0','none','angles')
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)
}
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.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.000 && d.properties.PM25F_PFS < 0.240){color = "rgb(255,255,212)"}
if(d.properties.PM25F_PFS >= 0.240 && d.properties.PM25F_PFS < 0.260){color = "rgb(254,217,142)"}
if(d.properties.PM25F_PFS >= 0.260 && d.properties.PM25F_PFS < 0.290){color = "rgb(254,153,41)"}
if(d.properties.PM25F_PFS >= 0.290 && d.properties.PM25F_PFS < 0.30){color = "rgb(217,95,14)"}
if(d.properties.PM25F_PFS >= 0.30 && d.properties.PM25F_PFS < 0.31){color = "rgb(153,52,4)"}
}
if(category=="Tree Coverage"){
if(d.properties.NUMPOINTS >= 0.00 && d.properties.NUMPOINTS < 0.00){color = "rgb(247,252,245)"}
if(d.properties.NUMPOINTS >= 0.00 && d.properties.NUMPOINTS < 38.00){color = "rgb(201,234,194)"}
if(d.properties.NUMPOINTS >= 38.00 && d.properties.NUMPOINTS < 87.00){color = "rgb(123,199,124)"}
if(d.properties.NUMPOINTS >= 87.00 && d.properties.NUMPOINTS < 151.60){color = "rgb(42,146,75)"}
if(d.properties.NUMPOINTS >= 151.60 && d.properties.NUMPOINTS < 420.00){color = "rgb(0,68,27)"}
}
return color
}
return svg.node();
}
medriskseat = FileAttachment("medriskseat.txt").tsv({array:true})
rlledgend = FileAttachment("rlledgend.txt").tsv({array:true})
rlcs = FileAttachment("rlcs.txt").tsv({array:true})
rlas = FileAttachment("rlAs.txt").tsv({array:true})
rlbs = FileAttachment("rlbs.txt").tsv({array:true})
rlds = FileAttachment("rlds.txt").tsv({array:true})
lowriskseat = FileAttachment("lowriskseat.txt").tsv({array:true})
seattleLedgend = FileAttachment("seattle ledgend.txt").tsv({array:true})
td5s = FileAttachment("td5s.txt").tsv({array:true})
td3s = FileAttachment("td3s.txt").tsv({array:true})
td1s = FileAttachment("td1s.txt").tsv({array:true})
aq4s = FileAttachment("aq4s.txt").tsv({array:true})
aq2s = FileAttachment("aq2s.txt").tsv({array:true})
ai5s = FileAttachment("ai5s.txt").tsv({array:true})
ai3s = FileAttachment("ai3s.txt").tsv({array:true})
ai1S2 = FileAttachment("AI 1 S@2.txt").tsv({array:true})
ai2s = FileAttachment("ai2s.txt").tsv({array:true})
ai4s = FileAttachment("ai4s.txt").tsv({array:true})
aq1s = FileAttachment("aq1s.txt").tsv({array:true})
aq3s = FileAttachment("aq3s.txt").tsv({array:true})
aq5s = FileAttachment("aq5s.txt").tsv({array:true})
td2s = FileAttachment("td2s.txt").tsv({array:true})
td4s = FileAttachment("td4s.txt").tsv({array:true})
ai1S1 = FileAttachment("AI 1 S@1.txt").tsv({array:true})
core = FileAttachment("core.txt").tsv({array:true})
heatIslandSeattle = FileAttachment("heat island seattle.txt").tsv({array:true})
name3 = FileAttachment("name3.txt").tsv({array:true})
hexagonMergeSeattle3 = FileAttachment("hexagon(merge seattle)3.geojson").json()
bbox_seattle = FileAttachment("bbox_seattle.geojson").json()
viewof category = Inputs.radio(["Redlining Grade", "Asthma Index", "Air Quality Index", "Tree Coverage" ], {label: "Category", value:"Redlining Grade."})
category
md`**Selected Category:** ${category}`
seattleHi2 = FileAttachment("seattle HI 2.txt").tsv({array:true})
ai1S = FileAttachment("AI 1 S.txt").tsv({array:true})
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.
