fruit = ['apples','peaches','watermelon','dragonfruit']
transportation
hR = [//create cost and happiness dataset
{name:"ss", cost:10, happiness:2},
{name:"hs", cost:8, happiness:1},
{name:"bnj", cost:15, happiness:2},
{name:"cc", cost:14, happiness:5},
{name:"lpr", cost:10, happiness:1},
{name:"ifc", cost:11, happiness:5},
{name:"ff", cost:14, happiness:4},
{name:"at", cost:9, happiness:1}
]
totalValues = {//calculate total cost and total happiness
var totalCost = 0
var totalHappiness = 0
totalCost = totalCost +(hR[0].cost*ss)
totalCost = totalCost +(hR[1].cost*hs)
totalCost = totalCost +(hR[2].cost*bnj)
totalCost = totalCost +(hR[3].cost*cc)
totalHappiness = totalHappiness+(hR[0].happiness*ss)
totalHappiness = totalHappiness+(hR[1].happiness*hs)
totalHappiness = totalHappiness+(hR[2].happiness*bnj)
totalHappiness = totalHappiness+(hR[3].happiness*cc)
return[totalCost,totalHappiness]
}
viewof transportation = Inputs.checkbox(["subway", "taxi", "citibike", "revel", "bus"], {label: "NYC Transport"})
viewof y = Inputs.range([0, 255], {step: 1, label: "Favorite number", value:0})
viewof spotRadius = Inputs.radio([2, 4, 6, 8], {label: "Radius",value:4})
viewof ss = Inputs.radio([0,1, 2, 3, 4], {label: "Saigon Shack",value:0})
viewof hs = Inputs.radio([0,1, 2, 3, 4], {label: "Hello Saigon",value:0})
viewof bnj = Inputs.radio([0,1, 2, 3, 4], {label: "Blue Note Jass",value:0})
viewof cc = Inputs.radio([0,1, 2, 3, 4], {label: "Comedy Cellar",value:0})
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoAlbersUsa()
.fitSize([width - 50, height - 50], gbox);
var path1 = d3.geoPath().projection(projection);//use different path variable for each set of line data
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 g = svg.append("g").attr("id", "paths");
var clicks =[]
//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','1')
.style("stroke-width", '.75')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path3") //d3 geopath
.data(gbldgs.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(240,240,240)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
var c = svg.selectAll("circle") //circle
.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',spotRadius)
.attr('fill',colorType)//add function to control color by 'type'
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','1')
.on('mouseover',spotText)
.on('mouseout',removeText)
function colorType(d,i){//non-listening event functions pass the data, and then index
var color = 'cyan'
//if the type is live, make the color yellow
if(d.type=='live'){color = 'rgb(255,255,'+y+')'}
if(d.type=='film'){color = 'magenta'}
return color
}
//create and if statement that says if the budget is too high, text pops up that says it's too high
//create if statement that says if happiness is above a certain lever, and budget is below a certain level, you win!
svg.append("text")
//.attr('class','spotInfo')
.attr('x','550')
.attr('y','390')
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('font-weight','bold')
.attr('text-anchor','start')
.text(totalValues[0])
svg.append("text")
//.attr('class','spotInfo')
.attr('x','550')
.attr('y','390')
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('font-weight','500')
.attr('text-anchor','end')
.text('cost:')
svg.append("text")
//.attr('class','spotInfo')
.attr('x','550')
.attr('y','380')
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('font-weight','bold')
.attr('text-anchor','start')
.text(totalValues[1])
svg.append("text")
//.attr('class','spotInfo')
.attr('x','550')
.attr('y','380')
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('font-weight','500')
.attr('text-anchor','end')
.text('happiness:')
function spotText(i,d){
//this is where we write what we want to happen when we mouseover the spot
//d.name is the name of what I'm mousing over
svg.append("text")
.attr('class','spotInfo')
.attr('x','460')
.attr('y','350')
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('font-weight','bold')
.attr('text-anchor','start')
.text(d.name)
svg.append("text")
.attr('class','spotInfo')
.attr('x','460')
.attr('y','360')
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('font-weight','300')
.attr('text-anchor','start')
.text(d.description)
svg.append('line')
.attr('class','spotLine')
.attr('x1','455')
.attr('y1','350')
.attr('x2','455')
.attr('y2',projection([d.long,d.lat])[1])
.attr('stroke-width','1.5')
.attr('stroke','black')
.attr('stroke-dasharray','4 4')
svg.append('line')
.attr('class','spotLine')
.attr('x1',projection([d.long,d.lat])[0])
.attr('y1',projection([d.long,d.lat])[1])
.attr('x2','455')
.attr('y2',projection([d.long,d.lat])[1])
.attr('stroke-width','1.5')
.attr('stroke','black')
.attr('stroke-dasharray','4 4')
}
function removeText(i,d){
d3.selectAll('text.spotInfo').remove()//to remove a class of objects, state the object type, then class name
d3.selectAll('line.spotLine').remove()
}
var t = svg.selectAll('text')
.data(transportation)
.enter()
.append('text')
.attr('x','200')
.attr('y',function(d,i){return 200+(i*20)})
.attr('font-family','Helvetica')
.attr('font-size','.6em')
.attr('text-anchor','start')
.attr('font-weight','bold')
.text(function(d) {return d})
/*
c.enter.append('circle')//format to add additional circles
.data(trees)
.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',3)
.attr('fill','black')
.style('fill-opacity','1')
*/
return svg.node();
}
gbldgs = FileAttachment("gbldgs.geojson").json()
gbox = FileAttachment("greenwich_bb.geojson").json()
streets = FileAttachment("greenwich_streets.geojson").json()
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSYHez6n-WUuxPzD2kv9rwlmQQJL78nRg06lBvVoMGsL5he7jOhxXVRbL7XOZPyY1rv3vNFPgtzCrsM/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
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.