2f:T459,bar_chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height_barII]); svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(fruits) .join("rect") .attr("x", xScale_barII(0)) .attr("y", (d, i) => yScale_barII(i)) .attr("width", d => xScale_barII(d.count) - xScale_barII(0)) .attr("height", yScale_barII.bandwidth()); svg .append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(fruits) .join("text") .attr("x", d => xScale_barII(d.count)) .attr("y", (d, i) => yScale_barII(i) + yScale_barII.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => d.count) .call(text => text .filter(d => xScale_barII(d.count) - xScale_barII(0) < 127) // short bars, e.g. x(3) - x(0) .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start") ); svg.append("g").call(xAxis_barII); svg.append("g").call(yAxis_barII); return svg.node(); }30:T40c,html``31:[] 2d:{"title":"Fruit-based Bar and Column Charts","cells":[{"id":0,"value":"md`# Fruit-based Bar and Column Charts\nSource: [Learn D3: Scales](https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3)`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Fruit Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"fruits = [\n { name: \"🍊\", count: 21 },\n { name: \"🍇\", count: 13 },\n { name: \"🍏\", count: 8 },\n { name: \"🍌\", count: 5 },\n { name: \"🍐\", count: 3 },\n { name: \"🍋\", count: 2 },\n { name: \"🍎\", count: 1 },\n { name: \"🍉\", count: 1 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"fruits.map(d => d.count) // the count dimension (quantitative)","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"fruits.map(d => d.name) // the name dimension (nominal)","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`# Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`## Version 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"margin_bar = ({ top: 30, right: 30, bottom: 30, left: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"xScale_bar = d3.scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .range([margin_bar.left, width - margin_bar.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"xScale_bar.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"xScale_bar.range()","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"yScale_bar = d3\n .scaleBand()\n .domain(fruits.map(d => d.name))\n .range([margin_bar.top, height_bar - margin_bar.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"yScale_bar.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"yScale_bar.range()","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"height_bar = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`## Version 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"xScale_barII = d3\n .scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .range([margin_barII.left, width - margin_barII.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"yScale_barII = d3\n .scaleBand()\n .domain(d3.range(fruits.length))\n .rangeRound([margin_barII.top, height_barII - margin_barII.bottom])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"xAxis_barII = (g) =>\n g\n .attr(\"transform\", `translate(0,${margin_barII.top})`)\n .call(d3.axisTop(xScale_barII))\n .call((g) => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"yAxis_barII = g =>\n g.attr(\"transform\", `translate(${margin_barII.left},0)`).call(\n d3\n .axisLeft(yScale_barII)\n .tickFormat(i => fruits[i].name)\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"barHeight = 25","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"height_barII = Math.ceil((fruits.length + 0.1) * barHeight) +\n margin_barII.top +\n margin_barII.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"margin_barII = ({ top: 30, right: 30, bottom: 30, left: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`# Column Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`## Version 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"margin_column = ({ top: 30, right: 30, bottom: 30, left: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"xScale_column = d3\n .scaleBand()\n .domain(fruits.map(d => d.name))\n .range([margin_column.left, width - margin_column.right])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"xScale_column.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"xScale_column.range()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"yScale_column = d3\n .scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .range([height_column - margin_column.bottom, margin_column.top])\n .nice()\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"yScale_column.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"yScale_column.range()","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"height_column = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`## Version 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"column_chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height_columnII]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(fruits)\n .join(\"rect\")\n .attr(\"x\", (d, i) => xScale_columnII(i))\n .attr(\"y\", d => yScale_columnII(d.count))\n .attr(\"height\", d => yScale_columnII(0) - yScale_columnII(d.count))\n .attr(\"width\", xScale_columnII.bandwidth());\n\n svg\n .append(\"g\")\n .selectAll(\"text\")\n .data(fruits)\n .join(\"text\")\n .attr(\"x\", (d, i) => xScale_columnII(i))\n .attr(\"y\", d => yScale_columnII(d.count) + 4)\n .attr(\"fill\", \"white\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans serif\")\n .attr(\"font-size\", \"14px\")\n .attr(\"transform\", `translate(${xScale_columnII.bandwidth() / 2},+12)`)\n .text(d => d.count);\n\n svg.append(\"g\").call(xAxis_columnII);\n\n svg.append(\"g\").call(yAxis_columnII);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"xScale_columnII = d3\n .scaleBand()\n .domain(d3.range(fruits.length))\n .range([margin_columnII.left, width - margin_columnII.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"yScale_columnII = d3\n .scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .nice()\n .range([height_columnII - margin_columnII.bottom, margin_columnII.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"xAxis_columnII = g =>\n g\n .attr(\n \"transform\",\n `translate(0,${height_columnII - margin_columnII.bottom})`\n )\n .call(\n d3\n .axisBottom(xScale_columnII)\n .tickFormat(i => fruits[i].name)\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"yAxis_columnII = g =>\n g\n .attr(\"transform\", `translate(${margin_columnII.left},0)`)\n .call(d3.axisLeft(yScale_columnII).ticks(null))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin_columnII.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(fruits.count)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"height_columnII = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"margin_columnII = ({ top: 30, right: 0, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`## Color Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"color = d3\n .scaleSequential()\n .domain([0, d3.max(fruits, d => d.count)])\n .interpolator(d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}