//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)
walks = FileAttachment("walks@1.geojson").json()
curbs = FileAttachment("curbs.geojson").json()
walks1 = FileAttachment("weekend_walk.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)
poiLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSF_0FKncruiGvvFmjQ6VrqOb6yDx3k56TGC8DTURcoFKf9vXN0WmhQkJeHdzStfOSfKYmymcAeqrAm/pub?output=csv'
pois = d3.csv(poiLink,d3.autoType)
zoomed_walk = FileAttachment("zoomed_walk.geojson").json()
bldgs = FileAttachment("bldgs.geojson").json()
single_walk = FileAttachment("single_walk.geojson").json()
walkStopsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTfUGROIWRxsCwZ7jNRFFlzvHKj1I8iHef0vVf-nH4YcuNmuPT-spuDLfuypib2Kmm4-vIjlqKu0lfW/pub?output=csv'
walkStops = d3.csv(walkStopsLink, d3.autoType)
dog_icon = FileAttachment("dog_icon.txt").tsv({array:true})
chart = {
const width = 700,
height = 700;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width, height], zoomed_walk);
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 g = svg.append("g").attr("id", "paths");
if(stops=='0'){
//then draw the first stop line segment -it's the same as the polyline code above this
}
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(bldgs.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)")
g.selectAll("path5") //d3 geopath
//svg
//.selectAll('path')
.data(curbs.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','curbs')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','.5')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(zips.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", "white")
.style('fill-opacity','.5')
.style("stroke-width", '1.2')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path") //d3 geopath
.data(nycParks.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", "green")
.style('fill-opacity','.25')
.style("stroke-width", ".1")
.style("stroke", "rgb(0,255,0)")
var cir = svg.selectAll("circle") //d3 geopath
.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]})
.attr("cy",function(d) {return projection([d.long,d.lat])[1]})
.attr('r', spotSize)
.attr('fill', 'black')
.style('fill-opacity','1')
.style("stroke-width", "1")
.on('mouseover', spotText)
.on('mouseleave', spotErase)
function spotSize(d,i){
var r = 3
if(d.type=='bldg'){r=2}
return r
}
function spotText(event,d){
d3.select(this).style("fill", 'cyan');
svg
.append('text')
.attr('class','spotText')
.attr('x','370')
.attr('y','385')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('font-weight','bold')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text(d.name)
svg
.append('text')
.attr('class','spotText')
.attr('x','370')
.attr('y','400')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text(d.description)
var wrap = svg.selectAll("text.spotText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function spotErase(event,d){
d3.selectAll('circle.spots').style('fill','black')
d3.selectAll('text.spotText').remove()
}
svg.append("circle") //d3 geopath
.attr('class','home')
.attr('cx',function(d) {return projection([-73.99431354,40.69009372])[0]})
.attr("cy",function(d) {return projection([-73.99431354,40.69009372])[1]})
.attr('r', '3')
.attr('fill', 'cyan')
.style('fill-opacity','1')
.style("stroke-width", ".5")
.style('stroke','black')
.style('transform','translate(100 100)')
.on('mouseover', homeText)
.on('mouseleave', homeErase)
function homeText(event,d){
d3.select(this).style("fill", 'black');
svg
.append('text')
.attr('class','homeText')
.attr('x','370')
.attr('y','385')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('font-weight','bold')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text('home sweet home')
var wrap = svg.selectAll("text.homeText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function homeErase(event,d){
d3.selectAll('circle.home').style('fill','cyan')
d3.selectAll('text.homeText').remove()
}
//display site name
var t = svg.selectAll('text')
//use word wrap function to limit line width
var wrap = svg.selectAll("text.siteDescription")
.each(function(d, i) { wrap_text(d3.select(this), 200) });
var wrap = svg.selectAll("text.poisd")
.each(function(d, i) { wrap_text(d3.select(this), 160) });
function poiErase(event,d){
d3.selectAll('text.pois').remove()
d3.selectAll('line.pois').remove()
}
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(subway_lines.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-opacity','0')
.style("stroke-width", ".15")
.style("stroke", "rgb(0,0,0)")
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(subSts.features) //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',1.5)
.attr('fill','black')
.style('fill-opacity','.9')
//var t = svg.selectAll('text')
t.enter().append('text')
.data(subSts.features)
.enter()
.append('text')
.attr('class','subStops')
.attr('x',function(d) {return path.centroid(d)[0]})
.attr('y',function(d) {return path.centroid(d)[1]-5})
.attr("font-family", "Helvetica")
.attr('font-size','.55em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','middle')
.text(function(d){return d.properties.name})
g.selectAll("path4") //d3 geopath
.data(single_walk.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','walks')
.attr("d", path4) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke-dasharray", "4 2")
.style("stroke", "rgb(0,0,0)")
.on('mouseover', walkText)
.on('mouseleave', walkErase)
function walkText(event,d){
d3.select(this).style("stroke-width", '3');
d3.select(this).style("stroke-dasharray", '4 0');
svg
.append('text')
.attr('class','walkText')
.attr('x','370')
.attr('y','385')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text(d.properties.Text)
var wrap = svg.selectAll("text.walkText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function walkErase(event,d){
d3.selectAll('path.walks').style('stroke-width','1')
d3.selectAll('path.walks').style('stroke-dasharray','4 2')
d3.selectAll('text.walkText').remove()
}
var p = svg.selectAll("polyline")
.data(dog_icon) //get data to define path
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr('points', function(d){return d})
.style("fill", "black")
.style('stroke-opacity','0')
.style("stroke-width", '0')
.style("stroke", "rgb(0,0,0)")
.attr('transform',iconLocation)
//.attr('transform',"translate(-5)")
function iconLocation(){
var xVal = projection([walkStops[stops].long,walkStops[stops].lat])[0]
var yVal = projection([walkStops[stops].long,walkStops[stops].lat])[1]
//console.log(xVal)
return "translate("+(xVal-20)+" "+(yVal-10)+")"
}
return svg.node();
}
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
viewof stops2 = Inputs.radio(["0", "1", "2", "3"], {value:'0'})
dashboard =
html`
<div class='dashboardOuter' style='height:800px;width:1200px'>
<div class='chart' style='position:absolute; width:700px;top:50px;left:450px'>
${chart}
</div>
<div class='stops' style='position:absolute; width:200px;top:50px;left:150px'>
${viewof stops2}
</div>
<div class='starttime Button' style='position:absolute; width:200px;top:460px;left:150px'>
${viewof startTimerButton}
</div>
<div class='time' style='position:absolute; width:200px;top:400px;left:150px'>
${time}
</div>
<div class='pageDisplay' style='position:absolute; width:200px;top:80px;left:150px;font-family:helvetica;font-size:15px;font-weight:500'>
${pageDisplay}
</div>
</div>
`
pageDisplay = {
//this cell controls the content that goes into the dashboard depending on my 'stops' radio button
//this is for styling the button like we did for the other div ones
var currentPage
if(stops == '0'){ //this is the initial step of the game
currentPage = html`
${walkStops[stops].prompt}
<div class='chart' style='padding-top:25px'>
${viewof letsgo}
</div>
`
}
if(stops == '1'){
currentPage = html`
${walkStops[stops].prompt}
${viewof walkType}
`
}
if(stops == '2'){
currentPage = html`
${walkStops[stops].prompt}
${viewof parkStop}
`
}
if(stops == '3'){
currentPage = html`
${walkStops[stops].prompt}
${viewof eyesOnly}
`
}
return currentPage
}
viewof letsgo = Inputs.button("Lets Go!")
viewof walkType = Inputs.radio(["shot pee", "nice walk", "thinking..."], {})
viewof parkStop = Inputs.radio(["sounds great", "too much poop around :/", "thinking..."], {})
viewof eyesOnly = Inputs.select(responses, {})
responses = ["you know it","anyone can watch this awesome dog","I don't know what that means"]
mutable stops = 0
{
//this cell looks for correct answers from input, and progresses to the next step when appropriate
if(letsgo == 1){
mutable stops = 1 //change to next stop on the map / we use mutable variable when we wanna change its value
set(viewof letsgo,0)// reset button
}
if(walkType == "nice walk"){
mutable stops = 2
}
if(parkStop == "too much poop around :/"){
mutable stops = 3
}
if(eyesOnly == "anyone can watch this awesome dog"){
mutable stops = 0
}
/*
if(stops == '0'){
set(viewof walkType,"thinking...")
set(viewof parkStop,"thinking...")
set(viewof eyesOnly,"I don't know what that means")
}
*/
}
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
These are the timer cells
viewof seconds = Inputs.range([0, 59], {value: 0, step:1, label: "seconds"})
viewof minutes = Inputs.range([0, 59], {value: 0, step:2, label: "minutes", value:2})
hours = 0
function* timer(i = 0) {
yield i;
while (true) {
yield Promises.tick(1000).then(() => i++);
}
}
currentTime = {
if(startTimerButton>0){
return timer();
}else{mutable stops = 0}
}
countdownTime = {
return minutes*60 + seconds;
}
//mutable timesup = 0
time = {
let result = countdownTime - currentTime;
if (currentTime == undefined){result = 0}
if ( result < 0 )
result = "Time Up!";
else {
const remainHours = ""+parseInt(result/3600);
result = result - remainHours*3600;
const remainMinutes = ""+parseInt(result/60);
const remainSeconds = ""+parseInt(result%60);
result = remainMinutes.padStart(2,"0") + ":" +
remainSeconds.padStart(2,"0") ;
}
return html`
<style>
.countdown{ font-size: 40px;font-family:helvetica;font-weight:800 }
</style>
<span class="countdown">${result}</span>
`
}
viewof startTimerButton = Inputs.button([
["Start", value => value + 1],
["Reset", value => 0]
], {value: 0})
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.
