Published
Edited
Nov 4, 2020
2 forks
margin = 60
height = 600
width = 800
projectionUS = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], us)
// top left bottom right geometry
pathGeneratorUS = d3.geoPath().projection(projectionUS)
{
// create SVG element
const svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.datum(us)
.attr('d', pathGeneratorUS)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '2')
// pass to Observable to draw this block
return svg.node()
}
contiguousUS = ({type:"FeatureCollection", features:us.features.filter(function(d) { return (!(removeStates.indexOf(d.properties.STATEFP)+1)) })})
projection48US = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], contiguousUS)
pathGenerator48US = d3.geoPath().projection(projection48US)
{
// create SVG element
const svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.datum(contiguousUS)
.attr('d', pathGenerator48US)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '2')
// pass to Observable to draw this block
return svg.node()
}
md`### Pennsylvania`
chooseState = 42
pa = ({type:"FeatureCollection", features:us.features.filter(d=> d.properties.STATEFP==chooseState)})
projectionPA = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], pa)
pathGeneratorPA = d3.geoPath().projection(projectionPA)
{
// create SVG element
const svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.datum(pa)
.attr('d', pathGeneratorPA)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '2')
// pass to Observable to draw this block
return svg.node()
}
ProjectedNLInn = projectionPA(NittanyLionInn)
{
// create SVG element
const svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.data(pa)
.attr('d', pathGeneratorPA)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '2')
svg.append('circle')
.attr('cx', ProjectedNLInn[0])
.attr('cy', ProjectedNLInn[1])
.attr('r', 2.5)
.attr('fill', '#000000')
.attr('stroke', 'none')
// pass to Observable to draw this block
return svg.node()
}
NittanyLionInn2 = [-77.870964, 40.797546]
ProjectedNLInn2 = projectionPA(NittanyLionInn2)
{
// create SVG element
const svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.datum(pa)
.attr('d', pathGeneratorPA)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '2')
svg.append('circle')
.attr('cx', ProjectedNLInn2[0])
.attr('cy', ProjectedNLInn2[1])
.attr('r', 5)
.attr('fill', '#000000')
.attr('stroke', 'none')
// pass to Observable to draw this block
return svg.node()
}
EPAData = {
var temp = []
let values = await d3.csv("https://gist.githubusercontent.com/dudaspm/57951a2fa648fa23b4197768bbac2907/raw/ef63f7bf27d7dbcfffafe5deebe3b28f2ce5ddf0/data_EPA_county.csv")
values.forEach((d,i)=>temp.push({fips:d.fips,pct_pub_transport:+d.pct_pub_transport}))
return temp;
}
PAEPAData = EPAData.filter(d=> d.fips.substring(0, 2) == chooseState)
d3.extent(PAEPAData,d=>+d.pct_pub_transport)
{
const color = d3.scaleLinear().range([0,1]).domain(d3.extent(PAEPAData,d=>+d.pct_pub_transport));
const palette = d3.interpolateOranges; // https://github.com/d3/d3-scale-chromatic
// create SVG element
const svg = d3.select(DOM.svg(width, height))
console.log(PAEPAData)
console.log(pa)
var EPAKeys = {}
PAEPAData.forEach((d,i)=> EPAKeys[d.fips] = d.pct_pub_transport)
console.log(EPAKeys)
// construct the element
svg.selectAll("path").append('path')
.data(pa.features)
.join("path")
.attr('d', pathGeneratorPA)
.attr("fill", d=>palette(color(EPAKeys[d.properties.GEOID])))
.attr('stroke', '#999999')
.attr('stroke-width', '2')
svg.append('circle')
.attr('cx', ProjectedNLInn2[0])
.attr('cy', ProjectedNLInn2[1])
.attr('r', 5)
.attr('fill', '#000000')
.attr('stroke', 'none')
// pass to Observable to draw this block
return svg.node()
}
d3 = require("d3")
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.
