3e:null 3f:["$","title",null,{"children":"Example | Data Viz | Observable"}] 45:Tbdd,{ const margin = { top: 0, bottom: 0, left: 5, right: 50, }; const height = 500; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append("g") .attr("width", width) .attr("height", height) .attr("transform", `translate(${margin.left}, ${margin.top} )`); const rScale = d3.scaleRadial( [ Math.min(...data.map((d) => d.ridership[d.minIndex])), Math.max(...data.map((d) => d.ridership[d.minIndex])), ], [1, 7], ); const curve = d3 .line() .x((d) => d[0]) .y((d) => d[1]) .curve(d3.curveNatural); const selangor = ({ ...geojson, features: geojson.features.filter(f => // f.properties.state === "Selangor" || f.properties.district === "Petaling" || f.properties.state === "W.P. Kuala Lumpur" ) }) const projection = d3.geoMercator().fitExtent( [ [0, 0], [width, 500], ], selangor, ); const path = d3.geoPath().projection(projection); // selangor g .append("g") .selectAll("path") .data(selangor.features) .join("path") .attr("d", path) .attr("fill", "#09090b") // .attr("fill-opacity", "25%") .attr("stroke", "white") .attr("stroke-width", 0.5); // .attr("stroke-opacity", "75%"); const kjPath = curve( stops .filter((stop) => stop.stop_id.includes("KJ")) .sort() .reverse() .map( (stop) => projection([stop.stop_lon, stop.stop_lat]), ), ); const agPath = curve( stops .filter((stop) => stop.stop_id.includes("AG")) .sort() .reverse() .map( (stop) => projection([stop.stop_lon, stop.stop_lat]), ), ); const spPath = curve( stops .filter((stop) => stop.stop_id.includes("SP")) .sort() .reverse() .map( (stop) => projection([stop.stop_lon, stop.stop_lat]), ), ); // kj line g.append("g") .append("path") .attr("d", kjPath) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-opacity", 0.75); // ag line g.append("g") .append("path") .attr("d", agPath) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-opacity", 0.5); // sp line g.append("g") .append("path") .attr("d", spPath) .attr("fill", "none") .attr("stroke", "yellow") .attr("stroke-opacity", 0.5); // stations with average ridership const stations = g .append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => projection([d.longitude, d.latitude])[0]) .attr("cy", (d) => projection([d.longitude, d.latitude])[1]) .attr("r", (d) => rScale(d.ridership[date - 1]), ) .attr("fill", (d) => getLineColor(d.line)) .attr("fill-opacity", 0.5) .attr("stroke", (d) => getLineColor(d.line)) .attr("stroke-opacity", 1) return svg.node() }46:T415,events = [ { name: "Pekan Jiwa Malaysia", date: "2023-09-08", station: "Pasar Seni", }, { name: "Pekan Jiwa Malaysia", date: "2023-09-09", station: "Pasar Seni", }, { name: "Wakin Chau concert", date: "2023-09-09", station: "Bukit Jalil", }, { name: "Malaysia Day", date: "2023-09-16", station: "Masjid Jamek", }, { name: "Pesta Santai-Santai", date: "2023-09-16", station: "Pasar Seni", }, { name: "Pesta Santai-Santai", date: "2023-09-17", station: "Pasar Seni", }, { name: "Karnival Kita Ok", date: "2023-09-23", station: "Pasar Seni", }, { name: "Karnival Kita Ok", date: "2023-09-24", station: "Pasar Seni", }, { name: "Prophet Muhammad's birthday", date: "2023-09-28", station: "Pasar Seni", }, { name: "Jalan-Jalan Bula Pesta Tanglung", date: "2023-09-30", station: "Pasar Seni", }, { name: "Short+Sweet Film Festival", date: "2023-09-30", station: "KLCC", }, ];47:[{"id":"ff569a75e3d0e51125d2dfe7856ef1bd0404f4c896cdfdcc88c911b66ec13c6f760e4e14ac3f57d473de98347ee56fc10a539472683d85217c7d01ac959715f0","href":"https://static.observableusercontent.com/files/ff569a75e3d0e51125d2dfe7856ef1bd0404f4c896cdfdcc88c911b66ec13c6f760e4e14ac3f57d473de98347ee56fc10a539472683d85217c7d01ac959715f0","name":"district.json","type":"application/json","lastModified":1703794676125.19,"size":1444439},{"id":"a9770e6eb298f1b0cceb903d2e4007fe3890ccef0a5b0643d72fe383d3831e716bdc6ce28ea2de0e9fe4495c562c8180c39d31ce1423a5db7db17f5c5f1c1625","href":"https://static.observableusercontent.com/files/a9770e6eb298f1b0cceb903d2e4007fe3890ccef0a5b0643d72fe383d3831e716bdc6ce28ea2de0e9fe4495c562c8180c39d31ce1423a5db7db17f5c5f1c1625","name":"stops.json","type":"application/json","lastModified":1703794887640.487,"size":22976},{"id":"db74fe96871976c2919e5601949735b75febbbfa0bf1bbfc23bf5fa5a2edb068e605f2fd0191b50ec0e2d1ab1a0a785b75c9a4ba15318cb5d149e36dd2809685","href":"https://static.observableusercontent.com/files/db74fe96871976c2919e5601949735b75febbbfa0bf1bbfc23bf5fa5a2edb068e605f2fd0191b50ec0e2d1ab1a0a785b75c9a4ba15318cb5d149e36dd2809685","name":"ridership-by-date.json","type":"application/json","lastModified":1703794969897.764,"size":100655}] 43:{"id":"aac9104ad34439bd","slug":null,"title":"Example","thumbnail":"f3b90ff63e7f121ab733f44f42fb2c69cfb4d1be66a2720c298e2f136a7000cf","access_level":"public","create_time":"$D2023-12-28T19:34:23.394Z","update_time":"$D2023-12-28T20:30:17.560Z","view_time":null,"first_public_time":"$D2023-12-28T19:34:23.394Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1c660fb032733c47","login":"datawizard","name":"Data Viz","avatar_url":"https://avatars-next.observableusercontent.com/82a864f18e2edc7beb9196bdaa393c009e55a3d32ca71ae51c76303d85aaf8bb","tier":"starter_2024","bio":"","following":false},"version":138,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce492f681ddef189","login":"itschrislow","name":"Chris Low","avatar_url":"https://avatars-next.observableusercontent.com/032ef5467662508d04e067fb58a56110e580b7595a1382ac3a8215d2350e5b5d","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"1c660fb032733c47","login":"datawizard","name":"Data Viz","avatar_url":"https://avatars-next.observableusercontent.com/82a864f18e2edc7beb9196bdaa393c009e55a3d32ca71ae51c76303d85aaf8bb","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ce492f681ddef189","login":"itschrislow","name":"Chris Low","avatar_url":"https://avatars-next.observableusercontent.com/032ef5467662508d04e067fb58a56110e580b7595a1382ac3a8215d2350e5b5d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Example","cells":[{"id":0,"value":"# Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof date = Inputs.range([1, 30], {label: \"September\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"#### Events on September ${date}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"## Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"viewof station = Inputs.select([\"A\", \"B\"], {label: \"Station\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"\n \n \n \n \n \n \n \n \n ${events.map(event => htl.html`\n \n \n \n `)}\n \n

Date	Event	Station
${new Date(event.date).toUTCString().substring(0, 11)}	${event.name}	${event.station}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"data = FileAttachment(\"ridership-by-date.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"stops = FileAttachment(\"stops.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"## Bar-Line chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"selangor = ({ ...geojson, features: geojson.features })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"geojson = FileAttachment(\"district.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"function getLineColor(line) {\n return line === \"kelana-jaya\" ? \"red\" : line === \"ampang\" ? \"orange\" : \"yellow\";\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"