Public
Edited
Feb 8, 2023
1 fork
Insert cell
Insert cell
hR=[
{name:"GC", tiredness:10, boredness:4, budget:8},
{name:"Frame", tiredness:3, boredness:8, budget:1},
{name:"WH", tiredness:1, boredness:7, budget:1},
{name:"NYC", tiredness:5, boredness:3, budget:1},
{name:"RPI", tiredness:1, boredness:10, budget:1},
{name:"Fall", tiredness:6, boredness:4, budget:5},
{name:"Bridge", tiredness:3, boredness:7, budget:1},
{name:"Chi", tiredness:3, boredness:4, budget:3},
{name:"Bos", tiredness:3, boredness:6, budget:3},
{name:"Vegas", tiredness:5, boredness:1, budget:10},
{name:"show", tiredness:4, boredness:7, budget:6},
{name:"NASA", tiredness:6, boredness:5, budget:5},
]
Insert cell
viewof flavors = Inputs.checkbox(["GC", "Frame", "WH", "NYC", "RPI", "Fall", "Bridge", "Chi", "Bos", "Vegas", "show", "NASA"], {label: "Tourist Spot"})
Insert cell
flavors
Insert cell
totalvalue={

var totaltireness = 0
var totalboredness = 0
var totalbudget = 0

totaltireness = totaltireness+(hR[0].tiredness*GC)
totaltireness = totaltireness+(hR[1].tiredness*Frame)
totaltireness = totaltireness+(hR[2].tiredness*WH)
totaltireness = totaltireness+(hR[3].tiredness*NYC)
totaltireness = totaltireness+(hR[4].tiredness*RPI)
totaltireness = totaltireness+(hR[5].tiredness*Fall)
totaltireness = totaltireness+(hR[6].tiredness*Bridge)
totaltireness = totaltireness+(hR[7].tiredness*Chi)
totaltireness = totaltireness+(hR[8].tiredness*Bos)
totaltireness = totaltireness+(hR[9].tiredness*Vegas)
totaltireness = totaltireness+(hR[10].tiredness*show)
totaltireness = totaltireness+(hR[11].tiredness*NASA)

totalboredness = totalboredness+(hR[0].boredness*GC)
totalboredness = totalboredness+(hR[1].boredness*Frame)
totalboredness = totalboredness+(hR[2].boredness*WH)
totalboredness = totalboredness+(hR[3].boredness*NYC)
totalboredness = totalboredness+(hR[4].boredness*RPI)
totalboredness = totalboredness+(hR[5].boredness*Fall)
totalboredness = totalboredness+(hR[6].boredness*Bridge)
totalboredness = totalboredness+(hR[7].boredness*Chi)
totalboredness = totalboredness+(hR[8].boredness*Bos)
totalboredness = totalboredness+(hR[9].boredness*Vegas)
totalboredness = totalboredness+(hR[10].boredness*show)
totalboredness = totalboredness+(hR[11].boredness*NASA)

totalbudget = totalbudget+(hR[0].budget*GC)
totalbudget = totalbudget+(hR[1].budget*Frame)
totalbudget = totalbudget+(hR[2].budget*WH)
totalbudget = totalbudget+(hR[3].budget*NYC)
totalbudget = totalbudget+(hR[4].budget*RPI)
totalbudget = totalbudget+(hR[5].budget*Fall)
totalbudget = totalbudget+(hR[6].budget*Bridge)
totalbudget = totalbudget+(hR[7].budget*Chi)
totalbudget = totalbudget+(hR[8].budget*Bos)
totalbudget = totalbudget+(hR[9].budget*Vegas)
totalbudget = totalbudget+(hR[10].budget*show)
totalbudget = totalbudget+(hR[11].budget*NASA)


return[totaltireness, totalboredness, totalbudget]
}
Insert cell
viewof GC = Inputs.radio(["0", "1"], {label: "Great Canyon"})
Insert cell
viewof Frame = Inputs.radio(["0", "1"], {label: "Hollywood"})
Insert cell
viewof WH = Inputs.radio(["0", "1"], {label: "Washing DC"})
Insert cell
viewof NYC = Inputs.radio(["0", "1"], {label: "NYC"})
Insert cell
viewof RPI = Inputs.radio(["0", "1"], {label: "RPI"})
Insert cell
viewof Fall = Inputs.radio(["0", "1"], {label: "Niagara Fall"})
Insert cell
viewof Bridge = Inputs.radio(["0", "1"], {label: "Golden Gate Bridge"})
Insert cell
viewof Chi = Inputs.radio(["0", "1"], {label: "Chicago"})
Insert cell
viewof Bos = Inputs.radio(["0", "1"], {label: "Quincy Market"})
Insert cell
viewof Vegas = Inputs.radio(["0", "1"], {label: "Las Vegas"})
Insert cell
viewof show = Inputs.radio(["0", "1"], {label: "Broadway"})
Insert cell
viewof NASA = Inputs.radio(["0", "1"], {label: "NASA"})
Insert cell
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 == 'City'){fill ='orange'}
return fill
}
function spotSize(d,i){
var r = 3
if(d.type=='City'){r=2}
return r
}
svg.append('text')
//.attr('class','spots')
.attr('x','100')
.attr('y','800')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(totalvalue[0])
svg.append('text')
//.attr('class','spots')
.attr('x','70')
.attr('y','800')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
.text('Tiredness')
svg.append('text')
//.attr('class','spots')
.attr('x','100')
.attr('y','815')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(totalvalue[1])
svg.append('text')
//.attr('class','spots')
.attr('x','70')
.attr('y','815')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
.text('Boredness')
svg.append('text')
//.attr('class','spots')
.attr('x','100')
.attr('y','830')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(totalvalue[2])
svg.append('text')
//.attr('class','spots')
.attr('x','70')
.attr('y','830')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
.text('Budget')

if(totalvalue[0]>23){
svg.append('text')
.attr('class','spots')
.attr('x','480')
.attr('y','420')
.attr('font-family','Helvetica')
.attr('font-size','5.8em')
.attr('text-anchor','middle')
.attr('font-weight','bold')
.text('MUM IS TIRED')
}
if(totalvalue[1]>40){
svg.append('text')
.attr('class','spots')
.attr('x','480')
.attr('y','450')
.attr('font-family','Helvetica')
.attr('font-size','5.8em')
.attr('text-anchor','middle')
.attr('font-weight','bold')
.text('DAD GET BORED')
}if(totalvalue[2]>30){
svg.append('text')
.attr('class','spots')
.attr('x','480')
.attr('y','480')
.attr('font-family','Helvetica')
.attr('font-size','5.8em')
.attr('text-anchor','middle')
.attr('font-weight','bold')
.text('YOU ARE BROKE')
}
function spotText(event,d){

svg.append('text')
.attr('class','spots')
.attr('x','140')
.attr('y','280')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.text(d.who)

svg.append('text')
.attr('class','spots')
.attr('x','140')
.attr('y','295')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','start')
.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)

// 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()
}








return svg.node();
}
Insert cell
observablesline = FileAttachment("observablesline.txt").tsv()
Insert cell
map2 = FileAttachment("US State Gis Map 2.geojson").json()
Insert cell
//type = [food,bar,store,coffee]
Insert cell
Insert cell
spots = d3.csv(spotsLink,d3.autoType)
Insert cell
curbs = FileAttachment("curbs.geojson").json()
Insert cell
zips = FileAttachment("boundaries.geojson").json()
Insert cell
nycParks = FileAttachment("parks_nyc_reduced@2.geojson").json()
Insert cell
d3 = require("d3@6")
Insert cell
box = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRlLW6JcSye2uCpq29RZVWNXSCgTKcrPtQZ7XCqGOJuwzf0ZVUB3rhz3x1L2TVgBdRlVo8IZHjylk_Y/pub?output=csv'
Insert cell
studioSite = d3.csv(box,d3.autoType)
Insert cell
bldgs = FileAttachment("bldgs.geojson").json()
Insert cell
nysOutline = FileAttachment("NYS Outline.geojson").json()
Insert cell
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
Insert cell
Insert cell
Insert cell
Insert cell
map = FileAttachment("US State Gis Map.geojson").json()
Insert cell
type = ["plant", "distributor", "contractor"]
Insert cell
typeDescribtion =['Plant to distributor transportation', 'Distributor to contractor transportation', 'Local contractor loction']
Insert cell
step1test= FileAttachment("first.geojson").json()
Insert cell
first = FileAttachment("first.geojson").json()
Insert cell
second = FileAttachment("second.geojson").json()
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