28:null 29:["$","title",null,{"children":"Untitled | Vincent Liu | Observable"}] 2e:Te2e,chart = { const width = 900,//pixel size of the map height = 900; const svg = d3.create("svg") .attr("viewBox", [0, 0, width-50, height-10]); // Use Mercator projection var projection = d3 .geoMercator()//projection system used .fitSize([width, height], box);//out bounding box is here var path = d3.geoPath().projection(projection);//need one of these for each line layer from qgis 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 path6 = d3.geoPath().projection(projection); var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type var c = svg.selectAll("circle")//for circles var p = svg.selectAll("polyline")//for polylines from rhino var t = svg.selectAll("text")//for polylines from rhino //static lines from qgis //staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)") staticLines(path3, parks.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)") staticLines(path4, blocks.features,"none",1,.5,"rgb(8,8,8)",'.25','.1',"rgb(0,100,0)") staticLines(path5, boroughs.features,"none",1,1,"rgb(8,8,8)") function staticLines(path, data, sfill, sOpac, sW, stroke){ g.enter().append("path") .data(data) //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", path) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", sfill) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke", stroke) } //static points from qgis //lines from rhino function fillColor(d){ var color = 'rgb(255,0,0)' if(d.ID == 1){color = 'rgb(50,0,0)'} if(d.ID == 2){color = 'rgb(100,0,0)'} if(d.ID == 3){color = 'rgb(150,0,0)'} if(d.ID == 4){color = 'rgb(200,0,0)'} return color } c.enter().append('circle') .data(combinedData) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('class','spots') .attr('cx',function(d) {return projection([d.lon,d.lat])[0]}) .attr("cy",function(d) {return projection([d.lon,d.lat])[1]}) //.attr('r', 4) .attr('r', function(d) {return d.data[0].num_bikes_available/10}) .attr('fill', fillColor) .style('fill-opacity','1') .style("stroke", "black") .style("stroke-width", "1") .on("mouseover", addText) .on("mouseout", removeText) function addText(event,d){ /* svg.text({ pos: [30, 20], text: "Bikes Available", fontSize: 15, fill: "#38896F" }); */ svg//draw text .append("text") //appends path to data .attr('class','mText') .attr('x',30) .attr("y",30) .attr('fill', 'black') .style('font-family','helvetica') .style("font-size", "12px") .text('Bikes Available: ' + d.data[0].num_bikes_available) svg//draw text .append("text") //appends path to data .attr('class','mText') .attr('x',30) .attr("y",50) .attr('fill', 'black') .style('font-family','helvetica') .style("font-size", "12px") .text('Docks Available: ' + d.data[0].num_docks_available) svg//draw text var wrap = svg.selectAll("text.mText") .each(function(d, i) { wrap_text(d3.select(this), 100) }); } function removeText(){ svg.selectAll('text.mText').remove() } return svg.node(); }2f:[{"id":"12dd4e83dec3224d5ad04d7c011e25cc0ec1ba3c51450c2b5621065ff2c0f6a8f909882265574b35eb29c69eaf959ab669fab6d355e0cfb0c5a451153ccda545","href":"https://static.observableusercontent.com/files/12dd4e83dec3224d5ad04d7c011e25cc0ec1ba3c51450c2b5621065ff2c0f6a8f909882265574b35eb29c69eaf959ab669fab6d355e0cfb0c5a451153ccda545","name":"test@1.json","type":"application/json","lastModified":1734374070773.136,"size":20760},{"id":"f4c213f1facc45483a1fc2e35a89c21b0302d32cf7b6cc3b468638f51b5c6270ac983f74b4851516bb213d83f15ed0b06b00499d4f8b97ba9d4efd6802f9a221","href":"https://static.observableusercontent.com/files/f4c213f1facc45483a1fc2e35a89c21b0302d32cf7b6cc3b468638f51b5c6270ac983f74b4851516bb213d83f15ed0b06b00499d4f8b97ba9d4efd6802f9a221","name":"extractedData.json","type":"application/json","lastModified":1734366753247.088,"size":22390659},{"id":"c789875d2c7968f96a2aff879335aa1bfabff0eaf8b5bdb6d90e8fb8938abc25a3cbbf25af3ffbef3c023c4ff0e79005d33e593ecc512196c56bec8aeea8aaa8","href":"https://static.observableusercontent.com/files/c789875d2c7968f96a2aff879335aa1bfabff0eaf8b5bdb6d90e8fb8938abc25a3cbbf25af3ffbef3c023c4ff0e79005d33e593ecc512196c56bec8aeea8aaa8","name":"box_bicycle.geojson","type":"application/geo+json","lastModified":1734367688083.413,"size":500},{"id":"3df585709ba59125ec856a911a046c4623e5e35263d565fe7dbc13f802a5d784cd2c9a8c0bc8c6b117edda0d6b337f64504001719254cbc28279a46dac536065","href":"https://static.observableusercontent.com/files/3df585709ba59125ec856a911a046c4623e5e35263d565fe7dbc13f802a5d784cd2c9a8c0bc8c6b117edda0d6b337f64504001719254cbc28279a46dac536065","name":"boroughs.geojson","type":"application/geo+json","lastModified":1734367734702.964,"size":3712136},{"id":"78f7c4fbd93897bc16fefb2eb39b4204446a42cd5b9817e67bc9b348302f26a4ce9aaea3ed8d282a47d9fa19e11159533c820632138827c0b552a639ef5ea62c","href":"https://static.observableusercontent.com/files/78f7c4fbd93897bc16fefb2eb39b4204446a42cd5b9817e67bc9b348302f26a4ce9aaea3ed8d282a47d9fa19e11159533c820632138827c0b552a639ef5ea62c","name":"blocks.geojson","type":"application/geo+json","lastModified":1734367742911.996,"size":7192125},{"id":"4dddbe06b54660a59f6450ee5c0b9c7576f09ad53dcdd16c10617469a208fa84700752473990fc4cab12aab6d2162e63a778d0d147c8d931420027e60151366a","href":"https://static.observableusercontent.com/files/4dddbe06b54660a59f6450ee5c0b9c7576f09ad53dcdd16c10617469a208fa84700752473990fc4cab12aab6d2162e63a778d0d147c8d931420027e60151366a","name":"Park.geojson","type":"application/geo+json","lastModified":1734367761772.811,"size":18114771},{"id":"a30e2212d52b1a8342987ee516268f824e55b44f09689f1e65a29cb43b94fd320ce677c8984ce8b37b459751476bd33fcab0f63f076905f3e4add95c5dfe182d","href":"https://static.observableusercontent.com/files/a30e2212d52b1a8342987ee516268f824e55b44f09689f1e65a29cb43b94fd320ce677c8984ce8b37b459751476bd33fcab0f63f076905f3e4add95c5dfe182d","name":"extractedData - Copy.json","type":"application/json","lastModified":1734372540404.375,"size":22390679},{"id":"dcb5fea8ad73f4e419effeb67c80ddebb3b5c016af10d7e9e8d0d961050b57b94ecff58b38c18efebe4a25de118aa78ed33c1b1de3134a0b92821de90a0c2188","href":"https://static.observableusercontent.com/files/dcb5fea8ad73f4e419effeb67c80ddebb3b5c016af10d7e9e8d0d961050b57b94ecff58b38c18efebe4a25de118aa78ed33c1b1de3134a0b92821de90a0c2188","name":"extractedData - Copy@1.json","type":"application/json","lastModified":1734372838605.177,"size":22390682}] 2c:{"id":"2b823f5ea185d9ae","slug":null,"title":"Untitled","thumbnail":"6af39977b89513110dea6c88ffa9cb1bb80e4b5117e90f7fc7a77b4c6456635a","access_level":"public","create_time":"$D2024-12-10T17:34:16.843Z","update_time":"$D2024-12-16T19:45:39.160Z","view_time":null,"first_public_time":"$D2024-12-10T18:57:45.143Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5ffd80bb3345762d","login":"vincent-liu2","name":"Vincent Liu","avatar_url":"https://avatars-next.observableusercontent.com/769f9577b5ca36493bab43e3c1a3c4ed5aeebda68bd1da0685f3fc1758f350cb","tier":"starter_2024"},"version":143,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f73a1a0fd569bd33","login":"vincent-liu2","name":"Vincent Liu","avatar_url":"https://avatars-next.observableusercontent.com/8fa4395b0eccc19dbccc258f3ad605d7ad500013c7d2c56ad6d96bbeb6ff603c","tier":null}],"members":[{"type":"team","id":"5ffd80bb3345762d","login":"vincent-liu2","name":"Vincent Liu","avatar_url":"https://avatars-next.observableusercontent.com/769f9577b5ca36493bab43e3c1a3c4ed5aeebda68bd1da0685f3fc1758f350cb","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f73a1a0fd569bd33","login":"vincent-liu2","name":"Vincent Liu","avatar_url":"https://avatars-next.observableusercontent.com/8fa4395b0eccc19dbccc258f3ad605d7ad500013c7d2c56ad6d96bbeb6ff603c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"blocks = FileAttachment(\"blocks.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"boroughs = FileAttachment(\"boroughs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"parks = FileAttachment(\"Park.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"box = FileAttachment(\"box_bicycle.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"bikes = FileAttachment(\"extractedData.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"stationID = Object.keys(bikes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"stationInfo = Object.values(bikes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"station_infoLink = 'https://gbfs.lyft.com/gbfs/2.3/bkn/en/station_information.json'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"stations = d3.json(station_infoLink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"combinedData = {\n\n var newData = []\n\n for (let i = 0; i < stationID.length; i++) {\n //loop through stationinfolink\n var bikesID = stationID[i]\n for (let n = 0; n < stations.data.stations.length; n++) {\n var stationsID = stations.data.stations[n].station_id\n\n if(bikesID == stationsID){\nnewData.push({id:stationID[i],lat:stations.data.stations[n].lat,lon:stations.data.stations[n].lon,name:stations.data.stations[n].name,data:stationInfo[i]})\n }\n }\n }\nreturn newData \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// Define the columns you want to fetch\n\n\n// Fetch data from the API\ndata = {\n const response = await fetch(`http://localhost:3000/csv?columns=${\"start_lat,start_lng\"}`);\n if (!response.ok) {\n throw new Error(`Failed to fetch data: ${response.statusText}`);\n }\n return response.json();\n} \n\n\n/*data = fetch(`http://localhost:3000/csv?columns=${\"ride_id\"}`);\n\n/* Inputs.table(data); \n\n// Display the data in a table\n/* html\n \n \n \n ${Object.keys(data.data[0] || {}).map(key => html``)}\n \n \n \n ${data.data.map(row => html`\n \n ${Object.values(row).map(value => html``)}\n \n `)}\n \n

${key}
${value}

\n*/\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1"}} 2d:"$2c:body"