mutable cash = 500
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], bounding_box_01); //this is where the bounding box data goes
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")
//static lines from qgis
staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)",'1')
staticLines(path4, parks.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)",'1')
function staticLines(path, data, sfill, sOpac, sW, stroke, fOpac){
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", sfill)//color
.style("fill-opacity", fOpac)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)//color
}
//static points from qgis
staticCircles(restrooms.features,'1','black','1',"0",'none')
staticCircles(subway_stops.features,'2','red','1',"0",'none')
function staticCircles(data,r,sfill, sOpac, sWidth,strk){
c.enter().append('circle')
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy",function(d) {return path.centroid(d)[1]})
.attr('r', r)
.style('fill', sfill)
.style('fill-opacity',sOpac)
.style("stroke", strk)
.style("stroke-width", sWidth)
}
//lines from rhino, use this on lines with no rollover
//static lines from rhino
polyline(polygon_test,'rgb(240,240,240)','1','0','none')
polyline(crust,'rgb(255,255,0)','1','2.5','black')
polyline(pep,'rgb(255,0,0)','1','1','black')
function polyline(data, sfill, sOpac, sW, stroke){
g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
//add icon to each point on google sheets
//.attr("points", chooseIcon)
g.enter().append("polyline")
.data(spots) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", chooseIcon) //The d attribute defines a path to be drawn, only applies to appended elements
.attr('transform',function(d){return 'translate('+projection([d.long,d.lat])[0]+','+projection([d.long,d.lat])[1]+')'})
.style("fill", 'yellow')
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", 'black')
.on("mouseover",spotText)
.on("mouseout",removeText)
function chooseIcon(d,i){
var icon = crust_icon
if(d.name=="Roberta's"){icon = pie_icon}
if(d.name=="Carmine's"){icon = pep_icon}
return icon
}
//.attr("points", pep_icon)
g.enter().append("polyline")
.data(spots) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", pep_icon) //The d attribute defines a path to be drawn, only applies to appended elements
.attr('transform',function(d){return 'translate('+projection([d.long,d.lat])[0]+','+projection([d.long,d.lat])[1]+')'})
.style("fill", 'red')
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", 'none')
.on("mouseover",spotText)
.on("mouseout",removeText)
/*
//points from spreadsheet
c.enter().append('circle')
.data(spots) //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]})//this function causes its contents to be applied to each circle
.attr("cy",function(d) {return projection([d.long,d.lat])[1]})
.attr('r', 5)
.attr('fill', function(d){return d.color})
.style('fill-opacity','1')
.style("stroke-width", "1")
.on("mouseover",spotText)
.on("mouseout",removeText)
*/
function spotText(event,d){
svg
.append('text')
.attr("class","sText")
.attr('x','200')//this function causes its contents to be applied to each circle
.attr("y",'300')
.attr("font-size","10px")
.attr("font-family","helvetica")
.attr("font-weight","normal")
.attr("text-anchor","start")
.text(d.description)
svg
.append('text')
.attr("class","sText")
.attr('x',projection([d.long,d.lat])[0])//this function causes its contents to be applied to each circle
.attr("y",projection([d.long,d.lat])[1])
.attr("font-size","10px")
.attr("font-family","helvetica")
.attr("font-weight","normal")
.attr("text-anchor","start")
.text(d.description)
var wrap = svg.selectAll("text.sText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });//pixel value of width of line of text
}
function removeText(){
svg.selectAll("text.sText").remove()
}
/*
//add text names of pizza spots
t.enter().append('text')
.data(spots) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr('class','spots')
.attr('x',function(d) {return projection([d.long,d.lat])[0]})//this function causes its contents to be applied to each circle
.attr("y",function(d) {return projection([d.long,d.lat])[1]-8})
.attr("font-size","10px")
.attr("font-family","helvetica")
.attr("font-weight","bolder")
.attr("text-anchor","middle")
.text(function(d){return d.name})
*/
t.enter().append('text')
.data(spots) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr('class','spots')
.attr('x','200')//this function causes its contents to be applied to each circle
.attr("y",function(d,i){return 100+(i*15)})
.attr("font-size","10px")
.attr("font-family","helvetica")
.attr("font-weight","bolder")
.attr("text-anchor","end")
.text(function(d){return d.name})
svg//added mutable cash value
.append('text')
.attr('x','200')
.attr("y",'80')
.attr("font-size","14px")
.attr("font-family","helvetica")
.attr("font-weight","bolder")
.attr("text-anchor","end")
.text(cash)
svg//this will be our first button
.append('rect')
.attr('x','200')
.attr('y','180')
.attr('width','100')
.attr('height','25')
.style('fill','red')
.style('stroke','black')
.on('click',function(){mutable cash = mutable cash - 35})//take money away from cash
svg//this will be our first button text
.append('text')
.attr('x','210')
.attr('y','195')
.attr("font-family","helvetica")
.attr("font-size","13px")
.attr("font-weight","500")
.style('fill','white')
.text('Haircut: $35')
p.enter().append('polyline')
.data(spots) //get data to define path
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr('class','spots')
.attr("points",function(d,i){return "200,"+(100+(i*15))+" "+projection([d.long,d.lat])[0]+","+(100+(i*15))+" "+projection([d.long,d.lat])[0]+","+projection([d.long,d.lat])[1]})
.style("stroke","black")
.style("stroke-dasharray","6 6")
.style("stroke-width",".5")
.style("fill","none")
return svg.node();
}
7+Math.round
combined = [spots,pep_icon]
subway_stops = FileAttachment("subway_stops.geojson").json()
graphic_test = FileAttachment("graphic_test.txt").tsv({array:true})
bbox1 = FileAttachment("bbox@1.geojson").json()
restrooms = FileAttachment("restrooms.geojson").json()
subways = FileAttachment("subways.geojson").json()
parks = FileAttachment("parks.geojson").json()
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vR0GGXiO--PMDh2tB9XvQ_tka8YTl1ov68MBPm-iOgwHJUdbhUBnmEyHBpmJVnIeLgeeL_cTXVwKOhq/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
nextStops = {
var list1 = []
list1.push(spots.filter(filtered => filtered.name=="Table 87"))
list1.push(spots.filter(filtered => filtered.name=="Roberta's"))
list1.push(spots.filter(filtered => filtered.name=="Carmine's"))
return list1
}
nextStops[0][0].color
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
bounding_box_01 = FileAttachment("bounding_box_01.geojson").json()
polygon_test = FileAttachment("polygon_test.txt").tsv({array:true})
crust = FileAttachment("crust.txt").tsv({array:true})
pep = FileAttachment("pep.txt").tsv({array:true})
crust_icon = FileAttachment("crust_icon.txt").tsv({array:true})
pep_icon = FileAttachment("pep_icon.txt").tsv({array:true})
pie_icon = FileAttachment("pie_icon.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.
