Public
Edited
Sep 19, 2024
d3 = require("d3@6")
chart = {
const width = 1500,
height = 1500;
const svg = d3.create("svg").attr("viewBox", [50, 50, width, height]);
// Use Mercator projection
var projection = d3.geoMercator().fitSize([width - 30, height - 130], 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")
.data(subwayLines.features)
.enter()
.append("path")
.attr('class', 'outlines')
.attr("d", path2)
.style("fill", "none")
.style('stroke-opacity', '1')
.style("stroke-width", '1')
.style("stroke", "black");
g.selectAll(".path3")
.data(buildingFootprints.features)
.enter()
.append("path")
.attr('class', 'outlines')
.attr("d", path3)
.style("fill", "snow")
.style("fill-opacity", "1")
.style('stroke-opacity', '0.25')
.style("stroke-width", '0.25')
.style("stroke", "darkgrey");
g.selectAll(".path4")
.data(neighborhoodTabulationAreas.features)
.enter()
.append("path")
.attr('class', 'outlines')
.attr("d", path4)
.style("fill", "whitesmoke")
.style("fill-opacity", "0.25")
.style('stroke-opacity', '1')
.style("stroke-width", '1')
.style("stroke", "rgb(0,0,0)");
var c = svg.selectAll(".circle")
.data(store)
.enter()
.append("circle")
.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', '11')
.style('fill', 'none')
.style('fill-opacity', '1')
.on('click', storeInfo);
function storeInfo(event, d) {
d3.selectAll('circle.storePts').style('fill', 'none');
d3.selectAll('text.storeText').remove();
d3.selectAll('line.storeLine').remove();
svg.selectAll('image.spotImage').remove();
d3.select(this).style('fill', 'red');
}
var iconPolyline = svg
.selectAll(".icon")
.data(iconlist)
.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] + ')';
})
.style('fill', function(d) { return fillColor(d); })
.attr('stroke', 'darkred')
.style('stroke-width', '5')
.attr('r', '11')
.on('click', function(event, d) {//this fires when we click on an icon
d3.selectAll('polyline.icon').style('fill', function(d) { return fillColor(d); });
d3.selectAll('text.hint').remove();
mutable clickedIcon = d;
d3.select(this).style('fill', 'firebrick');
mutable curImages=[];
// Remove existing icons and add new icons from shoeiconz
svg.selectAll("polyline.icon").remove();
var newIcons = svg.selectAll("polyline")
.data(shoeiconz)
.enter()
.append("polyline")
.attr("cx", function(d) { return projection([d.Long, d.Lat])[0]; })
.attr("cy", function(d) { return projection([d.Long, d.Lat])[1]; })
.attr('r', '7')
.style('fill', 'black')
.style('fill-opacity', '1');
for (let i = 0; i < shoes.length; i++) {
if (shoes[i].ID==d.data.ID){
//mutable curImages.push(shoes[i]);
//mutable curImages.push(shoes[1]);
mutable curImages.push(shoes[Math.floor(Math.random() * shoes.length)])
mutable curImages.push(shoes[Math.floor(Math.random() * shoes.length)])
mutable curImages.push(shoes[Math.floor(Math.random() * shoes.length)])
mutable curImages.splice(Math.floor(Math.random() * curImages.length),0,shoes[i])
//console.log()
//mutable curImages.push(shoes[2]);
//mutable curImages.push(shoes[3]);
}
}
mutable hint = d.data.Hint;
d3.select('.hinttext').text(hint);
});
function fillColor(d, i) {
var color = 'rgb(0,0,0)';
if (d.data.Rating == 5) { color = 'rgb(205,92,92)'; }
if (d.data.Rating == 4) { color = 'rgb(250,128,114)'; }
if (d.data.Rating == 3) { color = 'rgb(255,160,122)'; }
return color;
}
return svg.node();
}
shoeiconz = FileAttachment("shoeiconz.txt").tsv({array:true})
mutable hint = "Click on a location to start"
mutable clickedIcon = ''
mutable shoeList = []
shoeImage = {
const width = 300,
height = 300;
const viewBoxWidth = width ;
const viewBoxHeight = height;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, viewBoxWidth, viewBoxHeight]);
console.log('Click on a location to start');
var i = svg.selectAll('image')
.data(shoeList) // Assuming shoeList is an array of image URLs
.enter()
.append('image')
.attr('xlink:href', function(d) { return d; })
.attr('x', 50)
.attr('y', 50)
.attr('width', 100);
return svg.node();
};
mutable shoeList
store = d3.csv(store_link,d3.autoType)
store_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTyzGdp3igV2_DQ3XFljs-mTqVavBhHhAEuBhp0i0sY-P761BEms45mu8nEcDuG7Jn8S0ARjsWXS_Jw/pub?output=csv'
locationicon = FileAttachment("locationicon.txt").tsv({array:true})
iconlist = {
var list = []
for (let i = 0; i < store.length; i++) {
list.push({data:store[i],pts:locationicon})
}
return list
}
subwayLines = FileAttachment("Subway Lines.geojson").json()
buildingFootprints = FileAttachment("Building Footprints.geojson").json()
neighborhoodTabulationAreas = FileAttachment("Neighborhood Tabulation Areas.geojson").json()
bbox = FileAttachment("Bbox2.geojson").json()
border = FileAttachment("border.txt").tsv({array:true})
dashboardgraphics = {
const width = 800,
height = 800;
const padding = 20; // Padding around the content
const viewBoxWidth = width + 2 * padding;
const viewBoxHeight = height + 2 * padding;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, viewBoxWidth, viewBoxHeight]);
svg.append('image')
.attr('xlink:href','https://i.postimg.cc/Z567wyzq/shoe-background.jpg')
.attr('x', 0)
.attr('y', 0)
.attr('width', '900')
var p = svg.selectAll("polyline")
var i = svg.selectAll('image')
p.enter().append("polyline")//add svg to variable p
.data(dashboardtxt)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','snow')
.style('fill-opacity','0')
.style('stroke','none')
.style('stroke-width','.75')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(whites)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','whitesmoke')
.style('fill-opacity','.75')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(textbackground)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','rgb(128,0,0)')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(shoeboxbox)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','darkred')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','.5')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(mapborder)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','rgb(45,46,48)')
.style('fill-opacity','1')
.style('stroke','dimgray')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(idkanymore2)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','darkred')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(idkanymore)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','darkred')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(textdashboard)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','whitesmoke')
.style('fill-opacity','1')
.style('stroke','snow')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(shoerackrectangle)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','whitesmoke')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(shoerack2)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','brown')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','2')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(shoeWhite)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','white')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(extras2)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','darkred')
.style('fill-opacity','1')
.style('stroke','darkred')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(shoeredtext)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','darkred')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
i.enter().append('image')//these are our 4 shoe images
.data(curImages) // Assuming shoeList is an array of image URLs
.enter()
.append('image')
.attr('xlink:href',function(d) { return d.URL; })
.attr('x', '35')
.attr('y', function(d,i) { return i*135+60})
.attr('width', 140)
.on('click',shoeCheck)//click event upon clicking on shoe
function shoeCheck(event, d){
//console.log(d.Name)
//////this happens if answer is correct
if(d.Name==clickedIcon.data.Name){
console.log('correct!!!')
++mutable score
mutable shoeRack.push(d)//here we are pushing in the image/vector to draw upon a correct guess
shoeRack
}else{console.log('too bad so sad')
mutable guesses = mutable guesses - 1
}
}
chart
curImages
return svg.node();
}
whites = FileAttachment("whites.txt").tsv({array:true})
border1 = FileAttachment("border@1.txt").tsv({array:true})
attemptsscoretext = FileAttachment("attemptsscoretext.txt").tsv({array:true})
textdashboard = FileAttachment("textdashboard.txt").tsv({array:true})
boxhint = FileAttachment("boxhint.txt").tsv({array:true})
mutable score = 0
mutable guesses = 5
extras2 = FileAttachment("extras2.txt").tsv({array:true})
shoerackrectangle = FileAttachment("shoerackrectangle.txt").tsv({array:true})
boxes = FileAttachment("boxhint.txt").tsv({array:true})
shoesinrack = {
const width = 400,
height = 1000;
const padding = 20; // Padding around the content
const viewBoxWidth = width + 2 * padding;
const viewBoxHeight = height + 2 * padding;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, viewBoxWidth, viewBoxHeight]);
var p = svg.selectAll("polyline")
var i = svg.selectAll('image')
//right now it's an image, change to polyline for vector
i.enter().append('image') // these are our 4 shoe images
.data(shoeRack) // Assuming shoeList is an array of image URLs
.enter()
.append('image')
.attr('xlink:href',function(d) { return d.URL; })
.attr('x', function(d, i) {
if (i >= 5) {
return 200 + (i - 5) * 5; // Move the image to the right for indexes greater than or equal to 5
} else {
return 0;
}
})
.attr('y', function(d, i) {
if (i >= 5) {
return (i - 5) * 150 + 60; // Calculate y position for images 6-10 relative to images 1-5
} else {
return i * 150 + 60;
}
})
.attr('width', 140);
//.on('click',shoeCheck)//click event upon clicking on shoe
function shoeCheck(event, d){
//console.log(d.Name)
/*
if(d.Name==clickedIcon.data.Name){
console.log('correct!!!')
mutable shoeRack.push(d)
shoeRack
}else{console.log('too bad so sad')}
*/
}
// Define the startTimer function
function startTimer(duration, display) {
let timer = duration;
setInterval(function() {
let minutes = parseInt(timer / 60, 10);
let seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
//display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
// Set the timer duration (2 minutes)
let twoMinutes = 60 * 2;
// Get the display element from the DOM
let display = document.querySelector('#timer');
// Start the timer
startTimer(twoMinutes, display);
chart
curImages
return svg.node();
}
extras = FileAttachment("extras.txt").tsv({array:true})
frontviewshoe = FileAttachment("frontviewshoe.txt").tsv({array:true})
shoerack2 = FileAttachment("shoerack3.txt").tsv({array:true})
idkanymore = FileAttachment("idkanymore.txt").tsv({array:true})
hintBoxes = FileAttachment("hint boxes.txt").tsv({array:true})
shoeboxbox = FileAttachment("shoeboxbox.txt").tsv({array:true})
shoeboxborder = FileAttachment("shoeboxborder.txt").tsv({array:true})
red2 = FileAttachment("red2.txt").tsv({array:true})
shoeWhite = FileAttachment("shoe white.txt").tsv({array:true})
shoeredtext = FileAttachment("shoeredtext.txt").tsv({array:true})
detailstxt = FileAttachment("detailstxt.txt").tsv({array:true})
bordertxt = FileAttachment("bordertxt.txt").tsv({array:true})
shoelink= "https://docs.google.com/spreadsheets/d/e/2PACX-1vTXg5lO3ZuWD736vBny2tHUrgqMUwaMWGnLQXmqhrY4WLwW4D-48l5e6bJAfZ530n7r2SY_qfgg27Iz/pub?output=csv"
boxTxt = FileAttachment("box txt.txt").tsv({array:true})
red = FileAttachment("red.txt").tsv({array:true})
shoes = d3.csv(shoelink,d3.autoType)
mutable curImages = []
mutable shoeRack = []
sneaker = html`
<div class='dashboardOuter' style='height:1000px;width:1000px'>
<div class='house' style='position:absolute;height:1000px;width:1200px;top:0px;left:0px'>
${dashboardgraphics}
</div>
<div class='house' style='position:absolute;width:680px;height:600px;top:120px;left:275px'>
${chart}
</div>
<div class='text' style='position:absolute;top:-35px;right:400px;font-family:impact;font-size:55px;color:snow'>
${md`**Sneaker Street**`}
</div>
<div class='hinttext' style='position:absolute;width:180px;height:100px;top:310px;right:45px;font-size:15px;color:whitesmoke'>
${hint}
</div>
<div class='hinttext' style='position:absolute;width:200px;height:50px;top:500px;right:20px;font-size:20px;color:whitesmoke'>
${shoesinrack}
</div>
<div class='score' style='position:absolute;width:20px;top:202px;left:1020px;font-size:40px;color:snow'>
${score}
</div>
<div class='guesses' style='position:absolute;width:20px;top:114px;left:1080px;font-size:40px;color:snow'>
${guesses}
</div>
<div class='endGame' style='position:absolute;width:400px;height:300px;top:760px;left:310px;'>
${endGame}
</div>
</div>
`
shoeboard1 = FileAttachment("shoeboard.txt").tsv({array:true})
idkanymore2 = FileAttachment("idkanymore2.txt").tsv({array:true})
endGame = {
var endDwg
const width = 300,
height = 300;
const padding = 20; // Padding around the content
const viewBoxWidth = width + 2 * padding;
const viewBoxHeight = height + 2 * padding;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, viewBoxWidth, viewBoxHeight]);
var p = svg.selectAll("polyline")
if(score>9){//this means your won
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(b2)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','black')
.style('fill-opacity','.5')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(r3)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','rgb(128,0,0)')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(immawinner)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','snow')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
}
if(guesses<1){//this means you lost
//change graphic
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(b2)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','black')
.style('fill-opacity','.5')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(r3)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','rgb(128,0,0)')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
var p = svg.selectAll("polyline")
p.enter().append("polyline")//add svg to variable p
.data(gamover)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','snow')
.style('fill-opacity','1')
.style('stroke','rgb(0,0,0)')
.style('stroke-width','1')
}
return svg.node();
}
immawinner = FileAttachment("immawinner.txt").tsv({array:true})
gamover = FileAttachment("gamover.txt").tsv({array:true})
r3 = FileAttachment("r3.txt").tsv({array:true})
b2 = FileAttachment("b2.txt").tsv({array:true})
b1 = FileAttachment("b1.txt").tsv({array:true})
score
textbackground = FileAttachment("textbackground.txt").tsv({array:true})
mapborder = FileAttachment("mapborder2.txt").tsv({array:true})
red3 = FileAttachment("red3.txt").tsv({array:true})
dashboardtxt = FileAttachment("borderz.txt").tsv({array:true})
shoeboard = FileAttachment("shoeboard02.txt").tsv({array:true})
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
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.