230215_SYD final / Anish De

Anish De

Workspace

Public

Edited

Feb 15, 2023

Fork of 230215_SYD test 01

# 230215_SYD final

d3 = require("d3@6")

plX = [

{name: "Coles", time:1.1, cost:52},

{name: "NooS", time:0.5, cost:15},

{name: "IstOx", time:0.7, cost:24},

{name: "Mille", time:1.4, cost:61},

{name: "Lib", time:0.9, cost:0},

{name: "Prop", time:1.3, cost:44},

{name: "RowH", time:0.1, cost:3},

{name: "MarM", time:1.9, cost:22},

{name: "Pow", time:2.1, cost:17},

{name: "Pyr", time:0.3, cost:4},

{name: "Pad", time:2.8, cost:43},

{name: "Hob", time:1.2, cost:58},

{name: "Quay", time:1.5, cost:11},

{name: "Opo", time:0.4, cost:18},

{name: "ThThP", time:0.8, cost:28},

{name: "Home", time:0.0, cost:0}

]

totalValues = {

var totalTime = 0

var totalCost = 0

totalTime = totalTime + (plX[0].time*Coles)

totalTime = totalTime + (plX[1].time*NooS)

totalTime = totalTime + (plX[2].time*IstOx)

totalTime = totalTime + (plX[3].time*Mille)

totalTime = totalTime + (plX[4].time*Lib)

totalTime = totalTime + (plX[5].time*Prop)

totalTime = totalTime + (plX[6].time*RowH)

totalTime = totalTime + (plX[7].time*MarM)

totalTime = totalTime + (plX[8].time*Pow)

totalTime = totalTime + (plX[9].time*Pyr)

totalTime = totalTime + (plX[10].time*Pad)

totalTime = totalTime + (plX[11].time*Hob)

totalTime = totalTime + (plX[12].time*Quay)

totalTime = totalTime + (plX[13].time*Opo)

totalTime = totalTime + (plX[14].time*ThThP)

totalTime = totalTime + (plX[15].time*Home)

totalCost = totalCost + (plX[0].cost*Coles)

totalCost = totalCost + (plX[1].cost*NooS)

totalCost = totalCost + (plX[2].cost*IstOx)

totalCost = totalCost + (plX[3].cost*Mille)

totalCost = totalCost + (plX[4].cost*Lib)

totalCost = totalCost + (plX[5].cost*Prop)

totalCost = totalCost + (plX[6].cost*RowH)

totalCost = totalCost + (plX[7].cost*MarM)

totalCost = totalCost + (plX[8].cost*Pow)

totalCost = totalCost + (plX[9].cost*Pyr)

totalCost = totalCost + (plX[10].cost*Pad)

totalCost = totalCost + (plX[11].cost*Hob)

totalCost = totalCost + (plX[12].cost*Quay)

totalCost = totalCost + (plX[13].cost*Opo)

totalCost = totalCost + (plX[14].cost*ThThP)

totalCost = totalCost + (plX[15].cost*Home)

return[totalTime, totalCost]

}

viewof colorchange = Inputs.range([0, 255], {step: 1, label: "Color Changer", value:131})

viewof radvar = Inputs.radio([2,3,4], {label: "Radius size", value: 3})

viewof Coles = Inputs.radio([0, 1, 2, 3, 4], {label: "Coles", value: 0})

viewof NooS = Inputs.radio([0, 1, 2, 3, 4], {label: "Noodle Star", value: 0})

viewof IstOx = Inputs.radio([0, 1, 2, 3, 4], {label: "Istanbul On Oxford", value: 0})

viewof Mille = Inputs.radio([0, 1, 2, 3, 4], {label: "Mille Vini Bar", value: 0})

viewof Lib = Inputs.radio([0, 1, 2, 3, 4], {label: "Surry Hills Library", value: 0})

viewof Prop = Inputs.radio([0, 1, 2, 3, 4], {label: "The Prophet", value: 0})

viewof RowH = Inputs.radio([0, 1, 2, 3, 4], {label: "Rowhouses", value: 0})

viewof MarM = Inputs.radio([0, 1, 2, 3, 4], {label: "Maritime Museum", value: 0})

viewof Pow = Inputs.radio([0, 1, 2, 3, 4], {label: "Powerhouse", value: 0})

viewof Pyr = Inputs.radio([0, 1, 2, 3, 4], {label: "Pyrmont Bridge", value: 0})

viewof Pad = Inputs.radio([0, 1, 2, 3, 4], {label: "Paddy's Markets", value: 0})

viewof Hob = Inputs.radio([0, 1, 2, 3, 4], {label: "Hobbyco", value: 0})

viewof Quay = Inputs.radio([0, 1, 2, 3, 4], {label: "Circular Quay", value: 0})

viewof Opo = Inputs.radio([0, 1, 2, 3, 4], {label: "Oporto", value: 0})

viewof ThThP = Inputs.radio([0, 1, 2, 3, 4], {label: "Thai Tha Poh", value: 0})

viewof Home = Inputs.radio([0, 1, 2, 3, 4], {label: "Home", value: 0})

chart = {

const width = 380,

height = 450;

const svg = d3.create("svg")

.attr("viewBox", [100, 0, width-100, height-180]);

// 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', 'lavenderblush')

.style("fill-opacity", ".6")

.style('stroke-opacity','.4')

.style("stroke-width", '.25')

.style('stroke', 'maroon')

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', 'salmon')

.style("fill-opacity", ".3")

.style('stroke-opacity','.2')

.style("stroke-width", '.15')

.style('stroke', 'maroon')

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','.3')

.style("stroke-width", '.2')

.style('stroke', 'firebrick')

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', radvar)

.attr('fill',colorType) // add function to control color by 'type'

.attr('stroke-opacity','.55')

.attr("stroke-width", "2")

.attr('stroke', 'plum')

.style('fill-opacity','1')

.on('mouseover', spotText)

.on('mouseout', removeSpotText)

function colorType(d,i) {

var color = 'black'

if(d.CATEGORY=='Restaurant'){color = 'mediumvioletred'}

if(d.CATEGORY=='Place'){color = 'purple'}

if(d.CATEGORY=='Thing'){color = 'rgb(255,255,'+colorchange+')'}

return color

}

svg.append("rect")

.attr("x", 305)

.attr("y", 31)

.attr("height", 51)

.attr("width", 32)

.attr('stroke','black')

.attr("stroke-width", '.5')

.attr('stroke-opacity', '.4')

.style("fill", 'white');

svg.append('text')

.attr('x','310')

.attr('y','40')

.attr('font-family','Helvetica')

.attr('font-size','.2em')

.attr('text-anchor','start')

.attr('font-weight','normal')

.attr('font-style','regular')

.text("Time (hours)")

svg.append('text')

.attr('x','310')

.attr('y','50')

.attr('font-family','Helvetica')

.attr('font-size','.6em')

.attr('text-anchor','start')

.attr('font-weight','bold')

.attr('font-style','regular')

.text(totalValues[0])

svg.append('text')

.attr('x','310')

.attr('y','65')

.attr('font-family','Helvetica')

.attr('font-size','.2em')

.attr('text-anchor','start')

.attr('font-weight','normal')

.attr('font-style','regular')

.text("Cost (AUD)")

svg.append('text')

.attr('x','310')

.attr('y','75')

.attr('font-family','Helvetica')

.attr('font-size','.6em')

.attr('text-anchor','start')

.attr('font-weight','bold')

.attr('font-style','regular')

.text(totalValues[1])

if(totalValues[0] > 36){

svg.append("text")

//.attr('class','spotInfo')

.attr('x','190')

.attr('y','85')

.attr('font-family','Tahoma')

.attr('font-size','0.7em')

.attr('font-weight','Bold')

.attr('fill','firebrick')

.attr('text-anchor','middle')

.text('OUT OF TIME!')

}

if(totalValues[0] > 36){

svg.append("text")

//.attr('class','spotInfo')

.attr('x','190')

.attr('y','95')

.attr('font-family','Tahoma')

.attr('font-size','0.3em')

.attr('font-weight','Bold')

.attr('fill','firebrick')

.attr('text-anchor','middle')

.text('Did you really think you had all the time in the world?')

}

if(totalValues[1] > 800){

svg.append("text")

//.attr('class','spotInfo')

.attr('x','190')

.attr('y','150')

.attr('font-family','Tahoma')

.attr('font-size','0.7em')

.attr('font-weight','Bold')

.attr('fill','firebrick')

.attr('text-anchor','middle')

.text('EMPTY WALLET!')

}

if(totalValues[1] > 800){

svg.append("text")

//.attr('class','spotInfo')

.attr('x','190')

.attr('y','160')

.attr('font-family','Tahoma')

.attr('font-size','0.3em')

.attr('font-weight','Bold')

.attr('fill','firebrick')

.attr('text-anchor','middle')

.text('You wasted all your money...again. Hope it was worth it!!')

}

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', 'orchid')

d3.select(this).style('fill-opacity','1')

d3.select(this).style('stroke-opacity','.55')

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();

}

frameimport = FileAttachment("export_test_frompython_010.txt").tsv({array:true})

border = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

var p = svg.selectAll("polyline")

.data(frameimport) //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", "firebrick")

.style('fill-opacity', '1')

.style('stroke-opacity','.8')

.style("stroke-width", '.4')

.style('stroke', 'maroon')

return svg.node();

}

patchimport = FileAttachment("bigpatch@1.txt").tsv({array:true})

patch = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

var p = svg.selectAll("polyline")

.data(patchimport) //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", "white")

.style('fill-opacity', '1')

.style('stroke', 'none')

return svg.node();

}

redpatchimport = FileAttachment("redpatch.txt").tsv({array:true})

redpatch = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

var p = svg.selectAll("polyline")

.data(redpatchimport) //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", "white")

.style('fill-opacity', '1')

.style('stroke', 'none')

return svg.node();

}

dashboard =

html`

${chart}

</div>

${patch}

</div>

${redpatch}

</div>

${border}

</div>

${md` Time (hours): **${totalValues[0]}** `}

</div>

${md` Cost (AUD): **$${totalValues[1]}** `}

</div>

${md` **Select** the number of visits to each location `}

</div>

${md` 36 hours in ****SYDNEY****, NEW SOUTH WALES `}

</div>

${viewof Home}

</div>

${viewof Coles}

</div>

${viewof NooS}

</div>

${viewof IstOx}

</div>

${viewof Mille}

</div>

${viewof Lib}

</div>

${viewof Prop}

</div>

${viewof RowH}

</div>

${viewof MarM}

</div>

${viewof Pow}

</div>

${viewof Pyr}

</div>

${viewof Pad}

</div>

${viewof Hob}

</div>

${viewof Quay}

</div>

${viewof Opo}

</div>

${viewof ThThP}

</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_V3.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.

Learn more