Map of a Dream Trip / John Xu's Workspace

John Xu's Workspace

Workspace

Public

Edited

Feb 14, 2024

Fork of base map - UD Spring 2024 - fleet's version

# Map of a Dream Trip

d3 = require("d3@6")

chart = {

const width = 800,

height = 800;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 50, height - 50], bbox);

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 g = svg.append("g").attr("id", "paths");

g.selectAll("path2") //d3 geopath

.data(subwayLines.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(buildingFootprints.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)")

g.selectAll("path4") //d3 geopath

.data(neighborhoodTabulationAreas.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") //d3 geopath

//.data(store)

// .enter() //there are more data than elements, this selects them

//.append("circle") //appends path to data

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

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

// .style('fill','black')

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

svg

.append('line')

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

.attr('x1','480')

.attr('y1','500')

.attr('x2','600')

.attr('y2','500')

.style('stroke', 'magenta')

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

//svg

// .append('rect')

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

//.attr('x', '440')

//.attr('y', '470') // Adjusted the y-coordinate for the top-left corner of the rectangle

// .attr('width', '200') // Adjusted the width

// .attr('height', '75') // Adjusted the height

//.style('fill', 'magenta') // Use 'fill' instead of 'stroke' for rectangles

//.style('fill-opacity', '0.3')

var p = svg.selectAll('polyline')

//p.enter().append('polyline')

.data(icon_list)

.enter()

.append('polyline')

.attr('class','icon')

.attr('points',function(d){return d.pts})

//.attr('transform',function(d){return'translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')'})

.attr('transform', function(d) {

var x = projection([d.data.Long, d.data.Lat])[0];

var y = projection([d.data.Long, d.data.Lat])[1];

return 'translate(' + x + ',' + y + ') scale(2)'; // Adjust the scale factor as needed

})

.style('fill', 'black')

.style('stroke', 'black')

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

.on('mouseover', storeInfo)

.on('mouseout', storeInfoOut)

// p.enter().append('polyline')

//.data(shoe1)

//.enter()

//.append('polyline')

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

//.attr('points',function(d){return d})

//.style('fill', 'black')

//.style('stroke', 'black')

// .style("stroke-width", '.3')

function fillColor(d,i) {

var color = 'rgb(0,0,0)'

if(d.data.Rating==5){color = 'rgb(255,0,255)'}

if(d.data.Rating==4){color = 'rgb(215,0,215)'}

if(d.data.Rating==3){color = 'rgb(175,0,175)'}

if(d.data.Rating==2){color = 'rgb(135,0,135)'}

if(d.data.Rating==1){color = 'rgb(95,0,95)'}

return color

}

function storeInfo(event,d) {

d3.select(this).style('fill','magenta')

svg

.append('text')

.attr('class','storeText')

.attr('x','540')

.attr('y','495')

.style("font-family","Helvetica")

.style('font-size','.85em')

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

.style('fill','magenta')

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

.text(d.data.Name)

svg

.append('text')

.attr('class','storeText')

.attr('x','540')

.attr('y','522.5')

.style("font-family","Helvetica")

.style('font-size','.75em')

.style('fill','magenta')

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

.text(d.data.Description)

svg

.append('text')

.attr('class','storeText')

.attr('x','540')

.attr('y','540')

.style("font-family","Helvetica")

.style('font-size','.75em')

.style('fill','magenta')

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

.text(d.data.Rating)

var ratingList = []

if(d.data.Rating==1){ratingList = [fire]}

if(d.data.Rating==2){ratingList = [fire,fire]}

if(d.data.Rating==3){ratingList = [fire,fire,fire]}

if(d.data.Rating==4){ratingList = [fire,fire,fire,fire]}

if(d.data.Rating==5){ratingList = [fire,fire,fire,fire,fire]}

p.enter().append('polyline')

.data(ratingList)

.enter()

.append('polyline')

.attr('class','icon_rating')

.attr('points', function(d){return d})

.attr('transform',function(d,i){return'translate('+(150+(i*35))+',200)'})

.style('fill', 'magenta')

.style('stroke', 'none')

//.style("stroke-width", '.1');

svg

.append('line')

.attr('class','storeLine2')

//.style('opacity', 1)

.attr('x1', 440) // Adjusted x-coordinate of the rectangle

.attr('y1', 470) // Adjusted y-coordinate of the rectangle

.attr('x2',projection([d.data.Long,d.data.Lat])[0])

.attr('y2',projection([d.data.Long,d.data.Lat])[1])

.attr('stroke-width','.8')

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

.style('stroke','magenta')

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

}

function storeInfoOut(event,d) {

// d3.selectAll('circle.storePts').style('fill',fillColor)

d3.selectAll('text.storeText').remove()

d3.selectAll('line.storeLine').remove()

d3.selectAll('line.storeLine2').remove()

d3.selectAll('polyline.icon').style('fill','black')

d3.selectAll('polyline.icon_rating').remove()

}

return svg.node();

}

flowerDashboard = FileAttachment("Flower Dashboard@2.txt").tsv({array:true})

flowerTextboard = FileAttachment("Flower Textboard.txt").tsv({array:true})

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

icon = FileAttachment("Icon.txt").tsv({array:true})

fire = FileAttachment("Fire.txt").tsv({array:true})

store = d3.csv(store_link,d3.autoType)

bbox21 = FileAttachment("Bbox2.geojson").json()

neighborhoodTabulationAreas = FileAttachment("Neighborhood Tabulation Areas.geojson").json()

subwayLines = FileAttachment("Subway Lines.geojson").json()

bbox = FileAttachment("Bbox@3.geojson").json()

buildingFootprints = FileAttachment("Building Footprints.geojson").json()

store_link ='https://docs.google.com/spreadsheets/d/e/2PACX-1vQxsU1jll6BF1EnUsQ1G5Dl4ShWynFjIi-ljdPONNs9qADotw3tZBZPHeGtTrCphbK2yDGqrt0B4Iqu/pub?output=csv'

dashboardGraphics = {

const width = 1000,

height = 1000;

const svg = d3.create("svg")

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

var p = svg.selectAll('polyline')

.data(flowerDashboard)

.enter()

.append('polyline')

.attr('class','shoe')

.attr('points',function(d){return d})

.style('fill', 'plum')

.style('stroke', 'black')

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

return svg.node();

}

textboardGraphics = {

const width = 1000,

height = 1000;

const svg = d3.create("svg")

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

var p = svg.selectAll('polyline')

.data(flowerTextboard)

.enter()

.append('polyline')

.attr('class','shoe')

.attr('points',function(d){return d})

.style('fill', 'plum')

// .style("fill-opacity", ".5")

.style('stroke', 'black')

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

return svg.node();

}

dashboard =

html`

${dashboardGraphics}

</div>

${textboardGraphics}

</div>

${chart}

</div>

${md`*"Dream Trip in Manhattan"*`}

</div>

${md`*Designer Stores Series*`}

</div>

${viewof offWhite}

${viewof bape}

${viewof acneStudios}

${viewof kith}

${viewof y3}

${viewof stussy}

${viewof supreme}

${viewof arcteryx}

${viewof rickOwens}

${viewof diesel}

</div>

${md`Anticipated Enjoment: **${calculatedValues[0]}** `}

</div>

${md`Anticipated Cost: **${calculatedValues[1]}** `}

</div>

${drawShop}

</div>

viewof offWhite = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Off-White EM PTY Gallery"})

viewof bape = Inputs.radio(["1", "2", "3", "4", "5"], {label: "BAPE STORE NEW YORK SOHO"})

viewof acneStudios = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Acne Studios Greene Street"})

viewof kith = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Kith SoHo"})

viewof y3 = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Y-3 SoHo Store New York"})

viewof stussy = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Stüssy"})

viewof supreme = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Supreme"})

viewof arcteryx = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Arc'teryx Soho"})

viewof rickOwens = Inputs.radio(["1", "2", "3", "4", "5"], {label: "Rick Owens"})

viewof diesel = Inputs.radio(["1", "2", "3", "4", "5"], {label: "DIESEL STORE SOHO"})

storeDataset = [

{name:offWhite,rating:5,cost:500},

{name:bape,rating:3,cost:300},

{name:acneStudios,rating:4,cost:500},

{name:kith,rating:4,cost:200},

{name:y3,rating:2,cost:150},

{name:stussy,rating:1,cost:100},

{name:supreme,rating:5,cost:150},

{name:arcteryx,rating:2,cost:700},

{name:rickOwens,rating:4,cost:1000},

{name:diesel,rating:2,cost:300}

]

calculatedValues[1]//this is our total cost

drawShop = {

var icon = " "

if(calculatedValues[0]>80 && calculatedValues[1]<15000){icon = shopIcon}

return icon

}

shopOrigin = FileAttachment("Shoe Origin.txt").tsv({array:true})

shopOrigin1 = FileAttachment("Shop Origin.txt").tsv({array:true})

shopIcon = {

const width = 50,

height = 50;

const svg = d3.create("svg")

.attr("viewBox", [-25, -48, width, height]);

var p = svg.selectAll("polyline")

.data(shopOrigin1)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d})

.style('fill','magenta')

//.style('stroke','black')

//.style('stroke-width','3')

return svg.node();

}

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.

Learn more