chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 60, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], map2);
var path = d3.geoPath().projection(projection);
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 path6 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
var displayedTypes ='All'
//US outline
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(map2.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", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','.2')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
//plant & distribution data spot
var cir = svg.selectAll("circle") //d3 geopath
.data(tLink) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','spots')
.attr('cx',function(d) {return projection([d.long,d.lat])[0]})
.attr("cy",function(d) {return projection([d.long,d.lat])[1]})
.attr('r', radiusType)
.attr('fill', fillColor)
.style('fill-opacity','1')
.style("stroke-width", "1")
.on('mouseover', spotText)
.on('mouseleave', spotErase)
//circle type
function radiusType(d,i){
var radius = 4
if(d.type == 'plant'){radius= 6}
if(d.type == 'contractor') {radius = 4 }
return radius
}
function fillColor(d,i){
var fill = 'purple'
if(d.type == 'distributor'){fill ='orange'}
if(d.type == 'contractor') {fill = 'yellow'}
return fill
}
function spotSize(d,i){
var r = 3
if(d.type=='bldg'){r=2}
return r
}
function spotText(event,d){
svg.append('text')
.attr('class','spots')
.attr('x','140')
.attr('y','300')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
.text(d.who)
svg.append('text')
.attr('class','spots')
.attr('x','140')
.attr('y','315')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
.text(d.describtion)
//annotation line
svg.append('line')
.attr('x1','140')
.attr('y1','300')
.attr('x2', projection([d.long,d.lat])[0])
.attr('y2','300')
.attr('stroke-width','1')
.attr('stroke-dasharray','4,4')
.attr('stroke','rgb(100,100,100)')
svg.append('line')
.attr('x1',projection([d.long,d.lat])[0])
.attr('y1','300')
.attr('x2',projection([d.long,d.lat])[0])
.attr('y2',projection([d.long,d.lat])[1])
.attr('stroke-width','1')
.attr('stroke-dasharray','4,4')
.attr('stroke','rgb(100,100,100)')
}
//mousein
function spotErase(event,d){
d3.selectAll('circle.spots').style('fill',fillColor)
d3.selectAll('text.spots').remove()
d3.selectAll('line').remove()
}
var wrap = svg.selectAll("text.spotText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
//NEW STUFF FOR 9/20
//circle
cir.enter().append("circle")
.data(type)
.enter()
.append('circle')
.attr('class', 'radios')
.attr("cx",'70')
.attr("cy", function(d,i){return i*24+600})
.attr('r',6)
.attr('fill', newTypeColor)
.attr('stroke','black')
.attr('stroke-width', '1')
.style('fill-opacity','.5')
.on('mouseover', typeHighLight)
.on('mouseout', unHighLight)
// svg.append('text')
// .attr('class','StepComment')
// .attr('x','80')
// .attr('y',function(d,i){return i*24+605})
// .attr("font-family", "Helvetica")
// .attr('font-size','1em')
// .attr('fill','rgb(0,0,0)')
// .attr('text-anchor','start')
// .text(StepComment[0])
// svg.append('text')
// .attr('class','StepComment')
// .attr('x','80')
// .attr('y',function(d,i){return(i+1)*24+605})
// .attr("font-family", "Helvetica")
// .attr('font-size','1em')
// .attr('fill','rgb(0,0,0)')
// .attr('text-anchor','start')
// .text(StepComment[1])
// svg.append('text')
// .attr('class','StepComment')
// .attr('x','80')
// .attr('y',function(d,i){return (i+2)*24+605})
// .attr("font-family", "Helvetica")
// .attr('font-size','1em')
// .attr('fill','rgb(0,0,0)')
// .attr('text-anchor','start')
// .text(StepComment[2])
function newTypeColor(d,i){
var color= 'black'
if(d== 'plant') {color='purple'}
if(d== 'distributor'){color='red'}
if(d== 'contractor'){color='orange'}
return color
}
function typeHighLight(event,d){
//var index = tLink.indesOf(d)
// displayedTypes = type[index]
displayedTypes = d
d3.selectAll('circle.spots').attr('fill', eventType)
if(displayedTypes== 'plant'){
g.selectAll("path6") //d3 geopath
.data(first.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','supplychainstep')
.attr("d", path6 )//The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", "rgb(0,0,0)")
svg.append('text')
.attr('class','textDescribtion')
.attr('x','80')
.attr('y',function(d,i){return i*24+605})
.attr("font-family", "Helvetica")
.attr('font-size','1em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(typeDescribtion[0])
}
if(displayedTypes== 'distributor'){
g.selectAll("path6") //d3 geopath
.data(second.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','supplychainstep')
.attr("d", path6 )//The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','.2')
.style("stroke-width", '1')
.style("stroke", "rgb(0,0,0)")
svg.append('text')
.attr('class','textDescribtion')
.attr('x','80')
.attr('y',function(d,i){return (i+1)*24+605})
.attr("font-family", "Helvetica")
.attr('font-size','1em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(typeDescribtion[1])
}
if(displayedTypes== 'contractor'){
svg.append('text')
.attr('class','textDescribtion')
.attr('x','80')
.attr('y',function(d,i){return (i+2)*24+605})
.attr("font-family", "Helvetica")
.attr('font-size','1em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(typeDescribtion[2])
}
}
function eventType(d,i) {
var color='black'
if(d.type==displayedTypes){color='red'}
return color
}
function unHighLight(event,d) {
d3.selectAll('circle.spots').attr('fill', fillColor)
d3.selectAll('path.supplychainstep').remove()
d3.selectAll('text.textDescribtion').remove()
// svg.append('text')
// .attr('class','StepComment')
// .attr('x','80')
// .attr('y',function(d,i){return i*24+605})
// .attr("font-family", "Helvetica")
// .attr('font-size','1em')
// .attr('fill','rgb(0,0,0)')
// .attr('text-anchor','start')
// .text(StepComment[0])
// svg.append('text')
// .attr('class','StepComment')
// .attr('x','80')
// .attr('y',function(d,i){return(i+1)*24+605})
// .attr("font-family", "Helvetica")
// .attr('font-size','1em')
// .attr('fill','rgb(0,0,0)')
// .attr('text-anchor','start')
// .text(StepComment[1])
// svg.append('text')
// .attr('class','StepComment')
// .attr('x','80')
// .attr('y',function(d,i){return (i+2)*24+605})
// .attr("font-family", "Helvetica")
// .attr('font-size','1em')
// .attr('fill','rgb(0,0,0)')
// .attr('text-anchor','start')
// .text(StepComment[2])
}
return svg.node();
}
step1Test = FileAttachment("step 1 test.geojson")
map2 = FileAttachment("US State Gis Map 2.geojson").json()
//type = [food,bar,store,coffee]
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vR3CZr6kGX_rJPp1kxD15JkuGcMvAgLpKfd_XyMay6aAhbEIxv14_Uy4i7ckgGqhyNUnAwCpuEQ3r3s/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
curbs = FileAttachment("curbs.geojson").json()
zips = FileAttachment("boundaries.geojson").json()
nycParks = FileAttachment("parks_nyc_reduced@2.geojson").json()
subway_lines = FileAttachment("subway_lines@2.geojson").json()
subSts = FileAttachment("subway_sts@1.geojson").json()
bbox = FileAttachment("site_boundaries.geojson").json()
d3 = require("d3@6")
box = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRlLW6JcSye2uCpq29RZVWNXSCgTKcrPtQZ7XCqGOJuwzf0ZVUB3rhz3x1L2TVgBdRlVo8IZHjylk_Y/pub?output=csv'
studioSite = d3.csv(box,d3.autoType)
bldgs = FileAttachment("bldgs.geojson").json()
nysOutline = FileAttachment("NYS Outline.geojson").json()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
tLink = d3.csv(dLink,d3.autoType)
dLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQQ_gWm0Ap8xiLvUsG-CQi1eN3jz7njlVB12pLDlzciMTlJlyLbU2POpZ0-uSSSTI5cb1PpdD8_2lJx/pub?output=csv"
map = FileAttachment("US State Gis Map.geojson").json()
type = ["plant", "distributor", "contractor"]
typeDescribtion =['Plant to distributor transportation', 'Distributor to contractor transportation', 'Local contractor loction']
StepComment = ['Transportation section 1','Transportation section 2','Transportation section 3']
step1test= FileAttachment("first.geojson").json()
first = FileAttachment("first.geojson").json()
second = FileAttachment("second.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.
