230208_SYD
d3 = require("d3@6")
chart = {
const width = 400,
height = 450;
const svg = d3.create("svg")
.attr("viewBox", [50, 0, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], SYDbox);
var path1 = 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");
//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("path4") //d3 geopath
.data(SYDwater.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", path4) //The d attribute defines a path to be drawn, only applies to appended elements
.style('fill', 'lavender')
.style("fill-opacity", ".6")
.style('stroke-opacity','.4')
.style("stroke-width", '.25')
.style('stroke', 'black')
g.selectAll("path4") //d3 geopath
.data(SYDbuildings.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', 'lightblue')
.style("fill-opacity", ".6")
.style('stroke-opacity','.4')
.style("stroke-width", '.25')
.style('stroke', 'steelblue')
g.selectAll("path5") //d3 geopath
.data(SYDroads.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','.4')
.style("stroke-width", '.3')
.style('stroke', 'dodgerblue')
var c = svg.selectAll("circle") //d3 geopath
.data(SYDspots)
.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',colorType) // add function to control color by 'type'
.attr('stroke-opacity','.65')
.attr("stroke-width", "2")
.attr('stroke', 'pink')
.style('fill-opacity','1')
.on('mouseover', spotText)
.on('mouseout', removeSpotText)
function colorType(d,i) {
var color = 'black'
if(d.CATEGORY=='Restaurant'){color = 'firebrick'}
if(d.CATEGORY=='Place'){color = 'mediumvioletred'}
return color
}
function spotText(event,d){
d3.select(this)
.attr('fill', 'indigo')
.attr('r', 6)
.style('stroke', 'mediumslateblue')
.style("stroke-opacity",'.65')
.style("stroke-width", '5')
svg.append("rect")
.attr('class','whitebox')
.attr("x", 245)
.attr("y", 170)
.attr("height", 30)
.attr("width", 100)
.attr('stroke','black')
.attr("stroke-width", '.5')
.attr('stroke-opacity', '.4')
.style("fill", 'white');
svg.append('text')
.attr('class','spots')
.attr('x','252')
.attr('y','183')
.attr('font-family','Helvetica')
.attr('font-size','.35em')
.attr('text-anchor','start')
.attr('font-weight','bold')
.text(d.NAME)
svg.append('text')
.attr('class','spots')
.attr('x','252')
.attr('y','191')
.attr('font-family','Helvetica')
.attr('font-size','.2em')
.attr('text-anchor','start')
.attr('font-weight','normal')
.attr('font-style','italic')
.text(d.DESCRIPTION)
svg.append('line')
.attr('class','spotLine')
.attr('x1','245')
.attr('y1','183')
.attr('x2',projection([d.LONG,d.LAT])[0])
.attr('y2','183')
.style('stroke-width','.5')
.style('stroke','black')
.style('stroke-dasharray','2 1')
svg.append('line')
.attr('class','spotLine')
.attr('x1',projection([d.LONG,d.LAT])[0])
.attr('y1','183')
.attr('x2',projection([d.LONG,d.LAT])[0])
.attr('y2',projection([d.LONG,d.LAT])[1])
.style('stroke-width','.5')
.style('stroke','black')
.style('stroke-dasharray','2 1')
}
function removeSpotText(event,d) {
d3.select(this).attr('fill', colorType)
d3.select(this).attr('r', 3)
d3.select(this).style('stroke', 'pink')
d3.select(this).style('fill-opacity','1')
d3.select(this).style('stroke-opacity','.65')
d3.select(this).style('stroke-width', '2')
d3.selectAll('text.spots').remove()
d3.selectAll('line.spotLine').remove()
d3.selectAll('rect.whitebox').remove()
var wrap = svg.selectAll("text.spots")
.each(function(d,i) {wrap_text(d3.select(this), 100) } );
}
/*
c.enter.append('circle')// format to add additional circles
.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.longitude,d.latitude])[0]})
.attr("cy", function(d) {return projection([d.longitude,d.latitude])[1]})
.attr('r',3)
.attr('fill','black')
.style('fill-opacity','1')
*/
return svg.node();
}
selectedplaces = selected
placestogo = ["Coles", "Library", "Rowhouses", "Maritime Museum", "Circular Quay", "Powerhouse Museum","Pyrmont Bridge","Paddy's Markets","Hobbyco","Noodle Star", "Istanbul on Oxford", "Mille Vini", "The Prophet", "Oporto","Thai Tha Poh"]
tD = [//create cost and happiness dataset
{name:"COL", time:1, dist:140},
{name:"NOO", time:5, dist:350},
{name:"IST", time:20, dist:1600},
{name:"MIL", time:11, dist:800},
{name:"LIB", time:10, dist:800},
{name:"PRP", time:3, dist:240},
{name:"CLE", time:2, dist:130},
{name:"MAR", time:37, dist:3000},
{name:"POW", time:25, dist:2000},
{name:"PYR", time:36, dist:2900},
{name:"PAD", time:19, dist:1600},
{name:"HOB", time:32, dist:2500},
{name:"CQY", time:44, dist:3600},
{name:"OPO", time:9, dist:700},
{name:"THA", time:3, dist:240},
]
totalValues = {//calculate total cost and total happiness
var totalTime = 0
var totalDist = 0
totalTime = totalTime+([selectedplaces[0].time] + [selectedplaces[1].time] + [selectedplaces[2].time] + [selectedplaces[3].time] + [selectedplaces[4].time] + [selectedplaces[5].time] + [selectedplaces[6].time] + [selectedplaces[7].time])
totalDist = totalDist+([selectedplaces[0].dist] + [selectedplaces[1].dist] + [selectedplaces[2].dist] + [selectedplaces[3].dist] + [selectedplaces[4].dist] + [selectedplaces[5].dist] + [selectedplaces[6].dist] + [selectedplaces[7].dist])
return[totalTime,totalDist]
}
timevalue = function(){
var total = 0;
for (var i = 0; i < selectedplaces.length; i++) {
total = total + selectedplaces[i].time;
}
return total;
}
viewof ss = Inputs.radio([0,1, 2, 3, 4], {label: "Saigon Shack",value:0})
viewof cc = Inputs.radio([0,1, 2, 3, 4], {label: "Comedy Cellar",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 spotRadius = Inputs.radio([2, 4, 6, 8], {label: "Radius",value:4})
viewof y = Inputs.range([0, 255], {step: 1, label: "Favorite number", value:0})
viewof transportation = Inputs.checkbox(["subway", "taxi", "citibike", "revel", "bus"], {label: "NYC Transport"})
viewof places = Inputs.checkbox(["Coles", "Library", "Rowhouses", "Maritime Museum", "Circular Quay", "Powerhouse Museum","Pyrmont Bridge","Paddy's Markets","Hobbyco"], {label: "Places"})
viewof restaurants = Inputs.checkbox(["Noodle Star", "Istanbul on Oxford", "Mille Vini", "The Prophet", "Oporto","Thai Tha Poh"], {label: "Restaurants"})
dashboard =
html`
<div class='dashboardOuter' style='height:808px;width:1200px'>
<div class='indexes' style='position:absolute;top:60px;left:50px;font-family:helvetica;font-size:18px'>
${md` Time - Minutes: **${totalValues[0]}** `}
</div>
<div class='indexes' style='position:absolute;top:80px;left:50px;font-family:helvetica;font-size:18px'>
${md` Distance - Meters: **$${totalValues[1]}** `}
</div>
<div class='map' style='position:absolute;width:700px;top:62.5px;left:462.5px'>
${chart}
</div>
</div>
`
SYDbuildings = FileAttachment("SYD_buildings_004.geojson").json()
SYDbox = FileAttachment("SYD_boundingbox_001.geojson").json()
SYDroads = FileAttachment("SYD_roads_004.geojson").json()
SYDwater = FileAttachment("SYD_water_001.geojson").json()
SYDrails = FileAttachment("SYD_railways_001.geojson").json()
SYDspots = FileAttachment("220118_SYD_locations_V4.csv").csv()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
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.
