Sam Zhang NYC MAP - Dashboard Test
d3 = require("d3@6")
hR = [
{name:"bg", cost:6, happiness:12},
{name:"tt", cost:10, happiness:11},
{name:"tb", cost:11, happiness:10},
{name:"tcsc", cost:9, happiness:8},
{name:"da", cost:14, happiness:10},
{name:"bv", cost:7, happiness:12},
{name:"gb", cost:10, happiness:7},
{name:"tb2", cost:9, happiness:9},
]
totalValues = {
var totalCost = 0
var totalHappiness = 0
totalCost = totalCost +(hR[0].cost*bg)
totalCost = totalCost +(hR[1].cost*tt)
totalCost = totalCost +(hR[2].cost*tb)
totalCost = totalCost +(hR[3].cost*tcsc)
totalCost = totalCost +(hR[4].cost*da)
totalCost = totalCost +(hR[5].cost*bv)
totalCost = totalCost +(hR[6].cost*gb)
totalCost = totalCost +(hR[7].cost*tb2)
totalHappiness = totalHappiness+(hR[0].happiness*bg)
totalHappiness = totalHappiness+(hR[1].happiness*tt)
totalHappiness = totalHappiness+(hR[2].happiness*tb)
totalHappiness = totalHappiness+(hR[3].happiness*tcsc)
totalHappiness = totalHappiness+(hR[4].happiness*da)
totalHappiness = totalHappiness+(hR[5].happiness*bv)
totalHappiness = totalHappiness+(hR[6].happiness*gb)
totalHappiness = totalHappiness+(hR[7].happiness*tb2)
return[totalCost,totalHappiness]
}
viewof y = Inputs.range([0, 255], {step: 1, label: "Favorite number"})
viewof spotRadius = Inputs.radio([2,4,6,8,10], {label: "Radius",value:2})
viewof bg = Inputs.radio([0,1,2,3,4], {label: "Bathtub Gin",value:0})
viewof tt = Inputs.radio([0,1,2,3,4], {label: "The Tippler",value:0})
viewof tb = Inputs.radio([0,1,2,3,4], {label: "Twist Bar",value:0})
viewof tcsc = Inputs.radio([0,1,2,3,4], {label: "The Copper Still Chelsea",value:0})
viewof da = Inputs.radio([0,1,2,3,4], {label: "Don Angie",value:0})
viewof bv = Inputs.radio([0,1,2,3,4], {label: "Bar Veloce",value:0})
viewof gb = Inputs.radio([0,1,2,3,4], {label: "Gadfly Bar",value:0})
viewof tb2 = Inputs.radio([0,1,2,3,4], {label: "Thyme Bar",value:0})
chart = {
const width = 900,
height = 1050;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], gbox);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
//i'm not using the boundary lines, so I'm going to comment them out
/*
g.selectAll("path1") //d3 geopath
.data(boundary.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", path1) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
*/
g.selectAll("path2") //d3 geopath
.data(streets.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", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','.75')
.style("stroke-width", '2')
.style("stroke", "rgb(250, 149, 7)")
g.selectAll("path3") //d3 geopath
.data(gbld.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", path3) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(250, 149, 7)")
.style("fill-opacity", ".1")
.style('stroke-opacity','.4')
.style("stroke-width", '.75')
.style("stroke", "rgb(250, 149, 7)")
var c = svg.selectAll("circle") //d3 geopath
.data(spots)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return projection([d.long,d.lat])[0]})
.attr("cy", function(d) {return projection([d.long,d.lat])[1]})
.attr('r','6')
.attr('fill',colorType)
.style('fill-opacity','1')
.style('stroke',"rgb(250, 149, 7)")
.style('stroke-width','5')
.style('stroke-opacity','.25')
.on('mouseover',spotText)
.on('mouseout',removeText)
function colorType(d,i){
var color = 'rgb(187,231,254)'
if(d.type=='bar'){
color = 'rgb(187,231,254)'
}
if(d.type=='food'){
color = 'rgb(187,231,254)'
}
return color
}
svg.append("text")
// .attr('class','spotInfo')
.attr('x','600')
.attr('y','160')
.attr('font-family','Helvetica')
.attr('font-size','1em')
.attr('font-weight','bold')
.attr('font-anchor','start')
.text(totalValues[0])
svg.append("text")
// .attr('class','spotInfo')
.attr('x','560')
.attr('y','160')
.attr('font-family','Helvetica')
.attr('font-size','1em')
// .attr('font-weight','bold')
.attr('font-anchor','start')
.text('cost:')
svg.append("text")
// .attr('class','spotInfo')
.attr('x','645')
.attr('y','180')
.attr('font-family','Helvetica')
.attr('font-size','1em')
.attr('font-weight','bold')
.attr('font-anchor','start')
.text(totalValues[1])
svg.append("text")
// .attr('class','spotInfo')
.attr('x','560')
.attr('y','180')
.attr('font-family','Helvetica')
.attr('font-size','1em')
// .attr('font-weight','bold')
.attr('font-anchor','start')
.text('happiness:')
function spotText(i,d){
svg.append("text")
.attr('class','spotInfo')
.attr('x','100')
.attr('y','100')
.attr('font-family','Helvetica')
.attr('font-size','2em')
.attr('font-weight','bold')
.attr('font-anchor','start')
.text(d.name)
svg.append("text")
.attr('class','spotInfo')
.attr('x','100')
.attr('y','130')
.attr('font-family','Helvetica')
.attr('font-size','1em')
.attr('font-weight','bold')
.attr('font-anchor','start')
.text(d.description)
svg.append('line')
.attr('class','spotLine')
.attr('x1','180')
.attr('y1','110')
.attr('x2',projection([d.long,d.lat])[0])
.attr('y2',projection([d.long,d.lat])[1])
.attr('stroke-width','.5')
.attr('stroke','black')
.attr('stroke-dasharray','4 4')
}
function removeText(i,d){
d3.selectAll('text.spotInfo').remove()
d3.selectAll('line.spotLine').remove()
}
return svg.node();
}
border = {
const width = 1500,
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var p = svg.selectAll("polyline")
.data(in_test_012) //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", "rgb(187,231,254)")
.style('stroke-opacity','1')
.style("stroke-width", '2.75')
.style("stroke", "rgb(252,208,85)")
return svg.node();
}
dashboard =
html`
<div class='dashboardOuter' style='height:800px;width:1200px'>
<div class='map' style='position:absolute;width:650px;top:0px;left:415px'>
${chart}
</div>
<div class='board' style='position:absolute;height:800px;width:1330px'>
${border}
</div>
<div class='button' style='position:absolute;width:600px;top:110px;left:70px'>
${viewof bg}
${viewof tt}
${viewof tb}
${viewof tcsc}
${viewof da}
${viewof bv}
${viewof gb}
${viewof tb2}
</div>
<div class='indexes' style='position:absolute;top:650px;left:560px;font-family:helvetica;font-size:18px'>
${md`**Monthly Social Plan**`}
</div>
`
in_test_012 = FileAttachment("In_test_01@2.txt").tsv({array:true})
gbld = FileAttachment("geojson building.geojson").json()
gbox = FileAttachment("geojson bounding box.geojson").json()
streets = FileAttachment("geojson street.geojson").json()
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSxrWmAUrlPBikgn-vXzVZnv8RV5pZi1AnohOrTQUCXYvMFGsu2fsTwWwyZyerwCdRxtrUcU912vHBE/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
subSts = FileAttachment("sub_stops.geojson").json()
bldgs = FileAttachment("bldgs.geojson").json()
bbox = FileAttachment("site_boundary.geojson").json()
subLns = FileAttachment("subway_lines.geojson").json()
boundary = FileAttachment("nyc_boundary.geojson").json()
in_test_01 = FileAttachment("In_test_01.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.
