31:T457, 32:T511,## Setting the 'y' Attribute (Bar's Starting Point): Notice that the y-attribute for the rectangles is calculated as "yScale(d.sales)" - The y value of each bar is where the top of the bar will be placed. - Since higher sales should appear higher up on the chart, yScale(d.sales) ensures that larger sales numbers are mapped to smaller y values (closer to the top). - The lower the sales value, the further down the y-coordinate will be (closer to the bottom of the chart). ## Calculating the 'height' of Each Bar: The height is calculated as such in the above example:
.attr('height', d => yScale(0) - yScale(d.sales)) - The height of a bar is the difference between the y-coordinate for the bottom of the bar (yScale(0)) and the y-coordinate for the top of the bar (yScale(d.sales)). This ensures that: - For a sales value of 0, the bar height is 0 and starts at co-ordinate 0 (the bar doesn't show up). - For larger sales values, the height increases as the difference between yScale(0) (bottom) and yScale(d.sales) (top) gets larger. This subtraction is key because, in the SVG coordinate system, the larger the y value, the lower the position, and vice versa. Therefore, the height needs to account for this inversion by subtracting the top position from the bottom position.33:[{"id":"51708dd89e5a6c727e77b809eeac6442d4f8d8b37102f28412c46e1771dd11d9318cf7e36991cbaa5b472209914773b31e6e5e9eb499d381333597ab029dcb58","href":"https://static.observableusercontent.com/files/51708dd89e5a6c727e77b809eeac6442d4f8d8b37102f28412c46e1771dd11d9318cf7e36991cbaa5b472209914773b31e6e5e9eb499d381333597ab029dcb58","name":"Untitled Diagram.drawio (2).svg","type":"image/svg+xml","lastModified":1727931822305.464,"size":191605}] 2f:{"title":"Understanding scales and co-ordinate mapping","cells":[{"id":27,"value":"# Understanding scales and co-ordinate mapping","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":25,"value":"Consider the following dummy data of sales for 2 days of the week, we will ignore all axes and just focus on understanding the logic behind the scales used in this example","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":" salesData = [\n { day: 'Monday', sales: 100 },\n { day: 'Tuesday', sales: 200 },\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"margin = {\n return { top: 40, right: 40, bottom: 40, left: 40 }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"### Why do we translate 0 in the data domain to the co-ordinate \"height - margin.bottom\", and max in the data domain to \"margin.top\"?\n\nIn a vertical bar chart, we want the y-axis to start at 0 at the bottom and increase upwards. But in an SVG, the coordinate system is flipped—0 is at the top, and values increase as you go down.\n\nTo fix this:\n\n- The 0 in data needs to match the bottom of the chart (largest y-value in the SVG).\n- The highest data value should be at the top of the chart (smallest y-value in the SVG).\n\nThis means you have to reverse the y-axis when converting data to the SVG coordinate system.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(salesData, d => d.sales)])\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"Now, we will plot two rectangles corresponding to the above data and scales","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"{\n \nconst svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\nsvg.selectAll('rect')\n .data(salesData)\n .join('rect') // Use 'join' instead of 'enter()' and 'append()'\n .attr('x', (d, i) => i * 70) // Position bars horizontally\n .attr('y', d => yScale(d.sales))\n .attr('width', 60)\n .attr('height', d => yScale(0) - yScale(d.sales))\n .attr('fill', 'steelblue');\n\n//append guidance lines\nreturn svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"untitledDiagramDrawio2 = FileAttachment(\"Untitled Diagram.drawio (2).svg\").image()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}