40:null 41:["$","title",null,{"children":"Rapid KL LRT September 2023 Ridership | Data Viz | Observable"}] 47:T167e,{ const sortedData = sortData(data) const margin = { top: 0, bottom: 0, left: 50, right: 50, } const height = 900 const svg = d3.create("svg") .attr("width", width) .attr("height", height + margin.top + margin.bottom) const g = svg.append("g") .attr("width", width) .attr("height", height) .attr("transform", `translate(0, ${margin.top} )`) // CONSTANTS const inboundColor = "#283350" const outboundColor = "#F05440" const strokeWidth = 1.5 const deselectedOpacity = 0.15 const maxDomain = d3.max([...data.map(d => d.outbound), ...data.map(d => d.inbound)]) const yAxisWidth = 80 const yAxisFontSize = 10 const yAxisLeftPadding = 16 // SCALES const inboundScale = d3.scaleLinear() .domain([0, maxDomain]) .rangeRound([width / 2 - yAxisWidth, 0 + margin.left]) const outboundScale = d3.scaleLinear() .domain([0, maxDomain]) .rangeRound([width / 2 + yAxisWidth, width - margin.right]) const yScale = d3.scaleBand() .domain(data.map(d => d.station)) .rangeRound([0, height]) .padding(0.1) // CHART components // inbound lines g.append("g") .selectAll("line") .data(sortedData) .join("line") .attr("x1", d => inboundScale(d.inbound)) .attr("x2", d => inboundScale(0)) .attr("y1", d => yScale(d.station)) .attr("y2", d => yScale(d.station)) .attr("stroke", inboundColor) .attr("stroke-width", strokeWidth) .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) // outbound lines g.append("g") .selectAll("line") .data(sortedData) .join("line") .attr("x1", d => outboundScale(0)) .attr("x2", d => outboundScale(d.outbound)) .attr("y1", d => yScale(d.station)) .attr("y2", d => yScale(d.station)) .attr("stroke", outboundColor) .attr("stroke-width", strokeWidth) .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) // arrow head path const triangleRight = d3.symbol().type(d3.symbolTriangle).size(20) // inbound arrows g.append("g") .selectAll("path") .data(sortedData) .join("path") .attr("d", triangleRight) .attr("fill", inboundColor) .attr("transform", d => `translate(${inboundScale(0)}, ${yScale(d.station)}) rotate(90)`) .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) // outbound arrows g.append("g") .selectAll("path") .data(sortedData) .join("path") .attr("d", triangleRight) .attr("fill", outboundColor) .attr("transform", d => `translate(${outboundScale(d.outbound)}, ${yScale(d.station)}) rotate(90)`) .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) // inbound text g.append("g") .selectAll("text") .data(sortedData) .join("text") .text(d => d3.format(".2s")(d.inbound)) .attr("x", d => inboundScale(d.inbound) - 4) .attr("y", d => yScale(d.station)) .attr("fill", inboundColor) .attr("fill-opacity", showLabels.includes("Inbound") ? 1 : 0) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .style("font-weight", 500) .style("font-family", "sans-serif") .style("font-size", yAxisFontSize) .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) // outbound text g.append("g") .selectAll("text") .data(sortedData) .join("text") .text(d => d3.format(".2s")(d.outbound)) .attr("x", d => outboundScale(d.outbound) + 6) .attr("y", d => yScale(d.station)) .attr("fill", outboundColor) .attr("fill-opacity", showLabels.includes("Outbound") ? 1 : 0) .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .style("font-weight", 500) .style("font-family", "sans-serif") .style("font-size", yAxisFontSize) .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) // chart header g.append("g") .append("text") .text("Inbound riders → Station → Outbound riders") .attr("x", d => inboundScale(0) + yAxisLeftPadding) .attr("y", 0) .attr("fill", "black") .attr("text-anchor", "start") .attr("dominant-baseline", "hanging") .style("transform", `translate(-${getTextWidth("Inbound riders → ") + 6}px, 0)`) .style("font-family", "sans-serif") .style("font-size", yAxisFontSize) .style("font-weight", 700) // helper lines to connect and lengthen outbound lines to y-axis labels if (showHelperLines){ g.append("g") .selectAll("line") .data(sortedData) .join("line") .attr("x1", inboundScale(0) + yAxisLeftPadding) .attr("x2", outboundScale(0)) .attr("y1", d => yScale(d.station)) .attr("y2", d => yScale(d.station)) .attr("stroke", outboundColor) .attr("stroke-width", strokeWidth) .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) } // white background to hide helper lines g.append("g") .selectAll("rect") .data(sortedData) .join("rect") .attr("x", d => inboundScale(0) + yAxisLeftPadding) .attr("y", d => yScale(d.station)) .attr("width", d => getTextWidth(d.station) + 10) .attr("height", 10) .attr("fill", "white") .attr("transform", `translate(0, -${yScale.bandwidth() / 2})`) // y-axis text (left aligned) g.append("g") .selectAll("text") .data(sortedData) .join("text") .text(d => d.station) .attr("x", inboundScale(0) + yAxisLeftPadding) .attr("y", d => yScale(d.station)) .attr("fill", "black") .attr("text-anchor", "start") .attr("opacity", d => showLine(d.line) ? 1 : deselectedOpacity) .attr("dominant-baseline", "middle") .style("font-family", "sans-serif") .style("font-size", yAxisFontSize) return svg.node() }48:[{"id":"8a170e997f1da27dc1b3587090a44a68033498cc012f68c5317adfb282c1a36b9db5498ba61722137a966461040fa0bc8834003ed2db3d80af94954bd280f8d2","href":"https://static.observableusercontent.com/files/8a170e997f1da27dc1b3587090a44a68033498cc012f68c5317adfb282c1a36b9db5498ba61722137a966461040fa0bc8834003ed2db3d80af94954bd280f8d2","name":"ridership-by-station.json","type":"application/json","lastModified":1699212865216.332,"size":7119},{"id":"65f73daef06e6149b072ae0ead827c7a28481f1822b698516107d92ad1250e7348215358f7d3d51a2f19abad282afd14ee3c09c08d73fe8b418e68daaf684501","href":"https://static.observableusercontent.com/files/65f73daef06e6149b072ae0ead827c7a28481f1822b698516107d92ad1250e7348215358f7d3d51a2f19abad282afd14ee3c09c08d73fe8b418e68daaf684501","name":"2023115_1759_ridership-by-station.json","type":"application/json","lastModified":1699225197275.672,"size":6793},{"id":"f6b1496a02f2d2a9bbf35629054f8b8716aa43a2fff40863eed77a5a3ee1c1577f52384739e4b8e3a850447c8e17bc2e231241cc534a1845833e6dc0b07a5519","href":"https://static.observableusercontent.com/files/f6b1496a02f2d2a9bbf35629054f8b8716aa43a2fff40863eed77a5a3ee1c1577f52384739e4b8e3a850447c8e17bc2e231241cc534a1845833e6dc0b07a5519","name":"2023115_2208_ridership-by-station.json","type":"application/json","lastModified":1699240205893.426,"size":9213},{"id":"d8d7dce0caba66a33ba63f5c4e3c70ddf52587f8b3fa81ee9defab77d85cdee975173603f9c7a28b94c068cf990d6365a762e0f386cfde23501516ef27763dc2","href":"https://static.observableusercontent.com/files/d8d7dce0caba66a33ba63f5c4e3c70ddf52587f8b3fa81ee9defab77d85cdee975173603f9c7a28b94c068cf990d6365a762e0f386cfde23501516ef27763dc2","name":"2023118_2223_ridership-by-station.json","type":"application/json","lastModified":1699500242741.099,"size":9561},{"id":"ed0d094e6644c1c38913400e8b12065bcd78866b21af646b3fc598472b399ae7936eca9d4573fbf920b169ac13ac7f37a31acc8e2e5881447ec9ca522f0a5a72","href":"https://static.observableusercontent.com/files/ed0d094e6644c1c38913400e8b12065bcd78866b21af646b3fc598472b399ae7936eca9d4573fbf920b169ac13ac7f37a31acc8e2e5881447ec9ca522f0a5a72","name":"20230211_integrated_kv_transit_map (1).jpg","type":"image/jpeg","lastModified":1699502954932.798,"size":1107468},{"id":"23c1ea7c63a0185d931ff32dfc40b8cbb87a88acca3c28739e63620cce6c2e95966085d3a9598f5b16860b18f21ae3eee8bf1d29d341ca2d5809ce3a5dc7c040","href":"https://static.observableusercontent.com/files/23c1ea7c63a0185d931ff32dfc40b8cbb87a88acca3c28739e63620cce6c2e95966085d3a9598f5b16860b18f21ae3eee8bf1d29d341ca2d5809ce3a5dc7c040","name":"Rapid KL LRT Transit Map.jpg","type":"image/jpeg","lastModified":1699330653730.355,"size":153148}] 45:{"id":"07797898cdc2b375","slug":"rapid-kl-lrt-september-2023-ridership","title":"Rapid KL LRT September 2023 Ridership","thumbnail":"6f56c7c2b94ff89d69e8c8e716bc1f4b223d292dd6b0d10e099004b22cf473b3","access_level":"public","create_time":"$D2023-11-05T15:28:59.132Z","update_time":"$D2023-11-09T04:48:23.536Z","view_time":null,"first_public_time":"$D2023-11-05T15:28:59.132Z","has_unpublished_edits":null,"fork":{"id":"0c645f87358aec71","slug":null,"title":"D3 Starter Template","owner":{"id":"1c660fb032733c47","login":"datawizard","name":"Data Viz"}},"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":768,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rapid KL LRT September 2023 Ridership","cells":[{"id":0,"value":"# Rapid KL LRT September 2023 Ridership","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"Data source: [Public Sector Open Data](https://data.gov.my/dashboard/rapid-explorer), [Prasarana Malaysia Bhd](https://myrapid.com.my/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"#### What is Rapid KL?\n\n[Rapid KL LRT (Light Rail Transit)](https://myrapid.com.my/bus-train/rapid-kl/lrt/) is one of the most heavily used public transportation system in Kuala Lumpur, Malaysia that consists of 3 lines: \n1. Kelana Jaya line\n2. Ampang line\n3. Sri Petaling line\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":701,"value":"**Ridership Overview**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Line	No. of stations	Inbound ridership	Outbound ridership
Kelana Jaya	${getNumberOfStations(\"kelana-jaya\")}	${formatNumber(getRidership(\"kelana-jaya\", \"inbound\"))}	${formatNumber(getRidership(\"kelana-jaya\", \"outbound\"))}
Ampang	${getNumberOfStations(\"ampang\")}	${formatNumber(getRidership(\"ampang\", \"inbound\"))}	${formatNumber(getRidership(\"ampang\", \"outbound\"))}
Sri Petaling	${getNumberOfStations(\"sri-petaling\")}	${formatNumber(getRidership(\"sri-petaling\", \"inbound\"))}	${formatNumber(getRidership(\"sri-petaling\", \"outbound\"))}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"Two things to keep in mind:\n1. Ridership only takes into account travel between these 3 lines\n2. Sri Petaling line is a subset of Ampang line ([See transit map](https://myrapid.com.my/bus-train/rapid-kl/rapid-kl-integrated-transit-map/))\n3. Masjid Jamek and Putra Heights station is shared by Kelana Jaya and Ampang line ([See transit map](https://myrapid.com.my/bus-train/rapid-kl/rapid-kl-integrated-transit-map/))\n\n_Transit map is also available in the appendix_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"#### How to interpret the chart?\n\nThe chart below shows ${htl.html`inbound`} and ${htl.html`outbound`} ridership within Rapid KL's LRT system in the month of September 2023 with controls to:\n1. Show/hide stations by line\n2. Show/hide ridership values\n3. Show/hide helper lines to connect station to outbound line\n4. Sort by inbound, outbound or combined (default) ridership","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":741,"value":"#### Rapid KL LRT September 2023 Ridership","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"viewof lineFilter = Inputs.checkbox([\"Kelana Jaya\", \"Ampang\", \"Sri Petaling\"], {label: \"Show stations for\", value: [\"Kelana Jaya\", \"Ampang\", \"Sri Petaling\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof showLabels = Inputs.checkbox([\"Inbound\", \"Outbound\"], {label: \"Show ridership #\", value: [\"Inbound\", \"Outbound\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"viewof showHelperLines = Inputs.toggle({label: \"Show helper lines\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"viewof sortBy = Inputs.select(\n [\"Combined ridership\", \"Inbound ridership\", \"Outbound ridership\"], \n {label: \"Sort by\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"data = FileAttachment(\"2023118_2223_ridership-by-station.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"function getNumberOfStations(line) {\n return data.filter(d => d.line.find(l => l === line) ? true : false).length\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"function getRidership(line, key) {\n const value = data\n .filter(d => d.line.find(l => l === line) ? true : false)\n .reduce((prev, curr) => prev + curr[key], 0)\n \n return value\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"function sortData(data) {\n const sortKey = sortBy === \"Inbound ridership\" \n ? \"inbound\" \n : sortBy === \"Outbound ridership\" \n ? \"outbound\" \n : \"total\"\n \n return data.sort((a, b) => b[sortKey] - a[sortKey])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"function getTextWidth(text, fontSize) {\n const canvas = document.createElement('canvas')\n const context = canvas.getContext('2d');\n\n context.font = `${fontSize}px sans-serif`\n\n return context.measureText(text).width\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"function showLine(line) {\n const formattedLineFilter = lineFilter.map(l => l.replaceAll(\" \", \"-\").toLowerCase())\n \n for (const lf of formattedLineFilter)\n if (line.find(l => l == lf)) return true\n\n return false\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"function formatNumber(value) {\n return d3.format(\".3s\")(value)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"**Klang Valley Integrated Transit Map**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":689,"value":"_integrated_kv_transit_map1 = FileAttachment(\"20230211_integrated_kv_transit_map (1).jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"Source: https://myrapid.com.my/bus-train/rapid-kl/rapid-kl-integrated-transit-map/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"