//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})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.