30:T804,{ const { padding, domain, range } = config; const fontSize = width > 500 ? "14px" : "10px"; return svg``; }31:[] 2e:{"title":"d3.scalePoint","cells":[{"id":0,"value":"# d3.scalePoint\n\nPoint scales allow to distribute an array of points equally into a given range interval. The following chart of the [phases of the Moon](/@mbostock/phases-of-the-moon) uses two such scales: the first positions the day vertically, by month (on a 12-point scale); the second positions it horizontally by day.[*](#appendix)","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"For the most part, point scales behave like [band scales](https://observablehq.com/@d3/d3-scaleband) with the bandwidth fixed to zero (or, equivalently, paddingInner set to 1). Here’s a schema showing how each element of configuration impacts the scale:","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"config = ({\n domain: [\"A\", \"B\", \"C\"], // 👀 change me!\n padding: 0.6, // 👀\n round: true, // 👀\n range: [40, Math.min(700, width - 40)] // 👀\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"scale = d3.scalePoint()\n .domain(config.domain)\n .range(config.range)\n .padding(config.padding)\n .round(config.round)","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"The methods for d3.scalePoint are:\n\n* [*point*.domain](https://d3js.org/d3-scale/point#point_domain) and [*point*.range](https://d3js.org/d3-scale/point#point_range), which allow to set (and read) the domain and range. The domain must be an array of values that can be stringified (see [this note about domains](https://observablehq.com/@d3/d3-scaleband#objectDomain)).\n\n* [*point*.padding](https://d3js.org/d3-scale/point#point_padding) defines the fraction of (outer) padding.\n\n* [*point*.round](https://d3js.org/d3-scale/point#point_round) (or, alternatively, [*point*.rangeRound](https://d3js.org/d3-scale/point#point_rangeRound)) sets the scale to return round (integers) values.\n\n* [*point*.align](https://d3js.org/d3-scale/point#point_align) defines the way any left-over space (padding + rest from rounding) are to be distributed between left and right.\n\n* [*point*.step](https://d3js.org/d3-scale/point#point_step) reads the step.","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"scale.step()","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"---\n\n## Appendix\n\nIn the [Phases of the Moon](/@mbostock/phases-of-the-moon) notebook, the horizontal scale is defined as scalePoint().domain(d3.range(1, 40)). This range contains 39 points. Technically one could have used a scale with 37 points, as in the worst case the month’s last day could be on the day 31 + 6 (the days are shifted to be aligned by weeks!). But it seems it was more aesthetically pleasing to shift by 7 days a month that starts on a Sunday… which makes it 38. (So, the first and last slots are never used.) The tiny details!","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"d3 = require(\"d3-scale@3\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {chart} from \"@mbostock/phases-of-the-moon\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}