30:Td90,simulation = { //wipe screen d3.select("#transitMapGroup").remove(); function clear() { //clear history arrays - not running these lines will enable persistence between sim runs. history.satisfaction = []; history.passengers = []; history.links = []; history.stations = []; history.traffic = []; history.noise = []; history.co2 = []; history.subsidy = []; history.upgradeNumber = []; history.finance = []; } await clear(); await createStations(); await createLinks(); await createPassengers(); await createWorld(); let generation = 0; while (generation < simulationSteps) { //wait between generations for animations to complete await Promises.delay(genTime); //create new generation in satisfaction history history.satisfaction.push({ generationNumber: generation, passengerSatisfaction: [], walkSatisfaction: [], bikeSatisfaction: [], trainSatisfaction: [], carSatisfaction: [] }); history.traffic.push({ generationNumber: generation, roadTraffic: [] }); history.noise.push({ generationNumber: generation, roadNoise: [] }); history.co2.push({ generationNumber: generation, carbonEmission: [] }); history.subsidy.push({ generationNumber: generation, subsidizedMoney: [] }); history.upgradeNumber.push({ generationNumber: generation, upgradeNumber: [] }); history.finance.push({ generationNumber: generation, fixedCost: 0, totalVariableCost: 0, variableCost: 0, budgetBalance: 0 }); //iterate through passenger choices for (let transit = 0; transit < transitsPerSimulation; transit++) { let traveler = move(); history.satisfaction[generation].passengerSatisfaction.push( traveler.satisfaction.toFixed(2) ); if (traveler.lastMode === "walk") { history.satisfaction[generation].walkSatisfaction.push( traveler.satisfaction.toFixed(2) ); } else if (traveler.lastMode === "bike") { history.satisfaction[generation].bikeSatisfaction.push( traveler.satisfaction.toFixed(2) ); } else if (traveler.lastMode === "train") { history.satisfaction[generation].trainSatisfaction.push( traveler.satisfaction.toFixed(2) ); } else { history.satisfaction[generation].carSatisfaction.push( traveler.satisfaction.toFixed(2) ); } } for (let i = 0; i < history.links.length; i++) { history.traffic[generation].roadTraffic.push(history.links[i].traffic); history.noise[generation].roadNoise.push(history.links[i].noise); } for (let i = 0; i < history.passengers.length; i++) { history.co2[generation].carbonEmission.push( history.passengers[i].carbonEmission ); history.subsidy[generation].subsidizedMoney.push( history.passengers[i].subsidizedMoney ); } for (let i = 0; i < history.stations.length; i++) { history.upgradeNumber[generation].upgradeNumber.push( history.stations[i].upgraded ); } updateLineChart(generation); updateSideEffectMonitor(generation); financeBalance(generation); generation++; yield "Simulating generation " + generation + " out of " + simulationSteps + " generations total."; } }31:T1284,move = function() { for (let i = 0; i < history.stations.length; i++) { if (history.stations[i].popularity <= 0) { history.stations[i].popularity = 0; } } let fromStation = pick(history.stations); let toStation = pick(history.stations); //ensure start and end are not the same station while (fromStation == toStation) { fromStation = pick(history.stations); toStation = pick(history.stations); } let distance = getDistance( fromStation.x, fromStation.y, toStation.x, toStation.y ); // Choose a traveler at random let traveler = history.passengers[Math.floor(Math.random() * passengerCount)]; let color = "white"; let speed = genTime; let cost = 0; let bikeCost = 3 - discountBikeFare; let trainCost = 3 - discountTrainFare; let carCost = 9 + 3 + 5 - (subsidizeCarprice / (7 * 365) - discountPatrol + increasePatrol); let carbonEmission = 0; // If a train is available for (let i = 0; i < history.stations.length; i++) { if (history.stations[i].train === 1) { // Consider desaire and affordability // Change speed depends on transportation method if (distance < 200) { traveler.travelDesire = traveler.travelDesire; } else if (distance < 300 && traveler.budget > bikeCost) { traveler.travelDesire += traveler.bikeBonus; color = "blue"; speed = genTime * .5; cost = bikeCost; } else if (distance < 500 && traveler.budget > trainCost) { traveler.travelDesire += traveler.trainBonus; color = "red"; speed = genTime * .25; cost = trainCost; carbonEmission = 0.03; } // Daily cost of car MSPR, insurance and fuel cost else if (distance >= 500 && traveler.budget > carCost) { traveler.travelDesire += traveler.carBonus; color = "green"; speed = genTime * .25; cost = carCost; if (history.stations.car == 1) { carbonEmission = 0.1; } else if (history.stations.car == 2) { carbonEmission = 0.03; } } } // if a train is not available but a bike is available else if ( history.stations[i].train === 0 && history.stations[i].bike === 1 ) { if (distance < 100) { traveler.travelDesire = traveler.travelDesire; } else if (distance < 250 && traveler.budget > 3) { traveler.travelDesire += traveler.bikeBonus; color = "blue"; speed = genTime * .5; carbonEmission = 0.03; } else if (distance >= 500 && traveler.budget > 9 + 3 + 5) { traveler.travelDesire += traveler.carBonus; color = "green"; speed = genTime * .25; if (history.stations.car == 1) { carbonEmission = 0.1; } else if (history.stations.car == 2) { carbonEmission = 0.03; } } } // if neither a train nor a bike is available else { if (distance < 100) { traveler.travelDesire = traveler.travelDesire; } else if (distance >= 500 && traveler.budget > 9 + 3 + 5) { traveler.travelDesire += traveler.carBonus; color = "green"; speed = genTime * .25; if (history.stations.car == 1) { carbonEmission = 0.1; } else if (history.stations.car == 2) { carbonEmission = 0.03; } } } } if (traveler.travelDesire > distance / 1000) { //animate movement d3.select('#mainSimulation') .select('g') .append('circle') .attr('cx', fromStation.x) .attr('cy', fromStation.y) .attr('r', 0) .attr('fill', color) .transition() .attr('r', 5) .transition() .duration(speed * .2) .attr('cx', findMidPoint(fromStation, toStation).x) .transition() .duration(speed * .4) .attr('cy', toStation.y) .transition() .duration(speed * .4) .attr('cx', toStation.x) .transition() .duration(speed * .2) .attr('r', 0) .remove(); //recolor stations d3.select('#mainSimulation') .selectAll('.stations') .transition() .duration(genTime) .attr('fill', d => d3.interpolateRdYlBu(d.popularity)); stationUpdate(fromStation, toStation); passengerUpdate(traveler, color, carbonEmission); linkUpdate(fromStation, toStation, traveler); traveler.subsidizedMoney += discountBikeFare + discountTrainFare + discountPatrol + subsidizeCarprice; return traveler; } else { // If the traveler did not travel, the satisfaction goes down traveler.satisfaction -= 0.2; if (traveler.satisfaction < 0) { traveler.satisfaction = 0; } return traveler; } }32:Tf89,lineChart = { let xScale = d3 .scaleLinear() .domain([0, simulationSteps - 1]) .range([margin, width - margin]); let yScale = d3 .scaleLinear() .domain([1, 0]) .range([margin, height - margin]); let lineGen = d3 .line() .x(d => xScale(d.generationNumber)) .y(d => yScale(d.averageSatisfaction)); let walkLineGen = d3 .line() .defined(d => d.walkAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.walkAverageSat)); let bikeLineGen = d3 .line() .defined(d => d.bikeAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.bikeAverageSat)); let trainLineGen = d3 .line() .defined(d => d.trainAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.trainAverageSat)); let carLineGen = d3 .line() .defined(d => d.carAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.carAverageSat)); let svg = d3 .create('svg') .attr("width", width) .attr('height', height) .attr('id', 'lineChart'); let bg = svg .append('rect') .attr("width", width) .attr('height', height) .attr('fill', backgroundColor); svg .datum(history.satisfaction) .append('path') .attr('d', lineGen) .attr('id', 'avgPath') .attr('stroke', '#fff') .attr('stroke-width', '3') .attr('fill', 'none'); svg .datum(history.satisfaction) .append('path') .attr('d', walkLineGen) .attr('id', 'walkAvgPath') .attr('stroke', walkColor) .attr('stroke-width', '3') .attr('fill', 'none'); svg .datum(history.satisfaction) .append('path') .attr('d', bikeLineGen) .attr('id', 'bikeAvgPath') .attr('stroke', bikeColor) .attr('stroke-width', '3') .attr('fill', 'none'); svg .datum(history.satisfaction) .append('path') .attr('d', trainLineGen) .attr('id', 'trainAvgPath') .attr('stroke', trainColor) .attr('stroke-width', '3') .attr('fill', 'none'); svg .datum(history.satisfaction) .append('path') .attr('d', carLineGen) .attr('id', 'carAvgPath') .attr('stroke', carColor) .attr('stroke-width', '3') .attr('fill', 'none'); // Draw the axis let yAxis = svg .append("g") .attr("transform", "translate(" + margin + ",0)") .call(d3.axisLeft(yScale)); yAxis.selectAll('text').style("fill", "white"); yAxis.selectAll('line').style("stroke", "white"); yAxis.selectAll('path').style("stroke", "white"); // Draw the axis let xAxis = svg .append("g") .attr("transform", "translate(0," + (height - margin) + ")") .call(d3.axisBottom(xScale)); xAxis.selectAll('text').style("fill", "white"); xAxis.selectAll('line').style("stroke", "white"); xAxis.selectAll('path').style("stroke", "white"); // keys const keys = [ { name: 'TTL Ave', color: 'white' }, { name: 'Ave by walk', color: walkColor }, { name: 'Ave by train', color: trainColor }, { name: 'Ave by car', color: carColor }, { name: 'Ave by bike', color: bikeColor } ]; const textSize = 12; svg .selectAll('.keyName') .data(keys) .enter() .append('text') .attr('x', margin * 2) .attr('y', (d, i) => ((i + 1) / (keys.length + 1)) * margin * 2 + margin) .attr('font-family', 'courier') .attr('font-size', textSize) .attr('fill', 'white') .text(d => d.name) .attr('class', 'keyName'); svg .selectAll('.keyLine') .data(keys) .enter() .append('line') .attr('x1', margin * 2 - 20) .attr( 'y1', (d, i) => ((i + 1) / (keys.length + 1)) * margin * 2 + margin - textSize / 4 ) .attr('x2', margin * 2 - 5) .attr( 'y2', (d, i) => ((i + 1) / (keys.length + 1)) * margin * 2 + margin - textSize / 4 ) .attr('stroke-width', 3) .attr('stroke', d => d.color); return svg.node(); }33:T84e,function updateLineChart(gen) { if (gen == 0) { d3.selectAll('path').remove; } let xScale = d3 .scaleLinear() .domain([0, simulationSteps - 1]) .range([margin, width - margin]); let yScale = d3 .scaleLinear() .domain([1, 0]) .range([margin, height - margin]); let lineGen = d3 .line() .x(d => xScale(d.generationNumber)) .y(d => yScale(d.averageSatisfaction)); let walkLineGen = d3 .line() .defined(d => d.walkAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.walkAverageSat)); let bikeLineGen = d3 .line() .defined(d => d.bikeAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.bikeAverageSat)); let trainLineGen = d3 .line() .defined(d => d.trainAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.trainAverageSat)); let carLineGen = d3 .line() .defined(d => d.carAverageSat !== undefined) .x(d => xScale(d.generationNumber)) .y(d => yScale(d.carAverageSat)); history.satisfaction.forEach( d => ( (d.averageSatisfaction = d3.mean(d.passengerSatisfaction, e => e)), (d.walkAverageSat = d3.mean(d.walkSatisfaction, e => e)), (d.bikeAverageSat = d3.mean(d.bikeSatisfaction, e => e)), (d.trainAverageSat = d3.mean(d.trainSatisfaction, e => e)), (d.carAverageSat = d3.mean(d.carSatisfaction, e => e)) ) ); d3.select('#lineChart') .select("#avgPath") .datum(history.satisfaction) .transition() .attr('d', lineGen); d3.select('#lineChart') .select("#walkAvgPath") .datum(history.satisfaction) .transition() .attr('d', walkLineGen); d3.select('#lineChart') .select("#bikeAvgPath") .datum(history.satisfaction) .transition() .attr('d', bikeLineGen); d3.select('#lineChart') .select("#trainAvgPath") .datum(history.satisfaction) .transition() .attr('d', trainLineGen); d3.select('#lineChart') .select("#carAvgPath") .datum(history.satisfaction) .transition() .attr('d', carLineGen); }34:T902,{ const xScale = d3 .scaleLinear() .domain([0, simulationSteps - 1]) .range([margin, budgetWidth - margin]); const yScale = d3 .scaleLinear() .domain([-10000, 10000]) .range([budgetHeight - margin, margin]); const svg = d3 .create("svg") .attr("width", budgetWidth) .attr("height", budgetHeight) .attr("id", "budgetChart"); const bg = svg .append("rect") .attr("width", budgetWidth) .attr("height", budgetHeight) .attr("fill", backgroundColor); let lineGen = d3 .line() .x((d) => xScale(d.generationNumber)) .y((d) => yScale(d.budgetBalance)); svg .datum(history.finance) .append("path") .attr("d", lineGen) .attr("id", "budgetBalancePath") .attr("stroke", "yellow") .attr("stroke-width", "3") .attr("fill", "none"); // Draw the axis let yAxis = svg .append("g") .attr("transform", "translate(" + margin + ",0)") .call(d3.axisLeft(yScale)); yAxis.selectAll("text").style("fill", "white"); yAxis.selectAll("line").style("stroke", "white"); yAxis.selectAll("path").style("stroke", "white"); // Draw the axis let xAxis = svg .append("g") .attr("transform", "translate(0," + budgetHeight / 2 + ")") .call(d3.axisBottom(xScale)); xAxis.selectAll("text").style("fill", "white"); xAxis.selectAll("line").style("stroke", "white"); xAxis.selectAll("path").style("stroke", "white"); // keys const keys = [ { name: "Budget", color: "red" }, { name: "Variable Cost", color: "blue" }, { name: "Fixed Cost", color: "green" }, { name: "Budget Balance", color: "yellow" } ]; svg .selectAll(".keyName") .data(keys) .enter() .append("text") .attr("x", (d, i) => ((i + 1) / (keys.length + 1)) * width) .attr("y", 20) .attr("font-family", "courier") .attr("font-size", 12) .attr("fill", "white") .text((d) => d.name) .attr("class", "keyName"); svg .selectAll(".keyLine") .data(keys) .enter() .append("line") .attr("x1", (d, i) => ((i + 1) / (keys.length + 1)) * width - 25) .attr("y1", 15) .attr("x2", (d, i) => ((i + 1) / (keys.length + 1)) * width - 5) .attr("y2", 15) .attr("stroke-width", 3) .attr("stroke", (d) => d.color); return svg.node(); }35:Tc6f,financeBalance = function (gen) { if (gen === 0) { d3.selectAll(".budget").remove(); d3.selectAll(".fixedCost").remove(); d3.selectAll(".variableCost").remove(); } // fixed cost let stationCost = addStationCount * 1; let capacityCost = increaseCapacity * 0.1 * history.stations.length; let evCost = replaceEv * 0.05; let fixedCost = stationCost + capacityCost + evCost; // station upgrade cost let initialValue = 0; history.upgradeNumber.forEach( (d) => (d.upgradeTotal = d.upgradeNumber.reduce((totalValue, currentValue) => { return totalValue + currentValue; }, initialValue)) ); let upgradeCost = upgradePercentage * 0.1; // subsidy cost let initialCost = 0; history.subsidy.forEach( (d) => (d.sum = d.subsidizedMoney.reduce((totalCost, currentCost) => { return totalCost + currentCost; }, initialCost)) ); // total variable cost let variableCost = upgradeCost * history.upgradeNumber[gen].upgradeTotal + history.subsidy[gen].sum; history.finance[gen].fixedCost = -fixedCost / 1000; history.finance[gen].totalVariableCost = -variableCost / 1000; if (gen >= 1) { history.finance[gen].variableCost = history.finance[gen].totalVariableCost - history.finance[gen - 1].totalVariableCost; } else if (gen == 0) { history.finance[gen].variableCost = history.finance[gen].totalVariableCost; } // calculate budget balance history.finance[gen].budgetBalance = cityBudget * 1000 + fixedCost + history.finance[gen].totalVariableCost; const xScale = d3 .scaleLinear() .domain([0, simulationSteps - 1]) .range([margin, budgetWidth - margin]); const yScale = d3 .scaleLinear() .domain([-10000, 10000]) .range([budgetHeight - margin, margin]); let lineGen = d3 .line() .x((d) => xScale(d.generationNumber)) .y((d) => yScale(d.budgetBalance)); d3.select("#budgetChart") .append("rect") .attr("x", margin) .attr("y", yScale(Math.max(0, cityBudget * 1000))) .attr("width", (budgetWidth - margin) / simulationSteps) .attr("height", Math.abs(yScale(cityBudget * 1000) - yScale(0))) .attr("fill", "red") .attr("class", "budget"); d3.select("#budgetChart") .append("rect") .attr("x", margin) .attr("y", budgetHeight / 2 + history.finance[0].totalVariableCost) .attr("width", (budgetWidth - margin) / simulationSteps) .attr("height", -yScale(fixedCost)) .attr("fill", "green") .attr("class", "fixedCost"); d3.select("#budgetChart") .selectAll(".variableCost") .data(history.finance) .enter() .append("rect") .attr( "x", (d, i) => margin + (i * (budgetWidth - margin)) / simulationSteps ) .attr("y", (d) => yScale(0)) .attr("width", (budgetWidth - margin) / simulationSteps) .attr("height", (d) => Math.abs(yScale(d.variableCost) - yScale(0))) .attr("fill", "blue") .attr("stroke", "white") .attr("stroke-width", 1) .attr("class", "variableCost"); d3.select("#budgetChart") .select("#budgetBalancePath") .datum(history.finance) .transition() .attr("d", lineGen); }36:Td1f,{ let xScale = d3 .scaleLinear() .domain([0, simulationSteps - 1]) .range([margin, width - margin]); let yScale = d3 .scaleLinear() .domain([1, 0]) .range([margin, height - margin]); let svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("id", "monitor"); let bg = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", backgroundColor); if (sideEffects.traffic == true) { let trafficLineGen = d3 .line() .x((d) => xScale(d.generationNumber)) .y((d) => yScale(d.averageTraffic)); svg .datum(history.traffic) .append("path") .attr("d", trafficLineGen) .attr("id", "traAvgPath") .attr("stroke", "#e377c2") .attr("stroke-width", "3") .attr("fill", "none"); } // ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"] if (sideEffects.noise == true) { let noiseLineGen = d3 .line() .x((d) => xScale(d.generationNumber)) .y((d) => yScale(d.averageNoise)); svg .datum(history.noise) .append("path") .attr("d", noiseLineGen) .attr("id", "noiseAvgPath") .attr("stroke", "#bcbd22") .attr("stroke-width", "3") .attr("fill", "none"); } if (sideEffects.carbon == true) { let ceLineGen = d3 .line() .x((d) => xScale(d.generationNumber)) .y((d) => yScale(d.aveCarbonEmission)); svg .datum(history.co2) .append("path") .attr("d", ceLineGen) .attr("id", "ceAvgPath") .attr("stroke", "#17becf") .attr("stroke-width", "3") .attr("fill", "none"); } // Draw the axis let yAxis = svg .append("g") .attr("transform", "translate(" + margin + ",0)") .call(d3.axisLeft(yScale)); yAxis.selectAll("text").style("fill", "white"); yAxis.selectAll("line").style("stroke", "white"); yAxis.selectAll("path").style("stroke", "white"); // Draw the axis let xAxis = svg .append("g") .attr("transform", "translate(0," + (height - margin) + ")") .call(d3.axisBottom(xScale)); xAxis.selectAll("text").style("fill", "white"); xAxis.selectAll("line").style("stroke", "white"); xAxis.selectAll("path").style("stroke", "white"); // keys const keys = [ { name: "Traffic per Road", color: "#e377c2" }, { name: "Noise per Road", color: "#bcbd22" }, { name: "Carbon Emission per Passenger", color: "#17becf" } ]; const textSize = 12; svg .selectAll(".keyName") .data(keys) .enter() .append("text") .attr("x", margin * 2) .attr("y", (d, i) => ((i + 1) / (keys.length + 1)) * margin * 2 + margin) .attr("font-family", "courier") .attr("font-size", textSize) .attr("fill", "white") .text((d) => d.name) .attr("class", "keyName"); svg .selectAll(".keyLine") .data(keys) .enter() .append("line") .attr("x1", margin * 2 - 20) .attr( "y1", (d, i) => ((i + 1) / (keys.length + 1)) * margin * 2 + margin - textSize / 4 ) .attr("x2", margin * 2 - 5) .attr( "y2", (d, i) => ((i + 1) / (keys.length + 1)) * margin * 2 + margin - textSize / 4 ) .attr("stroke-width", 3) .attr("stroke", (d) => d.color); return svg.node(); }37:T5c2,function updateSideEffectMonitor(gen) { if (gen == 0) { d3.selectAll('path').remove; } let xScale = d3 .scaleLinear() .domain([0, simulationSteps - 1]) .range([margin, width - margin]); let yScale = d3 .scaleLinear() .domain([1, 0]) .range([margin, height - margin]); history.traffic.forEach( d => (d.averageTraffic = d3.mean(d.roadTraffic, e => e)) ); history.noise.forEach(d => (d.averageNoise = d3.mean(d.roadNoise, e => e))); history.co2.forEach( d => (d.aveCarbonEmission = d3.mean(d.carbonEmission, e => e)) ); if (sideEffects.traffic == true) { let trafficLineGen = d3 .line() .x(d => xScale(d.generationNumber)) .y(d => yScale(d.averageTraffic)); d3.select('#monitor') .select("#traAvgPath") .datum(history.traffic) .transition() .attr('d', trafficLineGen); } if (sideEffects.noise == true) { let noiseLineGen = d3 .line() .x(d => xScale(d.generationNumber)) .y(d => yScale(d.averageNoise)); d3.select('#monitor') .select("#noiseAvgPath") .datum(history.noise) .transition() .attr('d', noiseLineGen); } if (sideEffects.carbon == true) { let ceLineGen = d3 .line() .x(d => xScale(d.generationNumber)) .y(d => yScale(d.aveCarbonEmission)); d3.select('#monitor') .select("#ceAvgPath") .datum(history.co2) .transition() .attr('d', ceLineGen); } }38:T4d1,createStations = function() { for (let i = 0; i < stationCount + addStationCount; i++) { let stationObject = { // gridResolution is width of each grid // width / gridResolution shows which grid number a station is located // .5 * gridResolution is to shift a whole grid from the edges x: Math.floor(Math.random() * (width / gridResolution)) * gridResolution + .5 * gridResolution, y: Math.floor(Math.random() * (height / gridResolution)) * gridResolution + .5 * gridResolution, popularity: Math.random(), name: stationNames[Math.floor(Math.random() * stationNames.length)], upgraded: 0 }; // Allocate transportation methods based on popularity if (stationObject.popularity >= 0.7) { stationObject.car = 1; stationObject.train = 1; stationObject.bike = 1; } else if (stationObject.popularity < 0.7) { stationObject.car = 1; stationObject.train = 0; stationObject.bike = 1; } else if (stationObject.popularity < 0.3) { stationObject.car = 1; stationObject.train = 0; stationObject.bike = 0; } history.stations.push(stationObject); } return "Stations created!"; }39:T503,createLinks = function() { const blankStation = { x: 0, y: 0 }; for (let i = 0; i < history.stations.length - 1; i++) { for (let j = i + 1; j < history.stations.length; j++) { let linkObject = { stops: [history.stations[i], history.stations[j]], visualCoord: [ history.stations[i], history.stations[j] ], trainVisualCoord: [blankStation, blankStation], bikeVisualCoord: [blankStation, blankStation], // Attributes of side effects of transit traffic: 0 * (1 - increaseLinksCap), noise: 0 * (1 - decreaseNoise) }; if ( history.stations[i].popularity >= 0.7 && history.stations[j].popularity >= 0.7 ) { linkObject.trainVisualCoord = [ history.stations[i], history.stations[j] ]; linkObject.bikeVisualCoord = [ history.stations[i], history.stations[j] ]; } else if ( history.stations[i].popularity < 0.7 && history.stations[j].popularity < 0.7 ) { linkObject.bikeVisualCoord = [ history.stations[i], history.stations[j] ]; } history.links.push(linkObject); } } return "links created"; }3a:T19b6,createWorld = async function () { let svg = d3.select("#mainSimulation"); let lineGenerator = d3 .line() .x((d) => d.x) .y((d) => d.y) .curve(d3.curveStep); let trainLineGenerator = d3 .line() .x((d) => d.x + transitThickness * transitOffset) .y((d) => d.y + transitThickness * transitOffset) .curve(d3.curveStep); let bikeLineGenerator = d3 .line() .x((d) => d.x - transitThickness * transitOffset) .y((d) => d.y - transitThickness * transitOffset) .curve(d3.curveStep); let carLineGenerator = d3 .line() .x((d) => d.x + transitThickness * (transitOffset * 2)) .y((d) => d.y + transitThickness * (transitOffset * 2)) .curve(d3.curveStep); let scaleXCenter = (1 - scaleFactor) * (width / 2); let scaleYCenter = (1 - scaleFactor) * (height / 2); let g = svg .append("g") .attr("id", "transitMapGroup") .attr( "transform", "translate(" + scaleXCenter + "," + scaleYCenter + ") scale(" + scaleFactor + ")" ); // keys const keys = [ { name: "Sidewalk", color: walkColor }, { name: "Train Line", color: trainColor }, { name: "Road", color: carColor }, { name: "Bike Lane", color: bikeColor } ]; svg .selectAll(".keyName") .data(keys) .enter() .append("text") .attr("x", (d, i) => ((i + 1) / (keys.length + 1)) * width) .attr("y", 20) .attr("font-family", "courier") .attr("font-size", 12) .attr("fill", "white") .text((d) => d.name) .attr("class", "keyName"); svg .selectAll(".keyLine") .data(keys) .enter() .append("line") .attr("x1", (d, i) => ((i + 1) / (keys.length + 1)) * width - 25) .attr("y1", 15) .attr("x2", (d, i) => ((i + 1) / (keys.length + 1)) * width - 5) .attr("y2", 15) .attr("stroke-width", 3) .attr("stroke", (d) => d.color); //sidewalks let sideWalk = g .selectAll(".links") .interrupt() .data(history.links) .enter() .append("path") .attr("d", (d) => { //pathString converts line logic into SVG path directions //https://github.com/d3/d3-shape return lineGenerator(d.visualCoord); }) .attr("stroke", walkColor) .attr("stroke-width", transitThickness) .attr("opacity", 0.5) .attr("class", "links") .attr("fill", "none") .attr("stroke-miterlimit", 1) .attr("stroke-dasharray", "0,1"); // animate line drawing // https://observablehq.com/@d3/learn-d3-animation await sideWalk .transition() .ease(d3.easeSin) .duration(1500) .attrTween("stroke-dasharray", function () { const length = this.getTotalLength(); return d3.interpolate(`0,${length}`, `${length},${length}`); }) .end(); let trainLink = g .selectAll(".trainLinks") .interrupt() .data(history.links) .enter() .append("path") .attr("d", (d) => { return trainLineGenerator(d.trainVisualCoord); }) .attr("stroke", trainColor) .attr("stroke-width", transitThickness) .attr("opacity", 0.5) .attr("class", "trainLinks") .attr("fill", "none"); await trainLink .transition() .duration(1500) .ease(d3.easeSin) .attrTween("stroke-dasharray", function () { const length = this.getTotalLength(); return d3.interpolate(`0,${length}`, `${length},${length}`); }) .end(); let bikeLink = g .selectAll(".bikeLinks") .interrupt() .data(history.links) .enter() .append("path") .attr("d", (d) => { return bikeLineGenerator(d.bikeVisualCoord); }) .attr("stroke", bikeColor) .attr("stroke-width", transitThickness) .attr("opacity", 0.5) .attr("class", "bikeLinks") .attr("fill", "none"); await bikeLink .transition() .duration(1500) .ease(d3.easeSin) .attrTween("stroke-dasharray", function () { const length = this.getTotalLength(); return d3.interpolate(`0,${length}`, `${length},${length}`); }) .end(); let carLink = g .selectAll(".carLinks") .interrupt() .data(history.links) .enter() .append("path") .attr("d", (d) => { return carLineGenerator(d.visualCoord); }) .attr("stroke", carColor) .attr("stroke-width", transitThickness) .attr("opacity", 0.5) .attr("class", "carLinks") .attr("fill", "none"); let carLinkLength = carLink.node().getTotalLength(); await carLink .transition() .duration(1500) .ease(d3.easeLinear) .attrTween("stroke-dasharray", function () { const length = this.getTotalLength(); return d3.interpolate(`0,${length}`, `${length},${length}`); }) .end(); //draw city shapes await g .selectAll(".stations") .data(history.stations) .enter() .append("rect") .attr("x", (d) => d.x - stationSize / 2) .attr("y", (d) => d.y - stationSize / 2) .transition() .duration(250) .delay((d) => Math.random() * history.stations.length * 100) .attr("width", stationSize + 10) .attr("height", stationSize + 10) .attr("fill", (d) => d3.interpolateRdYlBu(d.popularity)) .attr("opacity", 1) .transition() .duration(500) .attr("width", stationSize) .attr("height", stationSize) .attr("stroke", "white") .attr("stroke-width", transitThickness) .attr("class", "stations") .end(); //draw background for station names await g .selectAll(".stationBackgrounds") .data(history.stations) .enter() .append("rect") .attr("x", (d) => d.x + stationSize / 2) .attr("y", (d) => d.y - stationSize / 2) .transition() .duration(500) .attr("width", 50) .attr("height", stationSize) .attr("fill", "white") .attr("font-family", "helvetica") .attr("opacity", 1) .attr("stroke", "white") .attr("stroke-width", transitThickness) .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .attr("font-size", 10) .attr("class", "stationBackgrounds") .end(); // put station names await g .selectAll(".stationLabels") .data(history.stations) .enter() .append("text") .attr("x", (d) => d.x + stationSize * 0.5) .attr("y", (d) => d.y) .transition() .duration(500) .text((d) => d.name.substring(0, 6)) .attr("fill", backgroundColor) .attr("font-family", "courier") .attr("opacity", 1) .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .attr("font-size", 12) .attr("class", "stationLabels") .end(); }3b:T3979,stationNames = [ "Tyresö", "Piura", "Newark", "Iksha", "Minh Long", "Bāft", "Colonia Catuete", "Foúrnoi", "Lesnoy", "Masḩah", "Haolibao", "Xiapu", "Krzepice", "Sungai Raya", "Villa Urquiza", "Masohi", "Sandakan", "New York City", "Pacho", "Jianping", "Liucheng", "Uppsala", "Arnoia", "Nice", "Cacoal", "Barnaul", "Nancy", "Solidaridad", "Madrid", "Kungälv", "Kristinehamn", "Jedlina-Zdrój", "Darkūsh", "Corcuera", "Kusi", "Trinity Ville", "Albion", "Kiukasen", "Guagua", "Longshan", "San Jose", "Valladolid", "Rousínov", "Kocēni", "Odienné", "Kanash", "Yanglin", "Padangsidempuan", "Frankfort", "Ban Rangsit", "Alejandro Roca", "Falun", "Borgustanskaya", "Lubaczów", "Ōhara", "Huanggang", "North Little Rock", "Zgornje Bitnje", "Stockholm", "Baryshevo", "Norton", "Guozhen", "Beijie", "Ipaba", "Staryy Sambor", "Wangwu", "Karlskoga", "Lišov", "Enköping", "Shanjiang", "Babice", "Santa Bárbara d'Oeste", "Coruripe", "Lipljan", "Sredniy", "Jorong", "Fresno", "Kemendung", "Nanxing", "Colorado Springs", "Wuluo", "Pulong Sampalok", "Guogan", "Badulla", "Natonin", "Le Mans", "Pacaembu", "Skatepark", "Dnestrovsc", "Ngujung", "Rukem", "Puncakwangi", "Nashtā Rūd", "Kimch’aek-si", "Masumbwe", "Skien", "Богданци", "Cibingbin", "Hexi", "Kongjiang", "Beidong", "Göteborg", "Neob", "Solnechnoye", "Koniaków", "Utkivka", "Lučko", "Gunungjulang", "Cruzeiro do Sul", "João Pessoa", "Saryaghash", "Balete", "Masjed Soleymān", "Tangchijie", "Yongfu", "Peicheng", "Jönköping", "Zibreira", "Mizdah", "Mendefera", "Rodez", "Ourinhos", "Banarankrajan", "Rio Branco", "Mouzourás", "Karangtanjung", "Boguszów-Gorce", "Tyresö", "Wysoka", "Smolino", "Al Misrākh", "Valejas", "Leninsk", "Rače", "Deir Ḥannā", "Kurchatov", "Jūrīsh", "Enköping", "Yingzai", "Likupang", "Bilopillya", "Muḩambal", "Janakpur", "Reims", "Huochang", "Jinping", "Rainis", "Baiyinnuole", "Manjiang", "Qionghai", "Caleufú", "Las Vegas", "Parychy", "Jinhaihu", "Kup", "Colos", "Bardo", "Mangaran", "Boyu", "Kon Tum", "Yambrasbamba", "Jinchang", "Tubli", "Camagüey", "Baiju", "Andir", "Polo", "Tebon", "Cúcuta", "Pacucha", "Narva", "Kakaek", "Novozavidovskiy", "Gnosjö", "Watangan", "Gutang", "Maoyang", "Buray", "Banjar Geriana Kangin", "Kozlovice", "Lady Grey", "Vyshneye Dolgoye", "Tacuatí", "Cilegong", "Huliao", "Kamennogorsk", "Bridgetown", "Cipesing", "Rantaupanjangkiri", "Ruteng", "Ribeira Grande", "Urus-Martan", "Zouma", "Jiaoxie", "Lucapon", "Tabant", "Esil", "La Romana", "Zhongguanyi", "Tene", "Lý Sơn", "Jixi", "Cam Ranh", "Aleg", "Paris 04", "Dailing", "Cambebba", "Fredrikstad", "Póvoa de Santo António", "Pachīr wa Āgām", "Callahuanca", "Svetlyy", "Józefów", "Vacoas", "Kondrovo", "Nagykanizsa", "Kisai", "Yemva", "Hanjianglu", "Sukasari", "Balud", "Fatufeto", "Fukou", "Vandœuvre-lès-Nancy", "Xinpu", "Ngluwuk", "Catalina", "Bollstabruk", "Xiaojiang", "Granada", "Tvøroyri", "Santa Maria", "Cabaritan East", "Geneng", "Beidaihehaibin", "Fuxing", "Rokoy", "Datong", "Guancheng", "Bang Sao Thong", "Vychegodskiy", "Munjungan", "Hanfeng", "Chipoka", "Severo-Yeniseyskiy", "Burbank", "Jīwani", "Awarawar", "Dois Vizinhos", "Leigu", "Sukasari", "Buenos Aires", "Bamenda", "Nzeto", "Fuqiang", "Negombo", "Colorado Springs", "Congkar", "Almafuerte", "Xiji", "Stockholm", "Baranoa", "Alcains", "Austin", "Huaihe", "Xuyong", "Huayuan", "Yerba Buena", "Zhoutou", "Kutacane", "København", "Kupiskis", "Real", "Nelas", "Ulricehamn", "Phlapphla Chai", "Viña del Mar", "Xinglong", "Jiesheng", "Caála", "Baffa", "Mirovka", "Masuda", "Ngurenrejo", "Pulau Pinang", "Araguaiana", "Cabusao", "Urozhaynoye", "Daxin", "La Aurora", "Yangambi", "Vicente Guerrero", "Malax", "Pensacola", "Baisha", "Pandangan Kulon", "Pogag", "Guadalupe", "Kozel’shchyna", "Pestovo", "Guapi", "Viradouro", "Meaux", "Dłutów", "Vysehrad", "Santa Rita", "Kandete", "Wang Nam Yen", "Luzino", "Beijiang", "Somorpenang", "Spirit River", "Fuwah", "Obama", "Três Lagoas", "Campechuela", "Kisela Voda", "Sinanju", "Huxiaoqiao", "Cangshan", "Villa Nueva", "Nantou", "Makubetsu", "Kilinochchi", "Belén", "Quilmaná", "Caracal", "Tojeira", "Zhoupu", "Boshi", "Portão", "Hancheng", "Petaling Jaya", "Bouaké", "Zhaiwu", "Penamacor", "Yuzhou", "Pavia", "Pajo", "Kramators’k", "Itacoatiara", "Brok", "Juntang", "Babakandesa", "Huangmao", "Shuanghe", "Helixi", "Gedaliang", "Xincheng", "Nashville", "Taraco", "Pangai", "Mashava", "Bauang", "Chico", "Santo Domingo", "Przecław", "Goodlands", "Vaasa", "Yangwei", "Piquete", "Tours", "Phultala", "Ingeniero Guillermo N. Juárez", "Vitarte", "Shuangjing", "Almere Haven", "Varna", "Ostrowite", "Le Hochet", "Daduo", "Eaubonne", "Jambesari", "Likino-Dulevo", "Los Cedrales", "Austin", "Migrate", "Xiangjiazhai", "Memphis", "Navegantes", "Gujiang", "Kokologo", "Kitahiroshima", "Villeurbanne", "Saint-Gaudens", "Parlilitan", "Shaffa", "Kuybyshevskiy Zaton", "Mundybash", "Macroom", "Sukomulyo", "Huyuan", "Ljusdal", "Pagersari", "Agiásos", "Sandaowan", "Kisesa", "Richky", "Amado Nervo", "Konggar", "Raminho", "Xia Dawo", "Sandymount", "Rabat", "Cam Lâm", "Mingzhong", "Yinjiang", "Subulussalam", "Kawayan", "Pouzauges", "Yotala", "Bara Datu", "Ozubulu", "Matingain", "Ventersburg", "Halmstad", "Santa Cruz da Graciosa", "Libas", "Ngozi", "Fāraskūr", "Turus", "Azteca", "Klenica", "Vale da Pedra", "Karangan", "Södertälje", "Santa Catalina Norte", "Cullalabo del Sur", "Néa Éfesos", "Bendilwungu Lor", "Buruanga", "Vargas", "Dabao’anzhen", "Quba", "Sangali", "Torres Vedras", "Bentar", "Zhangbagou", "Oujiangcha", "Boguchar", "Masma", "Reshetnikovo", "Xunzhai", "Kolirerek", "Taibai", "Dearborn", "Pancas", "Bartošovice", "Gaizhou", "Rāipur", "Sadovo", "Bual", "Kayan Hulu", "Villeneuve-sur-Lot", "Arendal", "Sangesi", "Noisy-le-Grand", "Krajan Menggare", "At Samat", "Békéscsaba", "Laoxingchang", "Brandfort", "Aveiras de Cima", "Huaqiao", "Petřvald", "Río Viejo", "San Salvador de Jujuy", "Billdal", "Satinka", "Bugcaon", "Netrakona", "Wugong", "Matola", "La Julia", "Montpellier", "Qesarya", "Huanshi", "Estoril", "Zbiroh", "Quiriquire", "Oromocto", "Uberaba", "Bergen", "Haikoudajie", "Falköping", "Suyo", "Luoping", "Fedorovka", "Boé", "Wengyang", "Ban Phan Don", "Pineleng", "Yelat’ma", "Fangtian", "Limoges", "San Juan del Cesar", "Hägersten", "Qabqir", "Santa Maria", "Derhachi", "Zhaojia", "Qingyang", "Cancas", "Rakszawa", "Huatan", "Rudnyy", "Forquilhinha", "Stockholm", "Troyes", "Baras", "Dhī as Sufāl", "Kwali", "Dimona", "Washington", "Pondokdalem", "Meilin", "Sokarame", "Bucu Kidul", "Warri", "Nanxiang", "Toulouse", "Liperi", "Lichtenburg", "Girijaya", "Mumias", "Luojiang", "Ngulahan", "Trat", "Göteborg", "Deneysville", "Arhust", "Wilkołaz", "Watsa", "Tytuvėnėliai", "Ceará Mirim", "Teluk Pinang", "Dietaisi", "Cela", "Wang Hin", "Sanming", "Övertorneå", "Krasnodar", "Tyarlevo", "Sławatycze", "Haoguantun", "Peer", "Suka Makmue", "Anto", "Karangan", "Fandriana", "Las Vegas", "Sumbergebang", "Olival", "Linggamanik", "Gubkinskiy", "Santa Ana", "Ilihan", "Mulan", "Alcaria", "Malo", "Morales", "Ordóñez", "Bergen", "Huyuan", "Poá", "Milwaukee", "Bahorí", "Debeljača", "Oksa", "Turgun", "Litvínovice", "Pataypampa", "Freixo de Numão", "Austin", "Nangaroro", "Alor Setar", "Xiaoruo", "Chantilly", "Meniko", "Louveira", "Karelichy", "Shimanovsk", "Kedungdoro", "Kiamba", "Santa Luzia", "Primorsk", "Katuli", "Miami Beach", "Longping", "Hamburg", "Moita da Roda", "Dolní Sloupnice", "Doom", "San Fernando de Atabapo", "Ashcroft", "Lembur Tengah", "Porto Real", "Liverpool", "Watuagung", "Flers", "Mushu", "Šipovo", "Pantubig", "Armação de Búzios", "Gornji Milanovac", "Konobeyevo", "Sarae", "Novaya Derevnya", "Chiguang", "Huangnihe", "Huamali", "Tianmuhu", "Tarouca", "Picungbera", "Ningdun", "Xidoupu", "La Chapelle-sur-Erdre", "Huajialing", "Pasirputih", "Bairros", "Chiguayante", "Sremski Karlovci", "Dolores", "Yaring", "Kharabali", "Baixiang", "Ditang", "Bulu", "Apongo", "Languan", "Tyret’ Pervaya", "Banatsko Veliko Selo", "Łapsze Niżne", "Dabagou", "Grębków", "Dadaha", "Feijó", "Yidao", "Nonsan", "Xiaowuzhan", "Song’ao", "Yuetang", "Cibangban Girang", "Pukou", "Göteborg", "Hushan", "Mungwi", "Praya", "Beaufort", "Lyon", "Ladner", "Lucan", "Jablunkov", "Payabon", "Rila", "Corail", "Néa Smýrni", "Eslāmābād", "Cabay", "Najiaying", "Proletar", "Krzemieniewo", "Hetian", "Dayrūţ", "San Agustin", "Fichē", "Cikai", "Cipicung", "Montelíbano", "Marne-la-Vallée", "Dongluqiao", "Apaga", "Gexi", "Krajan", "Świebodzice", "Springfield", "Udënisht", "Marne-la-Vallée", "Yinping", "Lwengo", "Nakusp", "Yongping", "Kamphaeng Phet", "Betim", "Tagapul-an", "Ningmute", "Dayou", "Santa Cruz", "Blimbing", "Vellinge", "Jagdaqi", "Wang Muang", "Santa Justina", "Cockburn Town", "Couço", "Novyy Oskol", "Sebasang", "Argithéa", "Shicha", "Serzedo", "Baculin", "Lecheng", "Kanḏay", "Doctor Juan León Mallorquín", "Honglu", "Anār", "Wang Thonglang", "Igarapé Açu", "Kondrovo", "Créteil", "Limbe", "Pimian", "Fukiage-fujimi", "Zarszyn", "Balauring", "Bašaid", "Ouango", "Niagara Falls", "Ban Phan Don", "Dayr Abū Ḑa‘īf", "Wangqingtuo", "Duyên Hải", "Kalāleh", "Ålesund", "Quibal", "Dziadkowice", "Sofifi", "Kímolos", "Shalazhi", "Wukou", "Tampa", "Balung", "Shuangxing", "El Cardo", "Obihiro", "Logung", "Lokavec", "Carolina", "Lākshām", "Jingyu", "Al Ḩawāmidīyah", "Jakhaly", "Kfar NaOranim", "Ihuari", "Sukacai", "Pindobaçu", "Joševa", "Łomazy", "Maythalūn", "Ganjun", "Anfu", "Dmitriyevskoye", "Xiting", "Charxin", "Pontevedra", "Casal", "Pontevedra", "Hujiaba", "Loikaw", "Danyang", "Yugang", "Soraya", "Beloha", "Sendai", "Skoczów", "Pandan Niog", "España", "Bang Saphan", "Dongyang", "Fengjiang", "Kamuli", "Sekarjalak", "Yuanyang Zhen", "Pamatang", "Esfarāyen", "Seka", "Hyrynsalmi", "Pontevedra", "Kraljevica", "Xanxerê", "Lemenhe", "Myhove", "Jandayan", "Wonocolo", "Pivka", "Jablonec nad Nisou", "Mekele", "Potou", "Astana", "Bouaflé", "Mozhong", "Łaziska Górne", "Ercheng", "Changshou", "Rongwo", "Néa Róda", "Nuštar", "Kimhae", "Sumusţā as Sulţānī", "Kuybyshevskiy Zaton", "Dancheng", "Shingū", "Balta", "Johanneshov", "Krajan", "Banghai", "Baisha", "Longlisuo", "Barão de São Miguel", "Bariri", "Beppu", "Los Angeles", "Maomiaoji", "Koppies", "Charqueadas", "Alfta", "Rasi Salai", "Huyang", "Cigalontang", "Nova Viçosa", "Íos", "Carhuamayo", "Sintansin", "Tangtou", "Saint-Jean-de-Védas", "Rybinsk", "Shaykh al Ḩadīd", "Ar Rumaythah", "Brades", "Mococa", "Ḏânan", "Rasskazovo", "Krajan Satu", "Taoyuan", "Sosnovyy Bor", "Rungis", "Xiangyangpu", "Atakpamé", "Guebwiller", "Fier", "Batibati", "Dzagam", "Santa Rosa", "Sijiu", "Qi’an", "Biała Piska", "Sumbermanggis", "Divisoria", "Maştağa", "Langjun", "Santiago do Cacém", "Chocz", "Kizel", "Västerås", "Saint-Brieuc", "Berezna", "Huipinggeng", "Yanahuanca", "Hinlayagan Ilaud", "Saint-Avold", "Amiens", "Villazón", "Chong’ansi", "Dingjiayao", "Cimaragas", "Broniszewice", "Brodek u Přerova", "Foumban", "Străşeni", "Bukavu", "Tiên Lãng", "Jiangjiazui", "Bungkal", "Manonjaya", "Čoka", "Dayong", "Yuping", "Hongshunli", "Aix-en-Provence", "Tongshanxiang", "Maizuru", "Tuban", "Leuwihalang", "Cikomara", "Oropesa", "Omoa", "Vrýses", "Troitsk", "Lajaluhur", "Medvedok", "Kamsack", "Jiquinlaca", "Tubigan", "Bago", "Ventersdorp", "Solna", "Koszarawa", "Pallisa", "Outokumpu", "Slobodskoy", "Datong", "Minien East", "Bulacan", "Goubétto", "Dayan", "Borlänge", "Jinan-gun", "Tambakromo", "Butwāl", "Maranganí", "Borisovka", "Hushi", "Karasuyama", "Lorino", "Tong’an", "Yanzhou", "Hénin-Beaumont", "Skała", "Minyat an Naşr", "Helsingborg", "Babiak", "San Lorenzo", "Stonewall", "Zhendeqiao", "Liangshuihe", "Spasskoye", "Turirejo", "Shiyuetian", "Shuangjing", "Fray Luis A. Beltrán", "Negla", "Alfenas", "Catriel", "Masoli", "New Mīrpur", "Songkan", "Prachamtakham", "Paipa", "Bronnitsy", "Oeleu", "San Miguel", "Topeka", "Fier", "Burmakino", "Rahayu", "Saint-Jean-de-Luz", "Ketang", "Horad Rechytsa", "Real", "Ganzi", "Selaphum", "Circa", "East London", "Cinunjang", "Valongo", "Stockholm", "Charleston", "Meitang", "Vargem Grande", "Ribeira Grande", "Mollas", "Salaya", "Greda", "Agogo", "Scranton", "Mozdok", "Golek", "Gelsenkirchen", "San Luis", "Calingcuan", "Dingjiayao", "Campo Mourão", "Catriel", "Kuniran", "Srpska Crnja", "Cigadog Hilir", "Vancouver", "Talagante", "Port-à-Piment", "Duzhenwan", "Banjaranyar", "Kaindy", "Alae", "Aku", "Huixian Chengguanzhen", "Kuala Terengganu", "Kamieniec", "Liancheng", "Makiv", "Al Başrah", "Sankoutang", "Konsoy", "Jalqamūs", "Kubang", "Topolná", "Igarapava", "Shengli", "Buenaventura", "Jamaica", "Boawae" ]3c:[] 2e:{"title":"Transit Simulator","cells":[{"id":0,"value":"md`# Transit Simulator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2011,"value":"md`\nThis is a simulator to experiment **how people choose a transit mode in a city, and how the choice would affect their satisfaction, urban infrastructures or mobility policies in a city**. You can create a city that has stations and links of each transit method, train, bike, car and walk. Then, after setting the number of passengers and the number of movement, you can run the simulator.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"md`Your city map is automatically generated and the simulation seamlessly runs. You can see how many simulation steps finised below the map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2931,"value":"world = {\n //create SVG artboard\n let svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"id\", \"mainSimulation\");\n\n let bg = svg\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", backgroundColor);\n\n yield svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"md`\n### Visualization Settings\n\nFirst of all, you can set up city visual design with these parameters.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"viewof width = slider({\n min: 0,\n max: 1000,\n step: 10,\n value: 800,\n title: \"SVG Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"viewof height = slider({\n min: 0,\n max: 1000,\n step: 10,\n value: 800,\n title: \"SVG Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"viewof margin = slider({\n min: 0,\n max: 100,\n step: 5,\n value: 50,\n title: \"SVG Margin\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"viewof gridResolution = slider({\n min: 0,\n max: 100,\n step: 10,\n value: 30,\n title: \"Grid Resolution\",\n description:\n \"You can decide how small each segmented block would be in a city\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"viewof stationSize = slider({\n min: 10,\n max: 30,\n step: 1,\n value: 20,\n title: \"Station Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"viewof scaleFactor = slider({\n min: 0,\n max: 1,\n step: .01,\n value: .9,\n title: \"Main Scale Factor\",\n description:\n \"The larger you would like to make a city, the smaller the scale number should be\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"viewof stationCount = slider({\n min: 0,\n max: 100,\n step: 5,\n value: 20,\n title: \"Station Count\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"md`\n### Simulation Settings\n\nSet how many passengers move in your city, how many times the simulation runs and animates, and how fast the simulation runs.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2024,"value":"viewof passengerCount = slider({\n min: 0,\n max: 50,\n step: 5,\n value: 10,\n title: \"Passenger Count\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"viewof simulationSteps = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 25,\n title: \"Simulation Steps\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"viewof transitsPerSimulation = slider({\n min: 0,\n max: 50,\n step: 1,\n value: 15,\n title: \"Transit Movements per Simulation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"viewof genTime = slider({\n min: 100,\n max: 5000,\n step: 1,\n value: 2000,\n title: \"Time per Simulation Step\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"md`\n-----\n## Main Simulation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2081,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2077,"value":"md`Here is a historical dataset that includes passengers' satisfaction, and the latest data of passengers, stations and links.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"history = {\n return {\n satisfaction: [],\n passengers: [],\n stations: [],\n links: [],\n traffic: [],\n noise: [],\n co2: [],\n subsidy: [],\n upgradeNumber: [],\n finance: []\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"md`\n-----\n## Satisfaction Over Time\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2089,"value":"md`Now, you get average satisfaction data of passengers who have move in the simulation. Their satisfaction would increase when their travel desire weighs more than a distance that they wanted to travel. On the other hand, when the distance was too far, they would give up moving and the satisfaction would drop.\n\nThe dgree of satisfaction dropping is more than that of increasing because I assume that nowadays, people take it granted that they can move easily and smoothly in a city.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"md`\n-----\n## Interaction#1 How to increase passengers' satisfaction?\n\nFrom this part, you can explore and experiment how to increase passenger's satisfaction by intervening city infrastructures, or their decision making.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"viewof cityBudget = slider({\n min: 0,\n max: 100,\n step: 5,\n value: 10,\n title: \"City Budeget Setting (million$)\",\n description: \"How much transportation budget do you set?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"md`### Investment on infrastructures\n\nYou can increase the number of stations to shorten a travel distance. Or investing money to stations to keep providing fast and reasonable transportation options such as bike or train. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"viewof addStationCount = slider({\n min: 0,\n max: 100,\n step: 5,\n value: 0,\n title: \"Additional Stations\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"viewof increaseCapacity = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n title: \"Increase capacity of stations (%)\",\n description: \"You can improve conjestion when stations get popular\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"viewof upgradePercentage = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n title: \"Upgrade facilitaion in unpopular stations (%)\",\n description: \"You can increase transit modes in unpopular station\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"md`### Incentives for passengers\n\nYou can give incentives that help the passengers use faster transit methods which enable them to go far destinations.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"viewof subsidizeCarprice = slider({\n min: 0,\n max: 25000,\n step: 500,\n value: 0,\n title: \"Subsidy for buying a car ($)\",\n description: \"How much money do you financially support people to buy a car?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"viewof discountPatrol = slider({\n min: 0,\n max: 3,\n step: 0.01,\n value: 0,\n title: \"Discount on patrol price ($)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"viewof discountTrainFare = slider({\n min: 0,\n max: 3,\n step: 0.01,\n value: 0,\n title: \"Discount on train fare ($)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"viewof discountBikeFare = slider({\n min: 0,\n max: 3,\n step: 0.01,\n value: 0,\n title: \"Discount on sharing bike fare ($)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"md`### Budget Monitor\n\nThe chart show how much expenditure is spent in each simulation step, and how much budget is left.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":3121,"value":"budgetHeight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":3125,"value":"budgetWidth = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1171,"value":"md`You finished the additional setting. Let's see a resimulated result.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"md`\n-----\n## Interaction#2 How to balance between satisfaction and sustainability?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2128,"value":"md`In this part, you can incorporate major side effects caused by transit, traffic jam, noise and carbon emmision.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"viewof sideEffect = checkbox({\n title: \"Side effect of transit\",\n description: \"Please select which side effect you want to incorporate\",\n options: [\n { value: \"traffic\", label: \"Traffic Jam\" },\n { value: \"noise\", label: \"Noise\" },\n { value: \"co2\", label: \"Carbon Emission\" }\n ],\n value: [\"traffic\", \"noise\", \"co2\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"md`### Side Effect monitor\n\nYou can see how side effects that you choose in the check box would change in the simulation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2132,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"md`### Investment on infrastructures\n\nYou can invest additional money in the infrastructure to mitigate traffic jam, noise and carbon emission.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"viewof increaseLinksCap = slider({\n min: 0,\n max: 100,\n step: 5,\n value: 0,\n title: \"Increase capacity of links (%)\",\n description: \"You can improve conjestion on links\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"viewof decreaseNoise = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n title: \"Decrease noise of links (%)\",\n description: \"You can improve noise on links\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2348,"value":"viewof evRatio = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n title: \"Replacement of petrol cars with electric one (%)\",\n description:\n \"You can reduce carbon emission by increasing more environmetal-friendly car at each station\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"md`### Incentives for passengers\n\nOr give other incentives to encourage people to use other transit methods that emit less carbon emissions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"viewof increasePatrol = slider({\n min: 0,\n max: 10,\n step: 0.01,\n value: 0,\n title: \"Increase costs on patrol price ($)\",\n description: \"You can prevent passengers from riding patrol cars\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"md`You finished the additional setting. Let's see a resimulated result.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"md`\n-----\n## Mathematical Utilities\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"//https://observablehq.com/@nextlevelshit/rejection-sampling-in-javascript\n\nweight = function(arr) {\n return [].concat(\n ...arr.map(obj => Array(Math.ceil(obj.popularity * 100)).fill(obj))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"pick = function(arr) {\n let weighted = weight(arr);\n return weighted[Math.floor(Math.random() * weighted.length)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"getDistance = function(x1, y1, x2, y2) {\n let xs = Math.abs(x2 - x1),\n ys = Math.abs(y2 - y1);\n\n return xs + ys;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"findMidPoint = function(station1, station2) {\n return { x: (station1.x + station2.x) / 2, y: (station1.y + station2.y) / 2 };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"md`\n-----\n## Initial Functions\n\nUsed to (re)create all elements in the simulation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"createPassengers = function() {\n for (let i = 0; i < passengerCount; i++) {\n history.passengers.push({\n travelDesire: Math.random(),\n budget: Math.random() * 20,\n satisfaction: 0,\n carBonus: Math.random(),\n trainBonus: Math.random(),\n bikeBonus: Math.random(),\n lastMode: \"\",\n carbonEmission: 0,\n subsidizedMoney: 0\n });\n }\n return \"Passengers Created!\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2487,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2496,"value":"md`\n-----\n## Update Functions\n\nUsed to repeatedly keep visualization elements up to date with the simulation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2500,"value":"stationUpdate = function(from, to) {\n let upgradeCount = 0;\n history.stations.forEach(station => {\n station.popularity -= 0.01;\n if (station.popularity < 0.2) {\n station.popularity += 0.5 * (upgradePercentage / 100);\n station.upgraded++;\n }\n });\n\n from.popularity += 0.2;\n to.popularity += 0.2;\n\n if (from.popularity > 0.85 * (1 + increaseCapacity / 100)) {\n from.popularity = 0.5;\n } else if (to.popularity > 0.85 * (1 + increaseCapacity / 100)) {\n to.popularity = 0.5;\n }\n\n // Reallocate transportation methods based on the latest popularity\n for (let station of history.stations) {\n if (station.popularity >= 0.5) {\n station.car = 1;\n station.train = 1;\n station.bike = 1;\n } else if (station.popularity < 0.5) {\n station.car = 1;\n station.train = 0;\n station.bike = 1;\n } else if (station.popularity < 0.3) {\n station.car = 1;\n station.train = 0;\n station.bike = 0;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2504,"value":"passengerUpdate = function(traveler, color, carbonEmission) {\n // increase satisfaction\n traveler.satisfaction += 0.05;\n // increase a cumulative sum of carbon emmision\n traveler.carbonEmission += carbonEmission;\n // reset the budget\n traveler.budget = Math.random() * 20;\n // reset travel desire\n traveler.travelDesire = Math.random();\n\n if (traveler.satisfaction > 1) {\n traveler.satisfaction = 1;\n }\n\n if (color === \"white\") {\n traveler.lastMode = \"walk\";\n } else if (color === \"blue\") {\n traveler.lastMode = \"bike\";\n } else if (color === \"red\") {\n traveler.lastMode = \"train\";\n } else {\n traveler.lastMode = \"car\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2508,"value":"linkUpdate = function(from, to, traveler) {\n history.links.forEach(d => {\n if (\n (from.x === d.stops[0].x &&\n from.y === d.stops[0].y &&\n to.x === d.stops[1].x &&\n to.y === d.stops[1].y) ||\n (from.x === d.stops[1].x &&\n from.y === d.stops[1] &&\n to.x === d.stops[0].x &&\n to.y === d.stops[0].y)\n ) {\n d.traffic += 0.1;\n }\n });\n history.links.forEach(d => {\n if (\n (from.x === d.stops[0].x &&\n from.y === d.stops[0].y &&\n to.x === d.stops[1].x &&\n to.y === d.stops[1].y) ||\n (from.x === d.stops[1].x &&\n from.y === d.stops[1] &&\n to.x === d.stops[0].x &&\n to.y === d.stops[0].y)\n ) {\n d.noise += 0.3;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"md`\n-----\n## Visual Setting\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"viewof transitThickness = slider({\n min: 0,\n max: 20,\n step: 1,\n value: 2,\n title: \"Transit Line Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2059,"value":"viewof transitOffset = slider({\n min: 0,\n max: 10,\n step: .1,\n value: 1,\n title: \"Transit Line Offset\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2056,"value":"viewof backgroundColor = color({\n value: \"#0d0d0d\",\n title: \"Background Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"viewof trainColor = color({\n value: \"#20BF55\",\n title: \"Train Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2106,"value":"viewof carColor = color({\n value: \"#fe9419\",\n title: \"Road Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"viewof bikeColor = color({\n value: \"#f44c67\",\n title: \"Bike Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"viewof walkColor = color({\n value: \"#01BAEF\",\n title: \"Sidewalk Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"md`\n-----\n## Additional Functions\nCreate additional elements in the simulation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1478,"value":"sideEffects = {\n let choices = {};\n sideEffect.indexOf(\"traffic\") != -1\n ? (choices.traffic = true)\n : (choices.traffic = false);\n sideEffect.indexOf(\"noise\") != -1\n ? (choices.noise = true)\n : (choices.noise = false);\n sideEffect.indexOf(\"co2\") != -1\n ? (choices.carbon = true)\n : (choices.carbon = false);\n\n return choices;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2343,"value":"replaceEv = {\n // calculate how many patrol vehicles are replaced with electric ones\n let numberOfEv = Math.floor((evRatio / 100) * history.stations.length);\n\n for (let i = 0; i < numberOfEv; i++) {\n let evStation =\n history.stations[Math.floor(Math.random() * history.stations.length)];\n\n evStation.car = 2;\n }\n\n return numberOfEv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"md`# Next Steps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"md`- Research how much people are affected by traffic jam and noise\n- Research how infrastracture costs are calculated\n- Consider how lavy affects people's satisfaction\n- Explore more visualization patterns\n- Incorporate multimordal transit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"import { slider, color, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}