31:T123f,chart = { const containerWidth = 1152; // Total width including margins const containerHeight = 450; // Total height including margins const margin = { top: 60, right: 50, bottom: 50, left: 100 }; // Define margins const chartWidth = containerWidth - margin.left - margin.right; // Effective chart width const chartHeight = containerHeight - margin.top - margin.bottom; // Effective chart height // Create and configure SVG element const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("width", containerWidth) .attr("height", containerHeight) .attr("style", "max-width: 100%; height: auto; background-color: #2f3a3a"); // Create a group element to hold the chart content, adjusting for margins const chartContainer = svg .append("g") .attr("class", "g-chart-container") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Header container for title const headerContainer = svg .append("g") .attr("transform", `translate(${containerWidth / 2}, ${margin.top / 1.5})`) .attr("class", "g-header-container"); // Add chart heading headerContainer .append("text") .attr("x", 0) .attr("y", 0) .text("NHAI Toll Collection In India") .attr("fill", "#00FFFF") .attr("font-size", "30px") .attr("text-anchor", "middle"); // Header container for sub-title const subHeaderContainer = svg .append("g") .attr( "transform", `translate(${containerWidth / 2}, ${ containerHeight - margin.bottom / 2.5 })` ) .attr("class", "g-sub-header-container"); // Add chart subheading (Note section) subHeaderContainer .append("text") .attr("x", 0) .attr("y", 0) .text("Note: Amount is in Rs. Crore per day") .attr("fill", "#D3D3D3") .attr("font-size", "15px") .attr("text-anchor", "middle"); // Bar group container const barRoadGroup = chartContainer .append("g") .attr("class", "bar-road-container"); // Define x-scale (linear scale for values) const xScale = d3 .scaleLinear() .domain([0, d3.max(chartData, (d) => d.value)]) .range([0, chartWidth]); // Define y-scale (band scale for years) const yScale = d3 .scaleBand() .domain(chartData.map((d) => d.year)) .range([0, chartHeight]) .padding(0.3); // Draw bars (representing roads) barRoadGroup .selectAll("rect.road-rect") .data(chartData) .join("rect") .attr("class", "road-rect") .attr("x", xScale(0)) .attr("y", (d) => yScale(d.year)) .attr("width", (d) => xScale(d.value)) .attr("height", yScale.bandwidth()) .attr("fill", "#212121"); // Add fiscal year labels on the left barRoadGroup .selectAll("text.year-label") .data(chartData) .join("text") .attr("class", "year-label") .attr("x", -10) .attr("y", (d) => yScale(d.year) + yScale.bandwidth() / 2) .text((d) => d.year) .attr("fill", "#FFFFFF") .attr("font-size", "15px") .attr("text-anchor", "end") .attr("dominant-baseline", "middle"); // Add value labels on bars barRoadGroup .selectAll("text.value-label") .data(chartData) .join("text") .attr("class", "value-label") .attr("x", (d) => xScale(d.value)) .attr("dx", 5) // Offset for readability .attr("y", (d) => yScale(d.year) + yScale.bandwidth() / 2) .text((d) => d.value) .attr("fill", "#FFD700") .attr("font-size", "20px") .attr("dominant-baseline", "middle"); // Draw center white dotted lines on bars barRoadGroup .selectAll("line.center-white-line") .data(chartData) .join("line") .attr("class", "center-white-line") .attr("x1", xScale(0)) .attr("y1", (d) => yScale(d.year) + yScale.bandwidth() / 2) .attr("x2", (d) => xScale(d.value)) .attr("y2", (d) => yScale(d.year) + yScale.bandwidth() / 2) .attr("stroke", "#FFFFFF") .attr("stroke-width", 1) .attr("stroke-dasharray", "15,15"); // Draw yellow and white dotted guide lines barRoadGroup .selectAll("line.yellow-line") .data( chartData.flatMap((d) => { const rectY = yScale(d.year); const rectHeight = yScale.bandwidth(); return [ { ...d, y: rectY + rectHeight * 0.1 }, // Line 10% from top { ...d, y: rectY + rectHeight * 0.9 } // Line 10% from bottom ]; }) ) .join("line") .attr("class", "yellow-line") .attr("x1", xScale(0)) .attr("x2", (d) => xScale(d.value)) .attr("y1", (d) => d.y) .attr("y2", (d) => d.y) .attr("stroke", "#FFD700") .attr("stroke-width", 1); return svg.node(); }32:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744291497267.326,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744291499207.912,"size":2966}] 2f:{"title":"NHAI's Daily Toll Revenue Insights","cells":[{"id":195,"value":"

NHAI's Daily Toll Revenue Insights

Chart Type: Bar Chart, Tech Stack: D3.js, SVG

Data Sources: National Electronic Toll Collection

","pinned":false,"hidden":false,"mode":"html"},{"id":13,"value":"

The National Highways Authority of India (NHAI) collects daily tolls to fund highway maintenance and development. This analysis highlights NHAI's daily toll revenue and its role in improving India's road infrastructure.

","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":298,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":282,"value":"### Chart Data ","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"// data (in crores per day)\nchartData = [\n { year: \"FY21\", value: 76 },\n { year: \"FY22\", value: 104 },\n { year: \"FY23\", value: 148 },\n { year: \"*FY24\", value: 178 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"

\n \n $\"Observable$ \n \n \n $\"D3.js\"$ \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":316,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"*[D3.js Docs.](https://d3js.org/getting-started) | [Observable Notebook Docs.](https://observablehq.com/documentation/notebooks/) | [SVG Docs.](https://developer.mozilla.org/en-US/docs/Web/SVG)* ","pinned":false,"hidden":false,"mode":"md"},{"id":306,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"*The author utilized AI tools such as Gemini and ChatGPT as coding assistants during the development of this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"

⚠️ Disclaimer ⚠️

\n This project provides data visualizations for informational purposes only. While we aim for accuracy, the data may contain errors or omissions. It should not be used as financial, legal, or professional advice. We are not responsible for any decisions made based on this information. Use at your own discretion.\n

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}