30:T4aa,stations = { let stationData = []; for (let i = 0; i < stationCount; 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)] }; // 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.5) { stationObject.car = 1; stationObject.train = 0; stationObject.bike = 1; } else if (stationObject.popularity < 0.3) { stationObject.car = 1; stationObject.train = 0; stationObject.bike = 0; } stationData.push(stationObject); } return stationData; }31:Ta09,svg = { //svg variables stations; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr('id', 'mainArea'); let bg = svg .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr('fill', '#002'); //lineGenerator is the template - how does data become points on the curve? let lineGenerator = d3 .line() .x(d => d.x) .y(d => d.y) .curve(d3.curveStepAfter); //lineGenerator is the template - how does data become points on the curve? let offsetGenerator = d3 .line() .x(d => d.x+5) .y(d => d.y+5) .curve(d3.curveStepAfter); svg .selectAll('.links') .data(crossLinks) .enter() .append('path') .attr('d', function(d) { //pathString converts line logic into SVG path directions //https://github.com/d3/d3-shape return lineGenerator(d.visualizationCoordinates); }) .attr('stroke', 'white') .attr('class', 'links') .attr('fill', 'none'); svg .selectAll('.offsetLinks') .data(crossLinks) .enter() .append('path') .attr('d', function(d) { //pathString converts line logic into SVG path directions //https://github.com/d3/d3-shape return offsetGenerator(d.visualizationCoordinates); }) .attr('stroke', 'red') .attr('class', 'offsetLinks') .attr('fill', 'none'); // svg // .selectAll('.links') // .data(crossLinks) // .enter() // .append('line') // .attr('x1', d => d[0].x) // .attr('y1', d => d[0].y) // .attr('x2', d => d[1].x) // .attr('y2', d => d[1].y) // .attr('stroke', 'white') // .attr('class', 'links'); //draw city circles svg .selectAll('.stations') .data(stations) .enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr('r', d => 5) .attr('fill', d => d3.interpolateViridis(d.popularity)) .attr('opacity', 1) .attr('class', 'stations'); //draw city circles svg .selectAll('.stationLabels') .data(stations) .enter() .append("text") .attr("x", d => d.x + 10) .attr("y", d => d.y) .text(d => d.name) .attr('fill', 'white') .attr('font-family', 'courier') .attr('opacity', 1) .attr('text-anchor', 'start') .attr('alignment-baseline', 'middle') .attr('class', 'stationLabels'); //show visualization in Observable return svg.node(); }32:T9c3,svg2 = { const margin = 100; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr('id', 'mainArea'); let bg = svg .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr('fill', '#002'); const walkX = 150; const bikeX = 300; const trainX = 450; const carX = 600; let modes = ['walk', 'bike', 'train', 'car']; let yScale = d3 .scaleLinear() .domain(d3.extent(passengers, d => d.walkMove)) .range([height - margin, margin]); // for (let i = 0; i < modes.length; i++) { // svg // .selectAll('.passengers') // .data(passengers) // .enter() // .append('circle') // .attr('cx', (i+1) * 150) // .attr('cy', d => yScale(d.(modes[i]+'Move')) // .attr('r', 2) // .attr('fill', 'white') // .attr('occupancy', 1) // .attr('class', '.passengers'); // } for (let i = 0; i < modes.length; i++) { svg .append('text') .attr('y', height - margin + 50) .attr('x', (i + 1) * 150) .attr('fill', 'white') .attr('stroke', 'white') .attr('stroke-width', 0) .style('font-family', 'courier') .style('font-size', 20) .attr('text-anchor', 'middle') .attr('class', 'modeName') .text(modes[i]); } svg .selectAll('.passengers') .data(passengers) .enter() .append('circle') .attr('cx', walkX) .attr('cy', d => yScale(d.walkMove)) .attr('r', 2) .attr('fill', 'white') .attr('occupancy', 1) .attr('class', '.passengers'); svg .selectAll('.passengers') .data(passengers) .enter() .append('circle') .attr('cx', bikeX) .attr('cy', d => yScale(d.bikeMove)) .attr('r', 2) .attr('fill', 'white') .attr('occupancy', 1) .attr('class', '.passengers'); svg .selectAll('.passengers') .data(passengers) .enter() .append('circle') .attr('cx', trainX) .attr('cy', d => yScale(d.trainMove)) .attr('r', 2) .attr('fill', 'white') .attr('occupancy', 1) .attr('class', '.passengers'); svg .selectAll('.passengers') .data(passengers) .enter() .append('circle') .attr('cx', carX) .attr('cy', d => yScale(d.carMove)) .attr('r', 2) .attr('fill', 'white') .attr('occupancy', 1) .attr('class', '.passengers'); return svg.node(); }33:Te52,move = function() { for (let i = 0; i < stations.length; i++) { if (stations[i].popularity <= 0) { stations[i].popularity = 0.2; } } let fromStation = pick(stations); let toStation = pick(stations); //ensure start and end are not the same station while (fromStation == toStation) { fromStation = pick(stations); toStation = pick(stations); } let distance = getDistance( fromStation.x, fromStation.y, toStation.x, toStation.y ); // Choose a traveler at random let traveler = passengers[Math.floor(Math.random() * (passengerCount - 1))]; let color = "white"; let speed = 2000; let cost = 0; let dTraffic = 0; // If a train is available for (let i = 0; i < stations.length; i++) { if (stations[i].train == 1) { // Consider desaire and affordability // Change speed depends on transportation method if (distance < 100) { traveler.travelDesire = traveler.travelDesire; } else if (distance < 200 && traveler.budget > 3) { traveler.travelDesire += traveler.bikeBonus; color = "blue"; speed = 1000; cost = 3; } else if (distance < 500 && traveler.budget > 3) { traveler.travelDesire += traveler.trainBonus; color = "red"; speed = 500; cost = 3; } // Daily cost of car MSPR, insurance and fuel cost else if (distance >= 500 && traveler.budget > 9 + 3 + 5) { traveler.travelDesire += traveler.carBonus; color = "green"; speed = 250; cost = 17; dTraffic = 1; } } // if a train is not available but a bike is available else if (stations[i].train == 0 && stations[i].bike == 1) { if (distance < 100) { traveler.travelDesire = traveler.travelDesire; } else if (distance < 200 && traveler.budget > 3) { traveler.travelDesire += traveler.bikeBonus; color = "blue"; speed = 1000; } else if (distance >= 500 && traveler.budget > 9 + 3 + 5) { traveler.travelDesire += traveler.carBonus; color = "green"; speed = 250; } } // 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 = 250; } } } if (traveler.travelDesire > distance / 1000) { //animate movement d3.select('#mainArea') .append('circle') .attr('cx', fromStation.x) .attr('cy', fromStation.y) .attr('r', 0) .attr('fill', color) .transition() .attr('r', 10) .transition() .duration(speed) .attr('cx', toStation.x) .transition() .duration(speed) .attr('cy', toStation.y) .transition() .attr('r', 0) .remove(); //recolor stations d3.selectAll('.stations') .transition() .duration(1000) .attr('fill', d => d3.interpolateViridis(d.popularity)); stationUpdate(fromStation, toStation); passengerUpdate(traveler, cost, color); satisfaction.passengerSat.push(traveler.satisfaction) satisfaction.averageSat = d3.mean(satisfaction.passengerSat, e=>e); return ( "moved 1 passenger from " + fromStation.name + " to " + toStation.name ); } else { // If the traveler did not travel, the satisfaction goes down traveler.satisfaction -= 0.5; if (traveler.satisfaction < 0) { traveler.satisfaction = 0; } return "did not want to travel!!!"; } }34:T2dc2,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", ]35:[] 2e:{"title":"TranSim","cells":[{"id":0,"value":"md`# TranSim`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n### Simulation Settings\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof width = slider({\n min: 0,\n max: 1000,\n step: 50,\n value: 800,\n title: \"SVG Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof height = slider({\n min: 0,\n max: 1000,\n step: 50,\n value: 800,\n title: \"SVG Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof gridResolution = slider({\n min: 0,\n max: 100,\n step: 10,\n value: 30,\n title: \"Grid Resolution\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof stationCount = slider({\n min: 0,\n max: 100,\n step: 5,\n value: 50,\n title: \"Station Count\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"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":20,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"crossLinks = {\n let links = [];\n\n for (let i = 0; i < stations.length - 1; i++) {\n for (let j = i + 1; j < stations.length; j++) {\n \n if (Math.random() < .005){\n links.push({\n stops: [stations[i], stations[j]],\n visualizationCoordinates: [stations[i], findMidPoint(stations[i],stations[j]), stations[j]],\n traffic: 0\n });\n links.push({\n stops: [stations[j], stations[i]],\n visualizationCoordinates: [stations[i], findMidPoint(stations[j],stations[i]), stations[j]],\n\n\n traffic: 0\n });\n\n\n }\n }\n }\n\n return links;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"passengers = {\n let passengerData = [];\n\n for (let i = 0; i < passengerCount; i++) {\n passengerData.push({\n travelDesire: Math.random(),\n budget: Math.random() * 20,\n satisfaction: Math.random(),\n carBonus: Math.random(),\n trainBonus: Math.random(),\n bikeBonus: Math.random(),\n carMove: 0,\n trainMove: 0,\n bikeMove: 0,\n walkMove: 0\n });\n }\n return passengerData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"viewof simulationSteps = slider({\n min: 0,\n max: 100,\n step: 5,\n value: 10,\n title: \"Simulation Steps\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"viewof delay = slider({\n min: 0,\n max: 500,\n step: 1,\n value: 300,\n title: \"Update Time\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof jumpCA = {\n //create button HTML entity\n let button = html``;\n //attach event listener without D3's .on(event, function(){})\n button.onclick = function() {\n //keep track of actions\n let counter = 0;\n //start D3 timer\n let ticker = d3.interval(elapsed => {\n //run functions at interval\n move();\n counter++;\n if (counter > simulationSteps) {\n //turn off the timer\n ticker.stop();\n }\n }); //how long the timer should wait between executions\n };\n //show in observable\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"satisfaction = {\n\n return {passengerSat:[], averageSat:0}\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"stationUpdate = function(from, to) {\n stations.forEach(station => (station.popularity -= 0.01));\n from.popularity += 0.2;\n to.popularity += 0.2;\n\n if (from.popularity > 0.95) {\n from.popularity = 0.5;\n } else if (to.popularity > 0.95) {\n to.popularity = 0.5;\n }\n\n // Reallocate transportation methods based on the latest popularity\n for (let station of 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":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"passengerUpdate = function(traveler, cost, color) {\n traveler.budget -= cost;\n // Add some money to the budget\n traveler.budget += Math.random() * 10;\n traveler.satisfaction += 0.1;\n\n if (traveler.satisfaction > 1) {\n traveler.satisfaction = 1;\n }\n\n if (color == \"white\") {\n traveler.walkMove += 1;\n } else if (color == \"blue\") {\n traveler.bikeMove += 1;\n } else if (color == \"green\") {\n traveler.trainMove += 1;\n } else {\n traveler.carMove += 1;\n }\n}","pinned":true,"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":682,"value":"findMidPoint = function(station1, station2){\nreturn {x: (station1.x + station2.x)/2, y: (station1.y + station2.y)/2 }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"satisfactionData = {\n let satisfactions= [];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"{\n while(true){\n yield d3.mean(satisfaction.passengerSat,e=>e) \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"getSatisfactionData = function() {\n if (i=0; i