28:null 29:["$","title",null,{"children":"Ticket to Ride - Japan | Victoria Webb's Workspace | Observable"}] 2e:T7519,chart = { const width = 1060, height = 1000; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Use Mercator projection var projection = d3 .geoMercator() .fitSize([width - 100, height], jpBbox); function NoninteractablePolylines(svg, data, classType, strokeWidth, strokeColor,fillColorX) { //console.log(data) const polylines = svg.selectAll("polyline." + classType) .data(data) .enter() .append("polyline") .attr("class", classType) .attr("points", d => d) .style("stroke", strokeColor) .style("stroke-width", strokeWidth) // .attr('transform', 'translate(0,50)') .style("fill", fillColorX); } NoninteractablePolylines(svg, bg_dashboard, "outline", "4px","peru", "peru") //mutable variables - wallet and customer satisfaction svg.append("text")//DESTINATION TOKYO .attr("x", "200") .attr("y", "200") //.attr("class", "body") .style("font-size", '24px') .style('font-weight','bold') .style("fill", 'red') .style('fill-opacity','1') .style('font-family',"century gothic") .text(wallet) svg.append("text")//DESTINATION TOKYO .attr("x", "200") .attr("y", "250") //.attr("class", "body") .style("font-size", '24px') .style('font-weight','bold') .style("fill", 'red') .style('fill-opacity','1') .style('font-family',"century gothic") .text(customerSatisfaction) var p = svg.selectAll("polyline") var t = svg.selectAll('text') 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"); let gameState = { hasStarted: false, startPopupInitiated: false // Step 1: Add a flag to track if startPopup has been initiated } // Remember to call initializeGame where appropriate, for example, within a user action like clicking a start button. //svg.select("rect.st_Rect").on('click', () => { //startPopup(); //initializeGame(); // You may need to adjust this call depending on your application flow //}) //svg.select("rect.st_Rect").on('click', () => { //startPopup(); // You may need to adjust this call depending on your application flow //}) function initializeGame() { //console.log('initialize game') if (gameState.startPopupInitiated == true) { // Step 3: Check the flag before setting hasStarted to true gameState.hasStarted = true enableGameInteractions() //what do we do?! where do we go? } } // Function to enable game interactions function enableGameInteractions() { if (gameState.hasStarted == true) { //console.log("hellllo") svg.append("text")//DESTINATION TOKYO .attr("x", "750") .attr("y", "520") .attr("class", "body") .style("font-size", '24px') .style('font-weight','bold') .style("fill", 'red') .style('fill-opacity','1') .style('font-family',"century gothic") .text('First Stop: Tokyo') } } function reset() { d3.selectAll('rect').remove() d3.selectAll('text.start_txt').remove() d3.selectAll('text.body').remove() d3.selectAll('text.label').remove() d3.selectAll('path.stationLines').remove() d3.selectAll('text.destinations').remove() d3.selectAll('text.confirm').remove() d3.selectAll('text.currentText').remove() d3.selectAll('text.welcome').remove() d3.selectAll('text.missionText').remove() d3.selectAll('text.hintText').remove() } function createText(svg, x, y, fontSize, textContent, fontWeight, textFill, txtOpacity, fontFamily) { svg.append("text") .attr("x", x) .attr("y", y) .attr("class", "Header") .style("font-size", fontSize) .style('font-weight',fontWeight) .style("fill", textFill) .style('fill-opacity',txtOpacity) .style('font-family',fontFamily) .text(textContent) } createText(svg, 202, 52, "60px", "A Ticket to Ride: Japan", "bold", 'saddlebrown', "0.5", 'century gothic') createText(svg, 200, 50, "60px", "A Ticket to Ride: Japan", "bold", "saddlebrown", "1", "century gothic") p.enter().append("polyline") .data(start_button_bg) .enter() //there are more data than elements, this selects them .append("polyline") //appends path to data .attr('class','startButtonBG') .attr('points', function(d){return d}) .attr('transform', 'translate(-90,-150)') .style('stroke-opacity','.9') .style("stroke-width", '.3') .style("stroke", "peru") .style('fill','ivory') .style('fill-opacity','1') .on('click',startPopup) p.enter().append("polyline") .data(resetClick) .enter() //there are more data than elements, this selects them .append("polyline") //appends path to data .attr('class','resetButton') .attr('points', function(d){return d}) //.attr('transform', 'translate(-90,-150)') .style('stroke-opacity','.9') .style("stroke-width", '.3') .style("stroke", "peru") .style('fill','ivory') .style('fill-opacity','1') .on('click',reset) NoninteractablePolylines(svg, reset_lns, "resetLns", "1px","peru", "peru") p.enter().append("polyline") .data(startButton) .enter() //there are more data than elements, this selects them .append("polyline") //appends path to data .attr('class','startButton') .attr('points', function(d){return d}) .attr('transform', 'translate(-90,-150)') .style('stroke-opacity','.9') .style("stroke-width", '.3') .style("stroke", "peru") .style('fill','peru') .style('fill-opacity','1') .on('click',startPopup) function startPopup(event,d){ gameState.hasStarted = true; gameState.startPopupInitiated = true; // Step 2: Set the flag to true when startPopup is called console.log(gameState.startPopupInitiated) d3.selectAll('rect.pop_Rect').remove() d3.selectAll('text.start_txt').remove() initializeGame() svg.append("rect") .attr("class","pop_Rect") .attr("x","144") .attr("y","158") .attr("rx","20") .attr("ry","20") .attr("height","240") .attr("width","360") .style("fill","ivory") .style('fill-opacity','1') .style("stroke-width","5") .style("stroke","peru") svg .append("text") .attr("class","start_txt") .attr('x','145') .attr('y','420') .style('font-family','monospace') .style('font-size','18px') .style('font-weight','bold')//use 'fill' to change font color .attr('fill','saddlebrown') .attr('text-anchor','left') .text('Instructions') svg .append("text") .attr("class","start_txt") .attr('x','155') .attr('y','180') .style('font-family','monospace') .style('font-size','13px') .style('font-weight','regular')//use 'fill' to change font color .attr('fill','saddlebrown') .attr('text-anchor','left') .text('Welcome to A Ticket to Ride: Japan! The rules are pretty simple. You are a XX picking up very important guests at different rail and bullet train stations. Each Round you will receive a train station destination; use the network of different bullet train and rail routes to get there in the most efficient way. If you dont get there in time XXXX. Oh, Also! watch your food and that wallet. If you need to refuel, there are plenty of vending machines around japan. Lastly, time is money, as they say, so if you start to run low on cash, you will need to lose some time to make some money. Anyways, Good Luck and Welcome to a Ticket to Ride: Japan!') var wrap = svg.selectAll('text.start_txt') .each(function(d,i) {wrap_text(d3.select(this),190)}) } /* //RANDOM Starting Postion and Destination function getRandomStationNames(stations) { // Ensure there are at least two different stations to choose from if (stations.length < 2) { console.error("Not enough stations to choose from."); return null; } // Select a random index for the starting station let startIndex = Math.floor(Math.random() * stations.length); let startStation = stations[startIndex]; // Select a random index for the destination station let destIndex; do { destIndex = Math.floor(Math.random() * stations.length); } while (destIndex === startIndex); // Ensure destination is not the same as the start let destinationStation = stations[destIndex]; return { startStation: startStation.Name, destinationStation: destinationStation.Name }; } // Example usage with your station data let stations = [ { Name: "Tokyo" }, { Name: "Kyoto" }, { Name: "Osaka" }, { Name: "Hokkaido" } ]; let gameStations = getRandomStationNames(stations); console.log("Start at:", gameStations.startStation); console.log("Destination:", gameStations.destinationStation); */ //MAP DATA const borderLines = g.selectAll(".borderLine") // Use a class to identify the elements .data(border11) .enter() .append("polyline") .attr("class", "borderLine") .attr("points", d => d.pts) // Assuming each 'd' has a 'pts' property with the polyline points .style("stroke", "black") .style("stroke-width", "2px") .style("fill", "none"); /* p.enter().append("polyline") .data(vend_list) .enter() //there are more data than elements, this selects them .append("polyline") .attr('class','icon') .attr('points',function(d){return d.geo})//not supposed to be points //.attr('transform',function(d){return 'translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')'}) .style('stroke-opacity','1') .style("stroke-width", '.2') .style("stroke", "peru") .style('fill',"peru") .style('fill-opacity','1') */ g.selectAll("path3") //d3 geopath .data(outline.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outline1') .attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "ivory") .style("fill-opacity", ".9") .style('stroke-opacity','1') .style("stroke-width", '1') .style("stroke", "sienna") g.selectAll("path1") //d3 geopath .data(sbs_lines.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') //.attr('stroke-dasharray','0.5 1 0.5 1') .style("stroke-width", '1.5') .style("stroke", lineType) function lineType(d,i){ var color = "salmon" if(d.properties.Layer=="rail"){color = "lightsalmon"} return color } /*g.selectAll("path1") //d3 geopath .data(jpRail.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('fill-opacity','.4') .style("stroke-width", '1') .style("stroke", "red") */ // TRAIN STATION POINTS p.enter().append("polyline") .data(train_list) .enter() //there are more data than elements, this selects them .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('stroke-opacity','1') .style("stroke-width", '.2') .style("stroke", "peru") .style('fill',fillColor) .style('fill-opacity','1') .on('mouseover',spotsInfo) .on('mouseout',spotsInfoOut) .on('click',polyClickStation) //STATION CLICK function polyClickStation(event,d) { d3.selectAll('text.start_txt').remove() d3.selectAll('text.destinations').remove() d3.selectAll('rect.pop_Rect').remove() d3.selectAll('path.stationLines').remove() d3.selectAll('text.confirm').remove() d3.selectAll('text.currentText').remove() d3.selectAll('text.welcome').remove() d3.selectAll('text.body').remove() d3.selectAll('text.missionText').remove() d3.selectAll('text.hintText').remove() //have text for name of station //text for numbers ofr bullet trains you can go to // text for number of japanraisl you can go to /* svg .append("text") .attr('x','200') .attr('y','450') .attr('class','label') .style('font-family','julee') .style('font-size','8px') .style('font-weight','light')//use 'fill' to change font color .attr('fill','peru') .attr('text-anchor','left') .text("bullet:" + d.data.bulletDestination) */ var bulletOptions = String(d.data.bulletDestination) // console.log(bulletOptions) if(bulletOptions!=null && bulletOptions.includes(",")){ bulletOptions = bulletOptions.split(",") //console.log(bulletOptions) } var bulletDests = [] for (let i = 0; i < bulletOptions.length; i++) { var index = Number(bulletOptions[i]) //console.log(index) for (let n = 0; n < train_list.length; n++) { //console.log(Number(train_list[n].data.indexID)) if(index==Number(train_list[n].data.indexID)){ console.log(train_list[n].data.Name) bulletDests.push(train_list[n].data) } } } var lnsToDraw = [] for (let i = 0; i < sbs_lines.features.length; i++) {//loop through dataset of lines var sbsLine = sbs_lines.features[i].properties.indexID//pull out id of lines sbsLine = sbsLine.split(',');//split ids by ',' //console.log(sbsLine) for (let n = 0; n < sbsLine.length; n++) {//loop through ids of lines if (d.data.indexID==Number(sbsLine[n])){//compare icon clicked on to ids of numbers // console.log('match') // console.log(sbsLine[n]) //d3.select(sbs_lines.features[i].geometry).style('stroke-width','10') lnsToDraw.push(sbs_lines.features[i]) } } } //console.log(lnsToDraw) g.selectAll("path1") //d3 geopath .data(lnsToDraw) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','stationLines') .attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "none") .style('stroke-opacity','1') //.attr('stroke-dasharray','0.5 1 0.5 1') .style("stroke-width", '4') .style("stroke", stationType)// function stationType(d,i){ var color = "orange" if(d.properties.Layer=="rail"){color = "orangered"} return color } svg.append("rect")//pops up to click on for train destinations .attr("class","vendRect") .attr("x","760") .attr("y",function(d,i){return 910+(i*30)}) .attr("rx","5") .attr("ry","5") .attr("height","30") .attr("width","145")//can we make this adjustable to the length of the name and repeat with each name? .style("fill","ivory") .style('fill-opacity','1') .style("stroke-width","1") .style("stroke","brown") .style('stroke-opacity','.5') .on('click',polyClickVend) svg.append("text")//DESTINATION TOKYO .attr("x", "767") .attr("y", "930") .attr("class", "confirm") .style("font-size", '15px') .style('font-weight','regular') .style("fill", 'brown') .style('fill-opacity','1') .style('font-family',"century gothic") .text('Vending Machine') //STATION CLICK function polyClickVend(event,d) { d3.selectAll('text.start_txt').remove() d3.selectAll('text.destinations').remove() d3.selectAll('text.currentText').remove() d3.selectAll('text.missionText').remove() d3.selectAll('text.hintText').remove() d3.selectAll('text.welcome').remove() d3.selectAll('rect.pop_Rect').remove() d3.selectAll('rect.trainRect').remove() d3.selectAll('rect.vendRect').remove() d3.selectAll('path.stationLines').remove() d3.selectAll('text.confirm').remove() p.enter().append("polyline")//VENDING MACHINE STUFF .data(vendingLines) .enter() //there are more data than elements, this selects them .append("polyline") //appends path to data .attr('class','vendClick') .attr('points', function(d){return d.geo}) //.attr('transform', 'translate(1,10)') .style('stroke-opacity','.9') .style("stroke-width", '.3') .style("stroke", "peru") .style('fill','ivory') .style('fill-opacity','1') .on('click',vendMacClick) function vendMacClick (event, d) { svg.append("rect") .attr("class", "pop_vend_Rect") .attr("x", 144) .attr("y", 158) .attr("rx", 10) .attr("ry", 10) .attr("height", 35) .attr("width", 270) .style("fill", "ivory") .style('fill-opacity', '1') .style("stroke-width", 1) .style("stroke", "saddlebrown") .on('click',confrimVend) svg.append("text")//DESTINATION TOKYO .attr("x", "160") .attr("y", "180") .attr("class", "confirm") .style("font-size", '16px') .style('font-weight','bold') .style("fill", 'salmon') .style('fill-opacity','1') .style('font-family',"century gothic") .text('Click here to Confirm Purchase') function confrimVend (event, d) { d3.selectAll('rect.pop_Rect').remove() d3.selectAll('rect.pop_vend_Rect').remove() d3.selectAll('rect.trainRect').remove() d3.selectAll('rect.vendRect').remove() d3.selectAll('text.confirm').remove() d3.selectAll('polyline.vendClick').remove() d3.selectAll('polyline.vmachinecol').remove() d3.selectAll('polyline.vmachine').remove() d3.selectAll('polyline.vmachinebg').remove() } } NoninteractablePolylines(svg, bg_vending_color, "vmachinecol", "1.5px","none", "ivory") NoninteractablePolylines(svg, vendingMachineOutlines, "vmachine", "0.5px","peru", "peru") NoninteractablePolylines(svg, vend_bg_lns, "vmachinebg", "2px","peru", "none") } /* svg.append("rect")//pops up to click on for train destinations .attr("class","trainRect") .attr("x","690") .attr("y",function(d,i){return 810+(i*30)}) .attr("rx","5") .attr("ry","5") .attr("height","30") .attr("width","125")//can we make this adjustable to the length of the name and repeat with each name? .style("fill","ivory") .style('fill-opacity','1') .style("stroke-width","1") .style("stroke","brown") .style('stroke-opacity','.5') */ svg.append("text") .attr("x", "830") .attr("y", "450") .attr("class", "welcome") .style("font-size", '22px') .style('font-weight','bold') .style("fill", 'salmon') .style('fill-opacity','1') .attr('text-anchor','middle') .style('font-family',"century gothic") .text('Hi there! Welcome to:') svg.append('text') .attr('class','currentText') .attr('x','830') .attr('y','500') .style('font-family','julee') .attr('font-size','2em') .attr('fill','brown') .attr('text-anchor','middle') .style('font-weight','bold') .text(d.data.Name) svg.append("text") .attr("x", "830") .attr("y", "560") .attr("class", "welcome") .style("font-size", '22px') .style('font-weight','bold') .style("fill", 'salmon') .style('fill-opacity','1') .attr('text-anchor','middle') .style('font-family',"century gothic") .text('Your Potential Next Stops are:') svg.append("text") .attr("x", "830") .attr("y", "810") .attr("class", "hintText") .style("font-size", '12px') .style('font-weight','regular') .style("fill", 'salmon') .style('fill-opacity','1') .attr('text-anchor','middle') .style('font-family',"century gothic") .text('A little hint to help you choose the best next station:') var wrap = svg.selectAll('text.hintText') .each(function(d,i) {wrap_text(d3.select(this),130)}) svg.append('text') .attr('class','missionText') .attr('x','830') .attr('y','850') .style('font-family','julee') .attr('font-size','1.2em') .attr('fill','brown') .attr('text-anchor','middle') .style('font-weight','light') .text(d.data.Mission) var wrap = svg.selectAll('text.missionText') .each(function(d,i) {wrap_text(d3.select(this),150)}) t.enter().append("text") .data(bulletDests) .enter() //there are more data than elements, this selects them .append("text") .attr('class','destinations') .attr('points',function(d){return d}) .attr('x','830') .attr('y',function(d,i){return 700+(i*30)}) .style('font-family','century gothic') .style('font-size','24px') .style('font-weight','bold')//use 'fill' to change font color .attr('fill','orangered') .attr('text-anchor','middle') .text( function(d){return d.Name}) /*svg .append("text") .attr('x','200') .attr('y','440') .style('font-family','julee') .style('font-size','13px') .style('font-weight','light')//use 'fill' to change font color .attr('fill','peru') .attr('text-anchor','left') .text("train:" + d.data.trainDestination) */ var railOptions = String(d.data.trainDestination) if(railOptions!= null && railOptions.includes(",")){ railOptions = railOptions.split(",") // console.log(railOptions) } var trainDests = [] for (let i = 0; i < railOptions.length; i++) { var index = Number(railOptions[i]) for (let n = 0; n < train_list.length; n++){ if(index==Number(train_list[n].data.indexID)){ // console.log(train_list[n].data.Name) trainDests.push(train_list[n].data) } } } p.enter().append("text") .data(trainDests) .enter() //there are more data than elements, this selects them .append("text") .attr('class','destinations') //.attr('class','icon_rating') .attr('points',function(d){return d}) .attr('x','830') .attr('y',function(d,i){return 600+(i*20)}) .style('font-family','century gothic') .style('font-size','13px') .style('font-weight','bold')//use 'fill' to change font color .attr('fill','orange') .attr('text-anchor','middle') .text(function(d){return d.Name}) } function fillColor(d,i){ var color = 'peru' if(d.data.transportType=='rail'){color = 'orangered' console.log("match")} if(d.data.transportType=='bullet'){color = 'tomato'} return color } function spotsInfo(event,d){ d3.select(this).style('fill','brown') svg.append('line') .attr('class','spotLine') .attr('x1','225') .attr('y1','435') .attr('x2','225') .attr('y2',projection([d.data.Long,d.data.Lat])[1]) .attr('stroke-width','2') .style('stroke-opacity','.5') .attr('stroke','brown') svg.append('line') .attr('class','spotLine') .attr('x1',projection([d.data.Long,d.data.Lat])[0]) .attr('y1',projection([d.data.Long,d.data.Lat])[1]) .attr('x2','225') .attr('y2',projection([d.data.Long,d.data.Lat])[1]) .attr('stroke-width','2') .style('stroke-opacity','.5') .attr('stroke','brown') svg.append("rect") .attr("class","dRect") .attr("x","145") .attr("y","435") .attr("rx","5") .attr("ry","5") .attr("height","65") .attr("width","175") .style("fill","ivory") .style('fill-opacity','1') .style("stroke-width","1") .style("stroke","brown") .style('stroke-opacity','.5') svg .append('text') .attr('class','spotsText') .attr('x','230') .attr('y','452') .style('font-family','julee') .attr('font-size','1em') .attr('fill','brown') .attr('text-anchor','middle ') .style('font-weight','bold') .text(d.data.Name) var wrap = svg.selectAll('text.spotsText') .each(function(d,i) {wrap_text(d3.select(this),135)}) svg .append('text') .attr('class','spotsDes') .attr('x','230') .attr('y','470') .attr('font-family','century gothic') .attr('font-size','.65em') .attr('fill','saddlebrown') .attr('text-anchor','middle ') .text(d.data.funFact) var wrap = svg.selectAll('text.spotsDes') .each(function(d,i) {wrap_text(d3.select(this),150)}) } function spotsInfoOut(event,d){ d3.selectAll('polyline.icon').style('fill',fillColor) d3.selectAll('text.spotsText').remove() d3.selectAll('text.spotsDes').remove() d3.selectAll('text.spotsRate').remove() d3.selectAll('rect.dRect').remove() d3.selectAll('line.spotLine').remove() d3.selectAll('polyline.icon_rating').remove() } //POLYCLICK FOR FIRST MOVE function polyClick(event, d) { var p = svg.selectAll("outlines") d3.selectAll('text.menuText').remove() d3.selectAll('image.dogImage').remove() //Kagoshima Chou if(d.Name =='KKagoshima'){ mutable clickID = 1 //PROMPT BOX svg .append('rect') .attr("class","optionsPrompt") .attr("x","403") .attr("y","400") .attr("rx","10") .attr("ry","10") .attr("height","200") .attr("width","200") .style("fill","ivory") .style('fill-opacity','1') .style("stroke-width","5") .style("stroke","saddlebrown") svg .append('text') .attr("class","fareOptions") .attr('x','400') .attr('y','430') .style('font-family','monospace') .style('font-size','24px') .style('font-weight','regular')//use 'fill' to change font color .attr('fill','saddlebrown') .attr('text-anchor','left') .text('Which transport would you like to take?"') //CREATE BOXES AND CLICKS FOR EACH OPTION //on sheets, for each station, iclude potential stops, add index values, show destiantions using javascript split commannd, have NESTED FOR LOOP that finds matches and prints them all out //when i = 1 then, find destinations that match // click on icon, click, have vairable that = to the split of destination id, loop thorugh ID, for each ID loop thorugh google sheet, and find maytch destination ID = to matching indx ids, then those index ID that corrosponf iwth the stations gets put into a temp list (a variable), add timer // make vending machine graphic, simple game // player is against the clock, energy, and money //by end of spring break, on tecnhical side, click on icon and be able to run though destination ID and balc black blac // make vending machine icon, popup that it interactive if(d.trainFare){ function spendMoney(event,d){ mutable wallet = mutable wallet -d.price } } //Nagasaki if(d.Name =='Nagasaki'){ mutable clickID = 2 } //Takeo-Onsen if(d.Name =='Takeo-Onsen'){ mutable clickID = 3 //PROMPT BOX } // TRAINFARE OPTION /* if(trainfareoptionselcted){ } //CABFARE OPTION //if(cabfareoptionselcted){ } //WALK OPTION // if(walkoptionselcted){ }*/ } //Shin-Tosu if(d.Name =='Tosu'){ mutable clickID = 4 } //Hakata if(d.Name =='Hakata'){ mutable clickID = 5 } //Hiroshima if(d.Name =='Hiroshima'){ mutable clickID = 6 } //Kyoto if(d.Name =='Kyoto'){ mutable clickID = 7 } //Shin-Osaka if(d.Name =='Shin-Osaka'){ mutable clickID = 8 } //Nagoya if(d.Name =='Shin-Osaka'){ mutable clickID = 9 } //Tsuruga if(d.Name =='Tsuruga'){ mutable clickID = 10 } //Kanazawa if(d.Name =='Kanazawa'){ mutable clickID = 11 } //Nagano if(d.Name =='Nagano'){ mutable clickID = 12 } //Shin-Yokohama if(d.Name =='Shin-Yokohama'){ mutable clickID = 13 } //Tokyo if(d.Name =='Tokyo'){ mutable clickID = 14 } //ÅŒmiya if(d.Name =='ÅŒmiya'){ mutable clickID = 15 } //Takasaki if(d.Name =='Takasaki'){ mutable clickID = 16 } //Niigata if(d.Name =='Niigata'){ mutable clickID = 17 } //Fukushima if(d.Name =='Fukushima'){ mutable clickID = 18 } //Sendai if(d.Name =='Sendai'){ mutable clickID = 19 } //Yamagata if(d.Name =='Yamagata'){ mutable clickID = 20 } //ShinjÅ if(d.Name =='ShinjÅ'){ mutable clickID = 21 } //Akita if(d.Name =='Akita'){ mutable clickID = 22 } //Morioka if(d.Name =='Morioka'){ mutable clickID = 23 } //Shin-Aomori if(d.Name =='Shin-Aomori'){ mutable clickID = 24 } //Shin-Hakodate-Hokuto if(d.Name =='Shin-Hakodate-Hokuto'){ mutable clickID = 25 } //Sapporo if(d.Name =='Shin-Hakodate-Hokuto'){ mutable clickID = 26 } } return svg.node(); }2f:Ta4f,// from https://stackoverflow.com/questions/63288390/font-style-of-text-in-svg-not-propagating-to-png-on-download /* Only tested on a really limited set of fonts, can very well not work This should be taken as an proof of concept rather than a solid script. @Params : an url pointing to an embed Google Font stylesheet @Returns : a Promise, fulfiled with all the cssRules converted to dataURI as an Array */ function GFontToDataURI(url) { return fetch(url) // first fecth the embed stylesheet page .then((resp) => resp.text()) // we only need the text of it .then((text) => { // now we need to parse the CSSruleSets contained // but chrome doesn't support styleSheets in DOMParsed docs... let s = document.createElement("style"); s.innerHTML = text; document.head.appendChild(s); let styleSheet = s.sheet; // this will help us to keep track of the rules and the original urls let FontRule = (rule) => { let src = rule.style.getPropertyValue("src") || rule.style.cssText.match(/url$.*?$/g)[0]; if (!src) return null; let url = src.split("url(")[1].split(")")[0]; return { rule: rule, src: src, url: url.replace(/\"/g, "") }; }; let fontRules = [], fontProms = []; // iterate through all the cssRules of the embedded doc // Edge doesn't make CSSRuleList enumerable... for (let i = 0; i < styleSheet.cssRules.length; i++) { let r = styleSheet.cssRules[i]; let fR = FontRule(r); if (!fR) { continue; } fontRules.push(fR); fontProms.push( fetch(fR.url) // fetch the actual font-file (.woff) .then((resp) => resp.blob()) .then((blob) => { return new Promise((resolve) => { // we have to return it as a dataURI // because for whatever reason, // browser are afraid of blobURI in too... let f = new FileReader(); f.onload = (e) => resolve(f.result); f.readAsDataURL(blob); }); }) .then((dataURL) => { // now that we have our dataURI version, // we can replace the original URI with it // and we return the full rule's cssText return fR.rule.cssText.replace(fR.url, dataURL); }) ); } document.head.removeChild(s); // clean up return Promise.all(fontProms); // wait for all this has been done }); }30:[{"id":"9ea09e5df0550841218dcdbe759f5582f7e38e7574debbb26fa11d2a505968b706ed284a06fdf37b237f8949af1d4d9695ed5d54dcb4b5fa072948961a480260","href":"https://static.observableusercontent.com/files/9ea09e5df0550841218dcdbe759f5582f7e38e7574debbb26fa11d2a505968b706ed284a06fdf37b237f8949af1d4d9695ed5d54dcb4b5fa072948961a480260","name":"btm_circs.txt","type":"text/plain","lastModified":1712124763811.691,"size":58890},{"id":"840de4fa6a9a7ed09283817774f1d85a2dd7b7207ba6f5093d2bdc4ebd5d2c5dad1c518fe895bb168bde894e6abe0f69e801aabb2f29318eb520a5dcd161e432","href":"https://static.observableusercontent.com/files/840de4fa6a9a7ed09283817774f1d85a2dd7b7207ba6f5093d2bdc4ebd5d2c5dad1c518fe895bb168bde894e6abe0f69e801aabb2f29318eb520a5dcd161e432","name":"sbs_lines.geojson","type":"application/geo+json","lastModified":1712130441275.482,"size":227213},{"id":"3fbc869b66dcd01adc54cf9546bd208dee89f84f956a2ab1d77b73fcb053f9bf2901786520d61d6544e9608723ef02f08cec192c4101ec6c399c3f0b8c079076","href":"https://static.observableusercontent.com/files/3fbc869b66dcd01adc54cf9546bd208dee89f84f956a2ab1d77b73fcb053f9bf2901786520d61d6544e9608723ef02f08cec192c4101ec6c399c3f0b8c079076","name":"yinyang_lg@1.txt","type":"text/plain","lastModified":1709127535746.414,"size":2440808},{"id":"ded276650c2ed2460bec82fbfd3963a36ab2a68e7e5a1283d5bf63c3344f7b6f8ce218706ed3422e54262c1dfac6c2d7f6866b09e0862051f28dca67b9c425b0","href":"https://static.observableusercontent.com/files/ded276650c2ed2460bec82fbfd3963a36ab2a68e7e5a1283d5bf63c3344f7b6f8ce218706ed3422e54262c1dfac6c2d7f6866b09e0862051f28dca67b9c425b0","name":"dashboard-border1.txt","type":"text/plain","lastModified":1709127535746.414,"size":6060965},{"id":"773f31335d4336bc7f5ceb49cf5524786afb387f276742a3e1a87191808c7bf918126e31ed83c31ddc5264212eced77994319585fe0cf5085e418103095dccfc","href":"https://static.observableusercontent.com/files/773f31335d4336bc7f5ceb49cf5524786afb387f276742a3e1a87191808c7bf918126e31ed83c31ddc5264212eced77994319585fe0cf5085e418103095dccfc","name":"subway_lines.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":27570},{"id":"7b9a69a0561d7bd96aff56475982b168e21e12bbbd6ca016d05329e423d72f93ad414cd770e2b9b48d8f771668a2620609ccbc165eafa1f01f85356405aee2b6","href":"https://static.observableusercontent.com/files/7b9a69a0561d7bd96aff56475982b168e21e12bbbd6ca016d05329e423d72f93ad414cd770e2b9b48d8f771668a2620609ccbc165eafa1f01f85356405aee2b6","name":"bldgs.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":1529909},{"id":"f7e11a65c6893a77bea6b06074b4cc09bd60cd43fd3a063c46f216e4acccfa96c206444c91a32cbe7d8e16638ca7dd2b4894cf642465b14408386f89f9138e79","href":"https://static.observableusercontent.com/files/f7e11a65c6893a77bea6b06074b4cc09bd60cd43fd3a063c46f216e4acccfa96c206444c91a32cbe7d8e16638ca7dd2b4894cf642465b14408386f89f9138e79","name":"start button@2.txt","type":"text/plain","lastModified":1709127535746.414,"size":560295},{"id":"f7e11a65c6893a77bea6b06074b4cc09bd60cd43fd3a063c46f216e4acccfa96c206444c91a32cbe7d8e16638ca7dd2b4894cf642465b14408386f89f9138e79","href":"https://static.observableusercontent.com/files/f7e11a65c6893a77bea6b06074b4cc09bd60cd43fd3a063c46f216e4acccfa96c206444c91a32cbe7d8e16638ca7dd2b4894cf642465b14408386f89f9138e79","name":"start button@1.txt","type":"text/plain","lastModified":1709127535746.414,"size":560295},{"id":"c815abfa417f5a5c25db0a8280ade862ef68cb0178236d93f0c6cfcc3e7a8e836fba4ef61924d873aae8fdc625353834c24ab1432221fb24d6e6035b8df3d1a4","href":"https://static.observableusercontent.com/files/c815abfa417f5a5c25db0a8280ade862ef68cb0178236d93f0c6cfcc3e7a8e836fba4ef61924d873aae8fdc625353834c24ab1432221fb24d6e6035b8df3d1a4","name":"train_icon@1.txt","type":"text/plain","lastModified":1709127535746.414,"size":73394},{"id":"b0d3acc0996405daa7de979ec7eb4344b74db260936d633a6a5bca65781d67fd551cfac3292dd3478616578f08be35120fa3e3d12755ddeeb4f656bf3180d9ba","href":"https://static.observableusercontent.com/files/b0d3acc0996405daa7de979ec7eb4344b74db260936d633a6a5bca65781d67fd551cfac3292dd3478616578f08be35120fa3e3d12755ddeeb4f656bf3180d9ba","name":"sbs_line_2.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":45736},{"id":"f1968da03c6068214593f002790a5ee1da2268518cbc756621af42214ad081443551a3b0d39927d8ed494cfe81a7067c49e8041c136ffafeb4d2b7931304678e","href":"https://static.observableusercontent.com/files/f1968da03c6068214593f002790a5ee1da2268518cbc756621af42214ad081443551a3b0d39927d8ed494cfe81a7067c49e8041c136ffafeb4d2b7931304678e","name":"sbs_line_1.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":159228},{"id":"d3aa1ba2ad3e0431102ffd667a7b1c102742b7c31f203d3f025cf9afe68a4fc80e49ab1f04119412027bacc5794f8c8cd964405d38fad6634a54a51a8efc1dc5","href":"https://static.observableusercontent.com/files/d3aa1ba2ad3e0431102ffd667a7b1c102742b7c31f203d3f025cf9afe68a4fc80e49ab1f04119412027bacc5794f8c8cd964405d38fad6634a54a51a8efc1dc5","name":"sbs_stations.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":4904},{"id":"f18c659b32896e2a5443769c2d8ee303a50f907a4cbeb9a604acbc7b8162ddb77389fdbfb1248a2659a527ed8b1501abc89da4dbb818df73b6ba0eddc15e2d58","href":"https://static.observableusercontent.com/files/f18c659b32896e2a5443769c2d8ee303a50f907a4cbeb9a604acbc7b8162ddb77389fdbfb1248a2659a527ed8b1501abc89da4dbb818df73b6ba0eddc15e2d58","name":"vending_click_3.txt","type":"text/plain","lastModified":1713926011109.215,"size":1436},{"id":"6964db1bd943d5255385c6d8f14d4394c9fd86205430923824caeb5e366a7e3b2b80410f30caf6e0b7b2ffe48c12baff5a54add0cf42fe024d83b90b697736cc","href":"https://static.observableusercontent.com/files/6964db1bd943d5255385c6d8f14d4394c9fd86205430923824caeb5e366a7e3b2b80410f30caf6e0b7b2ffe48c12baff5a54add0cf42fe024d83b90b697736cc","name":"start_button_bg.txt","type":"text/plain","lastModified":1713926345292.44,"size":84060},{"id":"626dad8d68c6c147f2d9f38430375ac0aaf1319f4618cdc2b9a5133fade44e214d71b4c8c3be7b710dc59b077242ce33b27fd102dea83f46c4c5aebb1257d4aa","href":"https://static.observableusercontent.com/files/626dad8d68c6c147f2d9f38430375ac0aaf1319f4618cdc2b9a5133fade44e214d71b4c8c3be7b710dc59b077242ce33b27fd102dea83f46c4c5aebb1257d4aa","name":"start_button_bg@1.txt","type":"text/plain","lastModified":1713926509014.875,"size":56060},{"id":"49066bd6a2c1d07b628fae420992f2882a92c043de9fd198ff14e62a866ec00128ecc149ba3b7cd1b2887a902ae0551d0b338f6360dbc3823f63f1b05feef2e8","href":"https://static.observableusercontent.com/files/49066bd6a2c1d07b628fae420992f2882a92c043de9fd198ff14e62a866ec00128ecc149ba3b7cd1b2887a902ae0551d0b338f6360dbc3823f63f1b05feef2e8","name":"test_dash@1.txt","type":"text/plain","lastModified":1709127535746.414,"size":234},{"id":"0c0af3bd1228e0526c507520385a600c9200a5402f802153b0ea694ebd8a4b7d5b352f3dd99af356beb2e0224ab0aa7225c68a499e6085f942515a8af1b9f0e4","href":"https://static.observableusercontent.com/files/0c0af3bd1228e0526c507520385a600c9200a5402f802153b0ea694ebd8a4b7d5b352f3dd99af356beb2e0224ab0aa7225c68a499e6085f942515a8af1b9f0e4","name":"JP bbox sm.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":641},{"id":"ac25177e7d798146ed56b747059760bea6b9b3634267690a897ed1297c918a06cd46fbcebe30fd971482fa08c6bdcc0fbde07944ac34802af9b7384be808bf4e","href":"https://static.observableusercontent.com/files/ac25177e7d798146ed56b747059760bea6b9b3634267690a897ed1297c918a06cd46fbcebe30fd971482fa08c6bdcc0fbde07944ac34802af9b7384be808bf4e","name":"jp coastline 2.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":3015379},{"id":"37b03ec75796c4ca6a91f31df6031554453bb41cf9d11a59e0b968d0f315dfc11d9f2d9fb16df6d0f090a0a5c96e3f936713ecc4f1b7ef26975491560d8e2b3f","href":"https://static.observableusercontent.com/files/37b03ec75796c4ca6a91f31df6031554453bb41cf9d11a59e0b968d0f315dfc11d9f2d9fb16df6d0f090a0a5c96e3f936713ecc4f1b7ef26975491560d8e2b3f","name":"jp rail.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":4677758},{"id":"8f1b1276af7dea1f223a344fcebb1a6463ab8a4b4d61e4513fae6cd45f5e7d3f7ed93b633b089aed7e1c9802abc89d84bedcbc619e4d30adb11d63dad828c233","href":"https://static.observableusercontent.com/files/8f1b1276af7dea1f223a344fcebb1a6463ab8a4b4d61e4513fae6cd45f5e7d3f7ed93b633b089aed7e1c9802abc89d84bedcbc619e4d30adb11d63dad828c233","name":"JP bbox.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":638},{"id":"f7c7fc079efe279a0c0dc6473f1982f0c64ff754c36e37677f34b54b5d934aead76e159f52e13ceb61f2d6f2ecb0e5849f0711a664115be04354e5f8800e9399","href":"https://static.observableusercontent.com/files/f7c7fc079efe279a0c0dc6473f1982f0c64ff754c36e37677f34b54b5d934aead76e159f52e13ceb61f2d6f2ecb0e5849f0711a664115be04354e5f8800e9399","name":"jp roads.geojson","type":"application/geo+json","lastModified":1709127535746.414,"size":23947936},{"id":"40f286fece318578d5699cee64dd68157602a6e19c459458bdcb5a65f5c9d5b340c7a89da56f98c7418bd30ce02b057f11ad4eaebb33af53a243f3c7ceb199d4","href":"https://static.observableusercontent.com/files/40f286fece318578d5699cee64dd68157602a6e19c459458bdcb5a65f5c9d5b340c7a89da56f98c7418bd30ce02b057f11ad4eaebb33af53a243f3c7ceb199d4","name":"staricon-2.txt","type":"text/plain","lastModified":1709133818623.021,"size":2496},{"id":"b4ad30de6a8e2f1511b78f5db9522df2a825c58234cbdbd20bd947815b46529928cc3759e2d35feeeeaf56d9584ea7e3273c25e864be81aa87bdc742cd881d82","href":"https://static.observableusercontent.com/files/b4ad30de6a8e2f1511b78f5db9522df2a825c58234cbdbd20bd947815b46529928cc3759e2d35feeeeaf56d9584ea7e3273c25e864be81aa87bdc742cd881d82","name":"train_icon3.txt","type":"text/plain","lastModified":1713320242160.421,"size":144326},{"id":"f322fc53083e8cb7a58b4961dcbac2e35488f0618d8ce0693ac237043113217197fe64054c118c6f52d7e559c4e5d0650f579636f5c3400dd376a5e375bb8ecd","href":"https://static.observableusercontent.com/files/f322fc53083e8cb7a58b4961dcbac2e35488f0618d8ce0693ac237043113217197fe64054c118c6f52d7e559c4e5d0650f579636f5c3400dd376a5e375bb8ecd","name":"train_icon3@1.txt","type":"text/plain","lastModified":1713320351073.346,"size":144178},{"id":"a1353654b26ec3bba44aa1dbef6e85f006d4ecfd41e62a784808178429b15794e266319a88aee00eb1d454a28e2617f41041705b2b443cd85981fc0fee997e3a","href":"https://static.observableusercontent.com/files/a1353654b26ec3bba44aa1dbef6e85f006d4ecfd41e62a784808178429b15794e266319a88aee00eb1d454a28e2617f41041705b2b443cd85981fc0fee997e3a","name":"start button.txt","type":"text/plain","lastModified":1711546104357.294,"size":508},{"id":"57f5422494810b9ea5043d14d4f12df8f27dee78604ac9a5e621e32103b8afce1571bb6dc2f4046bb4ae4ff8b3b99ef1f81a43762589e4deeca027defbd9343c","href":"https://static.observableusercontent.com/files/57f5422494810b9ea5043d14d4f12df8f27dee78604ac9a5e621e32103b8afce1571bb6dc2f4046bb4ae4ff8b3b99ef1f81a43762589e4deeca027defbd9343c","name":"twm@1.txt","type":"text/plain","lastModified":1711547103965.933,"size":1578},{"id":"491e1cc5bcb406895aaaa9544c87e4af8570212e41dfee3defedf385431095b10d7e4bd93dd17053d3775a90f891528e9066556c7336e06bc69470c560174040","href":"https://static.observableusercontent.com/files/491e1cc5bcb406895aaaa9544c87e4af8570212e41dfee3defedf385431095b10d7e4bd93dd17053d3775a90f891528e9066556c7336e06bc69470c560174040","name":"start button@3.txt","type":"text/plain","lastModified":1711547104080.11,"size":526},{"id":"d61d46f5b75f7e42f2f6b2f556de2454566db6e006ffb14d4d2e63e69caa1c5a528e4485a2a3c816d8bb191dd5fc4b2cbd564dd5084a80a385e335409891eea1","href":"https://static.observableusercontent.com/files/d61d46f5b75f7e42f2f6b2f556de2454566db6e006ffb14d4d2e63e69caa1c5a528e4485a2a3c816d8bb191dd5fc4b2cbd564dd5084a80a385e335409891eea1","name":"border@1.txt","type":"text/plain","lastModified":1711547104102.167,"size":5916},{"id":"2ae3c11adb3cdfd82a7419c53287d05f437b7e8642b28c5efd735136b6a1dc1df0bf2ca4a5619b455b21ba6c4cc3a268badf5e391850eec098eede59e9c08a56","href":"https://static.observableusercontent.com/files/2ae3c11adb3cdfd82a7419c53287d05f437b7e8642b28c5efd735136b6a1dc1df0bf2ca4a5619b455b21ba6c4cc3a268badf5e391850eec098eede59e9c08a56","name":"reset button@1.txt","type":"text/plain","lastModified":1711547104085.552,"size":526},{"id":"e921bd437db503db46dc8bf0e1d228a24f67cc6e7580462f02ec2833e30e202283543c757fe3bc94592b27bcb3502de1cc4eded09fd1f9caeb4e2c26acec5e21","href":"https://static.observableusercontent.com/files/e921bd437db503db46dc8bf0e1d228a24f67cc6e7580462f02ec2833e30e202283543c757fe3bc94592b27bcb3502de1cc4eded09fd1f9caeb4e2c26acec5e21","name":"bg_dashboard.txt","type":"text/plain","lastModified":1712721205283.867,"size":95840},{"id":"1f1306ffa567ad26a3c8c5a6d8edf39b2756919ef3896c49df96d671b9ed8d6699608571b26a0460cd00e08a4e0581f434665b2c8c23eb60a5c30cd78545944a","href":"https://static.observableusercontent.com/files/1f1306ffa567ad26a3c8c5a6d8edf39b2756919ef3896c49df96d671b9ed8d6699608571b26a0460cd00e08a4e0581f434665b2c8c23eb60a5c30cd78545944a","name":"vending_macLines.txt","type":"text/plain","lastModified":1713852742467.816,"size":980790},{"id":"d67d90f17a71c06562c2bd90182821edd0bb110215654c1237920d14afe0c6cbaff3c4c6b6eba6ab31b8fc63bfc69626109c08647fb6744d7c8a1ded37f24c04","href":"https://static.observableusercontent.com/files/d67d90f17a71c06562c2bd90182821edd0bb110215654c1237920d14afe0c6cbaff3c4c6b6eba6ab31b8fc63bfc69626109c08647fb6744d7c8a1ded37f24c04","name":"bg_vending_color.txt","type":"text/plain","lastModified":1713852855964.613,"size":235560},{"id":"06b150c5fce72b7a3b63bc7f50af0e15f0648e7bd66478408b22720600b7c96dca0a831e990f277911b8f3cc6f1bad0d78085fbdfc83b7169f4f303cd0a2be72","href":"https://static.observableusercontent.com/files/06b150c5fce72b7a3b63bc7f50af0e15f0648e7bd66478408b22720600b7c96dca0a831e990f277911b8f3cc6f1bad0d78085fbdfc83b7169f4f303cd0a2be72","name":"vend_bg_lns.txt","type":"text/plain","lastModified":1713853255498.983,"size":392600},{"id":"2893a503454f8b553e63220b1a6e098763b45b3db85192f1e97599df3654be30e6b84e55ac1984c75a3ca392cb3cabf27d25649de05e58d6ae09126009ede34a","href":"https://static.observableusercontent.com/files/2893a503454f8b553e63220b1a6e098763b45b3db85192f1e97599df3654be30e6b84e55ac1984c75a3ca392cb3cabf27d25649de05e58d6ae09126009ede34a","name":"vending_macLines@1.txt","type":"text/plain","lastModified":1713853653668.07,"size":980616},{"id":"e21ad9b8d5c808f29eb48e0f8f208b6cb853503dfb9ed39da6896550e2ae2e27faba512722cc6ef4e786f93c860b6601c5c30381832340c48e3b32045224dcb0","href":"https://static.observableusercontent.com/files/e21ad9b8d5c808f29eb48e0f8f208b6cb853503dfb9ed39da6896550e2ae2e27faba512722cc6ef4e786f93c860b6601c5c30381832340c48e3b32045224dcb0","name":"vend_bg_lns@1.txt","type":"text/plain","lastModified":1713853723067.105,"size":410299},{"id":"a9243dcddd87d90b989dd9819d0c10a5cbc657455800b7eab64e5ed1122c1e06f6a956f0a536fa3bce84f580121799caa1f9aa13de53bf041d373ce6bd091b26","href":"https://static.observableusercontent.com/files/a9243dcddd87d90b989dd9819d0c10a5cbc657455800b7eab64e5ed1122c1e06f6a956f0a536fa3bce84f580121799caa1f9aa13de53bf041d373ce6bd091b26","name":"vending machine clicks3.txt","type":"text/plain","lastModified":1713853914096.08,"size":217398},{"id":"2cc7b27eefc396db007b19d2d024d2516dee20c40b1e92b47a9457921dcdd84fecabcc8ec85783eaaa4f2714aa9c9ed6c02d892e13633aaf24a90c0be736493b","href":"https://static.observableusercontent.com/files/2cc7b27eefc396db007b19d2d024d2516dee20c40b1e92b47a9457921dcdd84fecabcc8ec85783eaaa4f2714aa9c9ed6c02d892e13633aaf24a90c0be736493b","name":"reset_lns.txt","type":"text/plain","lastModified":1713854867753.304,"size":159774},{"id":"2a3b3897f6d91a66735b060817d6c95a4d81c6d70babff8206413c0fbacce9800a624409d5ff35f86f2a6cc0599405cadf5f031cc15ffc76fdebc76dc67979e3","href":"https://static.observableusercontent.com/files/2a3b3897f6d91a66735b060817d6c95a4d81c6d70babff8206413c0fbacce9800a624409d5ff35f86f2a6cc0599405cadf5f031cc15ffc76fdebc76dc67979e3","name":"reset_bg.txt","type":"text/plain","lastModified":1713854901901.428,"size":19636}] 2c:{"id":"7d9409902a3d85e7","slug":null,"title":"Ticket to Ride - Japan","thumbnail":"90451c2a341bf50b9fcfb721337bfe4b8da015f58c842cb6a6602c5d20a03713","access_level":"public","create_time":"$D2024-02-28T13:38:55.746Z","update_time":"$D2024-04-29T17:27:12.430Z","view_time":null,"first_public_time":"$D2024-03-12T18:35:17.922Z","fork":{"id":"b767b914a2e0f9c2","slug":null,"title":"Ticket to Ride - Japan","owner":{"id":"80c09fced13398bf","login":"nwright","name":"Nora Wright"}},"stars":0,"starred":false,"owner":{"type":"team","id":"acc445358bddb9bd","login":"victoria-webb-ws","name":"Victoria Webb's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/bd1f49bb642946e3e8d1e6ee2b845fa9034db35eb070da2262610f81776cf362","tier":"starter_2024"},"version":1401,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bac87709bb900697","login":"victoria-webb","name":"Victoria Webb","avatar_url":"https://avatars-next.observableusercontent.com/31ccdaab09625fdd0829028ac621a26e8d8fc9868bfd9540ea0e9a57138b5367","tier":null},{"type":"individual","id":"df84799035553ff3","login":"fleeth","name":"Fleet Hower","avatar_url":"https://avatars-next.observableusercontent.com/bac6c76c1e7bcb5ac4be02b2a91e9bee64ecbb953fb1e9d52d6563dcb78eefca","tier":null}],"members":[{"type":"individual","id":"bac87709bb900697","login":"victoria-webb","name":"Victoria Webb","avatar_url":"https://avatars-next.observableusercontent.com/31ccdaab09625fdd0829028ac621a26e8d8fc9868bfd9540ea0e9a57138b5367","tier":null,"role":"editor"},{"type":"team","id":"acc445358bddb9bd","login":"victoria-webb-ws","name":"Victoria Webb's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/bd1f49bb642946e3e8d1e6ee2b845fa9034db35eb070da2262610f81776cf362","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Ticket to Ride - Japan","cells":[{"id":11,"value":"# Ticket to Ride - Japan","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":887,"value":"mutable wallet= 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1398,"value":"mutable customerSatisfaction= 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"mutable clickID = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":838,"value":"startmoney= 150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":994,"value":"border11 = FileAttachment(\"border@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1035,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1302,"value":"start_button_bg = FileAttachment(\"start_button_bg@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1252,"value":"reset_lns = FileAttachment(\"reset_lns.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1254,"value":"resetClick = FileAttachment(\"reset_bg.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1238,"value":"vendingClicks = FileAttachment(\"vending machine clicks3.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1244,"value":"vendingLines = {\n\n var list = []\n \n for (let i = 0; i < vendingClicks.length; i=i+2) {\n \n list.push({geo:vendingClicks[i],id:Number(vendingClicks[i+1])})\n \n }\nreturn list \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1230,"value":"vend_bg_lns = FileAttachment(\"vend_bg_lns@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1219,"value":"vendingMachineOutlines = FileAttachment(\"vending_macLines@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1223,"value":"bg_vending_color = FileAttachment(\"bg_vending_color.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"bg_dashboard = FileAttachment(\"bg_dashboard.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"Plot.plot({\n marks: [\n Plot.auto(border11, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"resetButton1 = FileAttachment(\"reset button@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":996,"value":"startButton3 = FileAttachment(\"start button@3.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":997,"value":"twm1 = FileAttachment(\"twm@1.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1017,"value":"btm_circs = FileAttachment(\"btm_circs.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":875,"value":"starIcon = {\n\n const width = 90,\n height = 60;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-40, -30, width, height]);\n\n var p = svg.selectAll(\"polyline\")\n .data(staricon2)\n .enter() //there are more data than elements, this selects them\n .append(\"polyline\")\n .attr('points',function(d){return d})\n .style('fill','black')\n //.style('stroke','black')\n //.style('stroke-width','3')\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":872,"value":"staricon2 = FileAttachment(\"staricon-2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":864,"value":"/*thereWillBeLineWorkEventually = {\n\n var list = lines \n \n var spreadsheet = trainPRices \n \n var cleanLines = []\n \n for (let i = 0; i < list.length-1; i=i+2) {\n var id = list[i+1][0]\n var idNum = String(id) //use this line if your ids are words\n //idNum = Number(id) use this line if your ids are numbers\n\n //spreadsheet variables\n var Name\n var trainFare\n var cabFare\n var Walk\n \n \n //looping through spreadsheet\n for (let k = 0; k < spreadsheet.length;k++) {\n if(idNum==spreadsheet[k].Name){\n console.log(\"match!!!!!!\")\n Name=spreadsheet[k].Name\n trainFare=spreadsheet[k].trainFare\n cabFare=spreadsheet[k].cabFare\n Walk=spreadsheet[k].Walk\n\n \n }\n } \n //tying spreadsheet data to var\n cleanLines.push({pts:list[i], Name:Name, trainFare:trainFare, cabFare:cabFare, Walk:Walk})//add features to our final list of objects\n \n }\n\n\nreturn cleanLines\n}*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"lantern1 = FileAttachment(\"lantern1@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":721,"value":"train_list = {\n\n ///create empty list\n var list = []\n\n ///loop through google sheets list\n for (let i = 0; i < trainPrices.length; i++) {\n //function to add item to a list\n list.push({data:trainPrices[i],pts:train_icon})\n } \n \n //add icon points to each google sheet item\n ////addd combined data to empty list\n\n\n //return new list\n return list\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"vend_list = {\n\n ///create empty list\n var list = []\n\n ///loop through google sheets list\n for (let i = 0; i < vendPrices.length; i++) {\n //function to add item to a list\n list.push({data:vendPrices[i],pts:vendingClicks})\n } \n \n //add icon points to each google sheet item\n ////addd combined data to empty list\n\n\n //return new list\n return list\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"jpBboxSm = FileAttachment(\"JP bbox sm.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":714,"value":"train_icon = FileAttachment(\"train_icon3@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"startButton = FileAttachment(\"start button@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":609,"value":"yinyang = FileAttachment(\"yinyang_lg@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"jpRail = FileAttachment(\"jp rail.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1019,"value":"sbs_lines = FileAttachment(\"sbs_lines.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":698,"value":"sbs_line_1 = FileAttachment(\"sbs_line_1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"sbs_line_2 = FileAttachment(\"sbs_line_2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"jpRoads = FileAttachment(\"jp roads.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"outline = FileAttachment(\"jp coastline 2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"subSts = FileAttachment(\"sbs_stations.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"bldgs = FileAttachment(\"bldgs.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"bbox = FileAttachment(\"start button@1.txt\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"subLns = FileAttachment(\"subway_lines.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"jpBbox = FileAttachment(\"JP bbox.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1278,"value":"vendingPrices_list = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTfD7shp-toV4RzZ_GvIf0fwuRMCFtrwwcws3ISI1GXHWTv91NpNgUyg0FMfb7FC7BP3S1HJU4iPq6A/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"vendPrices= d3.csv(vendingPrices_list,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":830,"value":"trainPrices_link = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQp-GX3-4p9F8r6f7WAlikT7YNKkyCbgjoUOIXXGcyIv9IpAMpBnGsDLY7aWdSrQggz-4eb9rpPTOqg/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"trainPrices= d3.csv(trainPrices_link,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"spots_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQMcrgGRcOEhX10HqQdfRhR3At8QhoTn7Xomq_CG8CjEV31x_y_pQlme-H5NDyF09KjVj34ChvnuOow/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"spots = d3.csv(spots_link,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":724,"value":"stations_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRwDH59vQ1I9Zmq75zPYsFeUxcc7kUZWICOQb-G0SU0dn0CF6qXaHMvwexeYBx7CA7BHRlUAkr6AIKm/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":726,"value":"stations = d3.csv(stations_link,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"julee = ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":673,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"GFontToDataURI(\n // \"https://fonts.googleapis.com/css2?family=Julee&display=swap\"\n \"https://fonts.googleapis.com/css2?family=Julee&display=swap\"\n )\n .then((cssRules) => {\n let fontRules = cssRules.join(\"\\n\");\n svg\n .append(\"defs\")\n .append(\"style\")\n .attr(\"type\", \"text/css\")\n .text(fontRules);\n console.log(\"Added Font\");\n })\n .catch((reason) => console.log(reason));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"patrickHand = \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":578,"value":"comic neau = \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":736,"value":"pixelify = \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":397,"value":"test_dash = FileAttachment(\"test_dash@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"border1 = FileAttachment(\"dashboard-border1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1296,"value":"vending_click = FileAttachment(\"vending_click_3.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"