nys_outline = FileAttachment("nys_outline.geojson").json()
lincenseLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRP5jhprXzSlc2ANQL38djsTPYS3V7hrHt-N4uVSAjH_pdT2-1AqBrq3SK9j1Ua2JnRWU2lmi8iH62I/pub?output=csv'
license = d3.csv(lincenseLink,d3.autoType)
filters = ['All','Indoor & Squarefootage','Outdoor & Acreage','Percent Harvested']
colorScale = d3.scaleQuantize([0, 1], d3.schemeGreys[8])
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-50, -50, width+50, height+50]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], nys_outline);
var path1 = d3.geoPath().projection(projection);//use different path variable for each set of line data
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 g = svg.append("g").attr("id", "paths");
//i'm not using the boundary lines, so I'm going to comment them out
/*
g.selectAll("path1") //d3 geopath
.data(boundary.features) //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", path1) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
*/
g.selectAll("path2") //d3 geopath
.data(nys_outline.features) //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", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '.75')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path3") //d3 geopath
.data(gbldgs.features) //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", path3) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(240,240,240)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
var c = svg.selectAll("circle") //circle
.data(license)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','lic')
.attr("cx", function(d) {return projection([d.long,d.lat])[0]})
.attr("cy", function(d) {return projection([d.long,d.lat])[1]})
.attr('r',2)
.attr('fill','black')//add function to control color by 'type'
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','.25')
//.on('mouseover', spotText)
//.on('mouseout', removeSpotText)
c.enter().append('circle')
.data(filters)
.enter()
.append("circle")
.attr('class','radios')
.attr("cx",60)
.attr("cy", function(d,i) {return i*20+650})
.attr('r',6)
.attr('fill','black')
.attr('stroke','black')
.attr('stroke-width','1')
.style('fill-opacity','1')
.on('click',filterClick)
//.on('mouseout',unhighlight)
function filterClick(event,d){
console.log('hello')
if(d=='All'){
d3.selectAll('circle.lic').attr('fill','black')
d3.selectAll('circle.lic').attr('r','2')
}
if(d=='Indoor & Squarefootage'){
d3.selectAll('circle.lic').attr('fill',indoorFill)
d3.selectAll('circle.lic').attr('r',indoorRad)
}
if(d=='Outdoor & Acreage'){
d3.selectAll('circle.lic').attr('fill',outdoorFill)
d3.selectAll('circle.lic').attr('r',outdoorRad)
}
if(d=='Percent Harvested'){
d3.selectAll('circle.lic').attr('fill',harvested)
d3.selectAll('circle.lic').attr('r','3')
}
}
function indoorFill(d,i){
var color = 'yellow'
if(d.RegisteredIndoorsqft==0){
//console.log('none')
color = 'none'
}
if(d.RegisteredIndoorsqft!=0){
color = 'black'
//console.log('yes and')
}
return color
}
function indoorRad(d,i){
var radius = 3
if(d.RegisteredIndoorsqft!=0){
radius = d.RegisteredIndoorsqft/100
if(radius<2){
radius = 2
}
}
return radius
}
function outdoorFill(d,i){
var color = 'yellow'
if(d.RegisteredOutdooracres==0){
//console.log('none')
color = 'none'
}
if(d.RegisteredOutdooracres!=0){
color = 'black'
//console.log('yes and')
}
return color
}
function outdoorRad(d,i){
var radius = 3
if(d.RegisteredOutdooracres!=0){
radius = d.RegisteredOutdooracres/50
if(radius<2){
radius = 2
}
}
return radius
}
function harvested(d,i){
var color = 'white'
color = colorScale(d.HarvestedOutdooracres/d.RegisteredOutdooracres)
if(color==undefined){
color = 'white'
d3.selectAll(this).attr('fill-opacity','0')
}
//console.log(color)
return color
}
var txt = svg.selectAll("text")
//t.enter().append('text')
.data(filters)
.enter()
.append('text')
.attr('class','keyText')
.attr('x','70')
.attr('y',function(d,i){return (i*20)+654})
.attr("font-family","Helvetica")
.attr('font-size','.45em')
.attr('font-weight','600')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(function(d){return d})
function colorType(d,i){
var color = 'black'
if(d.type=='food'){color = 'cyan'}
if(d.type=='live'){color = 'yellow'}
return color
}
function spotText(event,d){
d3.select(this).attr('fill','yellow')
svg.append('text')
.attr('class','spots')
.attr('x','525')
.attr('y','385')
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('text-anchor','start')
.attr('font-weight','bold')
.text(d.name)
svg.append('text')
.attr('class','spots')
.attr('x','525')
.attr('y','395')
.attr('font-family','Helvetica')
.attr('font-size','.5em')
.attr('text-anchor','start')
.attr('font-weight','normal')
.text(d.description)
svg.append('line')
.attr('class','spotLine')
.attr('x1','522')
.attr('y1','381')
.attr('x2',projection([d.long,d.lat])[0])
.attr('y2','381')
.style('stroke-width','1')
.style('stroke','black')
.style('stroke-dasharray','4 4')
svg.append('line')
.attr('class','spotLine')
.attr('x1',projection([d.long,d.lat])[0])
.attr('y1','381')
.attr('x2',projection([d.long,d.lat])[0])
.attr('y2',projection([d.long,d.lat])[1])
.style('stroke-width','1')
.style('stroke','black')
.style('stroke-dasharray','4 4')
}
function removeSpotText(event,d){
d3.select(this).attr('fill',colorType)
d3.selectAll('text.spots').remove()
d3.selectAll('line.spotLine').remove()
}
/*
c.enter.append('circle')//format to add additional circles
.data(trees)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return projection([d.long,d.lat])[0]})
.attr("cy", function(d) {return projection([d.long,d.lat])[1]})
.attr('r',3)
.attr('fill','black')
.style('fill-opacity','1')
*/
return svg.node();
}
gbldgs = FileAttachment("gbldgs.geojson").json()
gbox = FileAttachment("greenwich_bb.geojson").json()
streets = FileAttachment("greenwich_streets.geojson").json()
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSYHez6n-WUuxPzD2kv9rwlmQQJL78nRg06lBvVoMGsL5he7jOhxXVRbL7XOZPyY1rv3vNFPgtzCrsM/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
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.
