29:null 2a:["$","title",null,{"children":"Continuous scales | Jean-Daniel Fekete | Observable"}] 2f:T468,{ const scale = d3.scaleSymlog() .domain(d3.extent(days, d => d.v)) .constant(0.1) // try 0.01 to leave room for "in 2 hours" .range([width * 0.05, width * 0.95]); const svg = d3.create("svg") .attr("width", width) .attr("height", 100) .attr( "style", "text-anchor:middle; font-family: sans-serif; font-size:12px" ); svg .append("line") .attr("x1", scale.range()[0]) .attr("x2", scale.range()[1]) .attr("y1", 50) .attr("y2", 50) .attr("stroke", "#999"); const g = svg .selectAll("g") .data(days) .join("g") .attr("transform", d => `translate(${scale(d.v)}, 50)`); g.append("circle") .attr("r", 4) .attr("fill", d => (d.l === "Now" ? "red" : "black")); g.append("text") .attr("y", (_, i) => -8 + 30 * (i % 2)) .attr("dx", 3) .text(d => d.l); svg.on("mousemove click", function(event) { const days = scale.invert(d3.pointer(event)[0]); mutable hitValue = Math.abs(Math.round(days)) <= 1 ? Math.round(24 * days) + " hours" : Math.round(days) + " days"; }); return svg.node(); }30:[] 2d:{"id":"3e0c87451c4eeec0","slug":null,"title":"Continuous scales","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-06-16T12:03:00.005Z","update_time":"$D2025-11-24T09:53:50.626Z","view_time":null,"first_public_time":"$D2025-06-16T12:03:00.005Z","fork":{"id":"da5b85fbbee1c6d3","slug":"continuous-scales","title":"Continuous scales","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"008b7a0b8ce58b28","login":"jdfekete","name":"Jean-Daniel Fekete","avatar_url":"https://avatars-next.observableusercontent.com/33253e5686ae4e81d36717d106cb6e2473c8c19ed92ba27c53533ddb6d58d99e","tier":"starter_2024"},"version":1252,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c81bbdf5725210b8","login":"jdfekete","name":"Jean-Daniel Fekete","avatar_url":"https://avatars-next.observableusercontent.com/33253e5686ae4e81d36717d106cb6e2473c8c19ed92ba27c53533ddb6d58d99e","tier":null}],"members":[{"type":"team","id":"008b7a0b8ce58b28","login":"jdfekete","name":"Jean-Daniel Fekete","avatar_url":"https://avatars-next.observableusercontent.com/33253e5686ae4e81d36717d106cb6e2473c8c19ed92ba27c53533ddb6d58d99e","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c81bbdf5725210b8","login":"jdfekete","name":"Jean-Daniel Fekete","avatar_url":"https://avatars-next.observableusercontent.com/33253e5686ae4e81d36717d106cb6e2473c8c19ed92ba27c53533ddb6d58d99e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Continuous scales","cells":[{"id":0,"value":"# Continuous scales\n\nBesides [d3.scaleLinear](https://observablehq.com/@d3/d3-scalelinear), d3-scale offers other continuous scales, in which the value is transformed in a non-linear way. These scales are typically useful when one needs to match a domain to a surface area instead of a length, or when the domain is inherently not linear.\n\n- [Square root scales](#scale_sqrt)\n- [Power scales](#scale_pow)\n- [Log scales](#scale_log)\n- [EplusM scales](#scale_eplusm)\n- [Symlog scales](#scale_symlog)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"### Square root\n\n[d3.scaleSqrt](https://d3js.org/d3-scale/pow#scaleSqrt) creates a square-root based scale. It transforms its domain in such a way that if the value *b* is 4 times bigger than value *a*, the result is only multiplied by 2. Its most common use case is to determine the radius of a disk whose surface area must be proportional to the value. As the area is proportional to the square of the radius ${tex`(A = π R^2)`}, conversely the radius — which is what we need to draw the shape on the screen — must be proportional to the square root of the value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"population2radius = d3.scaleSqrt() // instead of scaleLinear()\n .domain([0, 2e9])\n .range([0, 300])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"population2radius(1.386e9) // China’s 1.386 billion citizens are represented by a circle of radius = 250px","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"population2radius(127e6) // Japan’s population of 127 millions is represented by a circle of radius = 76px","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"population2radius(427e3) // Brunei shows up as a small circle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"{\n const color = d3.scaleOrdinal(d3.schemePaired);\n\n return svg`\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"We have seen this example in the [Introduction to D3’s scales](https://observablehq.com/@d3/introduction-to-d3s-scales#population2radius). Now, let’s add a fat stroke to the disks (and chose smaller countries to save space):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":338,"value":"{\n const color = d3.scaleOrdinal(d3.schemePaired.slice(7));\n\n const strokeWidth = 8;\n\n return svg`\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":370,"value":"Oops! As we see, the chart is now visually very wrong: Brunei’s disk has been completely erased, choked by its own stroke. The reason is that SVG (like canvas) paints on both sides of the path, biting into the surface area. A handy solution is to cheat with the scale’s range, by adding half the width to the circle’s radius in order to paint an ‘outer stroke’:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":372,"value":"{\n const color = d3.scaleOrdinal(d3.schemePaired.slice(7));\n\n const strokeWidth = 8;\n\n const population2radius = d3.scaleSqrt()\n .domain([0, 2e9])\n .range([0 + strokeWidth / 2, 300 + strokeWidth / 2]); // 🌶\n\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"This cheating is mathematically justified. When drawing small values, there is often a minimal size that we want to give to the mark that represents them. In all cases, if we want a chart to correctly convey the information, it must be accompanied by a proper legend based on the same scale, or actual numbers be explicitly marked.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":54,"value":"Here is an example of a visual legend that might be suitable for a square-root scale. The disk labeled ‘5’ is 4 times smaller in area as the disk labeled ‘20’, and its radius is half as long. (Finding an harmonious progression with nice and round values is half art, half science.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":58,"value":"{\n const values = [5, 20, 50, 100]; // hint: add 0 in this array…\n\n const scale = d3.scaleSqrt()\n .domain([0, d3.max(values)])\n .range([1, 100]); // … then change 1 to 0\n\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"When applied to negative values, the scale adapts to the situation, first by taking the absolute (positive) value, then negating the result. This is a bit difficult to see by looking at numbers, so we’ll use an image. This is the standard square-root scale:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":188,"value":"visualizeScale(d3.scaleSqrt())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"The negative version:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":204,"value":"visualizeScale(d3.scaleSqrt().domain([-1, 0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"And the divergent version:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":166,"value":"visualizeScale(d3.scaleSqrt().domain([-1, 1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"As we’ve just seen, the negative values are mapped to negative values (by taking the square-root of the absolute value). It’s even possible to go further by specifying a “piecewise” domain and range — allowing the construction of ad-hoc scales such as this one:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":892,"value":"visualizeScale(\n d3.scaleSqrt()\n .domain([-400, -100, 0, 400])\n .range([0, 1, 10, 15])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":915,"value":"All the other methods work the same: [invert](https://d3js.org/d3-scale/linear#linear_invert), [clamp](https://d3js.org/d3-scale/linear#linear_clamp), [interpolate](https://d3js.org/d3-scale/linear#linear_interpolate), [rangeRound](https://d3js.org/d3-scale/linear#linear_rangeRound), [unknown](https://d3js.org/d3-scale/linear#linear_unknown)…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":920,"value":"visualizeScale(\n d3.scaleSqrt()\n .domain([-100, 100])\n .rangeRound([-10, 10])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1101,"value":"See also [d3.scaleRadial](https://d3js.org/d3-scale/linear#scaleRadial).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":214,"value":"### Power scales\n\n[d3.scalePow](https://d3js.org/d3-scale/pow) creates a power based scale. The transform applied to values is of the type ${tex`y = x^k`} where *k*, the exponent, can be any real number.\n\nd3.scaleSqrt() is, in fact, a shorthand notation for d3.scalePow().exponent(1/2). The exponent *k* can be any real number (except 0).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":229,"value":"visualizeScale(\n d3\n .scalePow()\n .exponent(k)\n .domain([k < 0 ? 0.01 : 0, 1])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"viewof k = Inputs.range([-3, 10], {value: 2, label: \"exponent k\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"And, of course, this applies as well to color scales:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":448,"value":"paint = d3.scalePow()\n .exponent(k)\n .range([\"yellow\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"html`

\n${d3.ticks(0, 1, 20)\n .map(paint)\n .map(t => ` `)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"An example use of a power scale is when a *sphere*’s three-dimensional volume should be proportional to a value; as we did with the square root scale to compute a disk’s radius, we do now with the cube root ${tex`\\sqrt[3]{x} = x^{\\frac13}`} to compute the sphere’s radius:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":285,"value":"visualizeScale(d3.scalePow().exponent(1 / 3))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"Another use of a power scale is when when you want to adjust a bit a linear scale, to make it less aggressive visually, or, on the contrary, to add a bit more contrast. (Some people will frown on this as it is mathematically inaccurate, but allow visual perception to prime over pixel count.) Here’s an example that starts at 0.1, but is almost equal to 0.5 in the middle, and ends up in an ‘almost linear‘ fashion. It could be used to figure data points that have a value close to zero, with a small but non-vanishing symbol (an alternative is to use a fixed minimum size).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":295,"value":"visualizeScale(\n d3.scalePow()\n .exponent(1.2)\n .range([0.0999, 1])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":963,"value":"All the other methods work the same: piecewise domain and scale, [invert](https://d3js.org/d3-scale/linear#linear_invert), [clamp](https://d3js.org/d3-scale/linear#linear_clamp), [interpolate](https://d3js.org/d3-scale/linear#linear_interpolate), [rangeRound](https://d3js.org/d3-scale/linear#linear_rangeRound), [unknown](https://d3js.org/d3-scale/linear#linear_unknown)…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":474,"value":"### Log scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":503,"value":"[d3.scaleLog](https://d3js.org/d3-scale/log#scaleLog) creates a logarithmic scale, a continuous scale in which the domain is transformed by the Math.log function. Its graph is not spectacular:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":505,"value":"visualizeScale(d3.scaleLog())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"The logarithm function’s essential property is to transform multiplications into additions (and [ratios into differences](https://observablehq.com/@d3/change-line-chart)). This way, a vertical chart can span several orders of magnitude without the smallest values being dwarfed by the largest. To prove it, here’s a diagram that shows everything in the Universe:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":522,"value":"// adapted from http://lasp.colorado.edu/~bagenal/MATH/math0.html#tables\nobjects = [\n { name: \"Milky Way Galaxy\", size: 1e18 }, // sizes in km\n { name: \"Nearest Star\", size: 1e13 },\n { name: \"The Solar System\", size: 1e9 },\n { name: \"The Sun\", size: 1e6 },\n { name: \"The Earth\", size: 1e3 },\n { name: \"A Mountain\", size: 75 },\n { name: \"A Human\", size: 1e-3 },\n { name: \"A Cell\", size: 1e-8 },\n { name: \"An Atom\", size: 1e-12 },\n { name: \"A Proton\", size: 1e-15 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"scaleUniverse = d3.scaleLog().domain([1e-15, 1e20])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"{\n const height = width / 2,\n m = 40;\n\n scaleUniverse.range([height - m, m]);\n\n const g = svg`\n ${objects.map(\n d =>\n svg`\n \n ${d.name}\n `\n )}`;\n\n const axis = d3\n .select(svg``)\n .call(d3.axisLeft(scaleUniverse))\n .node();\n\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":579,"value":"Down to Earth, when charting financial series over long periods, it is often advisable to use a log scale in order to neutralize the effect that inflation has on prices & values. With a linear scale, a financial chart might place an unwarranted emphasis on the volatility of stock prices when they are higher.\n\n*For an example, try changing the definition of [y](https://observablehq.com/@d3/bollinger-bands#y) in the [Bollinger Bands](https://observablehq.com/@d3/bollinger-bands) chart to be d3.scaleLinear()…*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":597,"value":"[*logscale*.base](https://d3js.org/d3-scale/log#log_base): by default, log scales are in base 10. It is possible to set (and read) a log scale’s base, for example for a chart representing the sizes of computer memory:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":601,"value":"scaleBinary = d3.scaleLog()\n .base(2)\n .domain([16, 2 ** 20])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"visualizeTicks(scaleBinary)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"A log scale can not, by very definition, include 0 in its domain. However, if the domain spans negative numbers, the absolute value is taken, and the scale works:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":635,"value":"d3.scaleLog().domain([-100, -1])(-10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"The ticks (*i.e.* the marks on the axis) also have to adapt automatically to the various use cases of a scale that can encompass several orders of magnitude and where expectations are different in science, finance, computer science, etc. d3-scale’s heuristic is that, if the base is an integer, the returned ticks are uniformly spaced within each integer power of base; otherwise, one tick per power of base is returned.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":714,"value":"powers = d3.scaleLog().domain([0.01, 100000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"// by default, ticks are displayed in scientific notation (SI)...\nvisualizeTicks(powers)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":696,"value":"// ... but you can pass explicit format to ticks\n// see https://d3js.org/d3-format#locale_format\nvisualizeTicks(powers, [5, \"~g\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":732,"value":"*In the previous cells, try changing the domain to* [1e-10, 1e12], *the format, or the number of ticks from 5 to 3, 10, 20…*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":680,"value":"Of course, a binary log scale can be written in binary format:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":706,"value":"binaryScale = d3.scaleLog()\n .base(2)\n .domain([1, 32])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"visualizeTicks(\n binaryScale,\n [10, \"b\"] // 💡 see https://d3js.org/d3-axis#axis_ticks\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":966,"value":"All the other methods work the same: piecewise domain and scale, [invert](https://d3js.org/d3-scale/linear#linear_invert), [clamp](https://d3js.org/d3-scale/linear#linear_clamp), [interpolate](https://d3js.org/d3-scale/linear#linear_interpolate), [rangeRound](https://d3js.org/d3-scale/linear#linear_rangeRound), [unknown](https://d3js.org/d3-scale/linear#linear_unknown)…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1201,"value":"## EplusM scales\n\n`d3.eplusm` offers an effective alternative to the log scale that is very challenging outside of the engineering community.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1206,"value":"scaleEplusM = require(\"d3-eplusm@0.0.8-dev\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1226,"value":"[scaleEplusM](https://github.com/jdfekete/d3-eplusm/) creates an EplusM scale, a continuous scale in which the domain is transformed to become a piecewise linear graph. It is not spectacular but slightly unusual:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1209,"value":"visualizeScale(scaleEplusM.scaleEplusM().domain([1,1e3]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1228,"value":"The EplusM scale’s essential property is to be more understandable than the Logarithmic scale. Using it, vertical chart can span several orders of magnitude without the smallest values being dwarfed by the largest. Yet, causal users can understand it better and compare values more effectively than with the Logarithmic scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1233,"value":"eplusm = scaleEplusM.scaleEplusM().domain([1, 100000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1239,"value":"The ticks (*i.e.* the marks on the axis) also have to adapt automatically to the various use cases of a scale that can encompass several orders of magnitude. The EplusM scale aimed at finance, such as country or large company budgets. EplusM’s heuristic is that, the returned ticks are uniformly spaced within each integer power of ten and additional ticks can be added if space allows. The other ticks start at 5 units and the fill-up the space in this order: `[1, 5, 7, 3, 9, 2, 6, 4, 8]`. Note that there are only 9 ticks because, just as the log scale, the EplusM scale starts at 1, not 0.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1249,"value":"// by default, ticks are displayed in scientific notation (SI)...\nvisualizeTicks(eplusm)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"### SymLog scales\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":798,"value":"[d3.scaleSymLog](https://d3js.org/d3-scale/symlog) offers a bi-symmetric log transformation, suitable ‘for wide-range data’. Its domain can span several orders of magnitude, with negative as well as positive values. A parameter [*scale*.constant](https://d3js.org/d3-scale/symlog#symlog_constant) can set (or read) the slope around 0 — defaults to 1.\n\nIf the domain is symmetric, it is usually a good idea to set a symmetric range too.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":792,"value":"viewof n = {\n const form = html``;\n form.i.oninput = () => (form.value = form.i.valueAsNumber);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"viewof constant_e = {\n const form = html``;\n form.i.oninput = () => (form.value = form.i.valueAsNumber);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"visualizeScale(\n d3\n .scaleSymlog()\n .domain([-(10 ** n), 10 ** n])\n .constant(10 ** constant_e)\n .range([-1, 1])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":826,"value":"visualizeScale(\n d3.scaleSymlog()\n .domain([0, 10 ** n])\n .constant(10 ** constant_e)\n .range([0, 1])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":831,"value":"The symlog scale can be creatively applied to relative temporal data (the days around “now” are much denser in data points than the long-gone past and far future):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":830,"value":"days = [\n // l: label ; v: value\n { l: \"The Big Bang\", v: -13.8e9 * 365.24 },\n { l: \"Dinosaur extinction\", v: -65e6 * 365.24 },\n { l: \"The founding of Rome\", v: -(800 + 2019) * 365.24 },\n { l: \"Last year\", v: -365 },\n { l: \"Yesterday\", v: -1 },\n { l: \"Now\", v: +0 },\n // { l: \"In 2 hours\", v: +2 / 24 },\n { l: \"Tomorrow\", v: +1 },\n { l: \"Next year\", v: +365 },\n { l: \"2100\", v: +365.24 * 91 },\n { l: \"Asimov’s Foundation\", v: +12000 * 365.24 },\n { l: \"Sun dies\", v: 6e9 * 365 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":829,"value":"{\n const scale = d3.scaleSymlog()\n .domain(d3.extent(days, d => d.v))\n .constant(0.1) // try 0.01 to leave room for \"in 2 hours\"\n .range([width * 0.05, width * 0.95]);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 100)\n .attr(\"style\", \"text-anchor:middle; font-family: sans-serif; font-size:12px\");\n\n svg.append(\"line\")\n .attr(\"x1\", scale.range()[0])\n .attr(\"x2\", scale.range()[1])\n .attr(\"y1\", 50)\n .attr(\"y2\", 50)\n .attr(\"stroke\", \"#999\");\n \n const g = svg.selectAll(\"g\")\n .data(days)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${scale(d.v)}, 50)`);\n\n g.append(\"circle\")\n .attr(\"r\", 4)\n .attr(\"fill\", d => (d.l === \"Now\" ? \"red\" : \"black\"));\n g.append(\"text\")\n .attr(\"y\", (_, i) => -8 + 30 * (i % 2))\n .attr(\"dx\", 3)\n .text(d => d.l);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":975,"value":"## Standard methods\n\nAll the continous scales presented here offer standard methods:\n\n[*scale*.copy](https://d3js.org/d3-scale/linear#linear_copy) returns a copy of the scale, with the same parameters. Useful when we need to tweak a setting without mutating the original scale:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1000,"value":"paintRgb = d3.scaleSqrt()\n .range([\"blue\", \"red\"])\n .interpolate(d3.interpolateHsl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":981,"value":"paintHsl = paintRgb.copy()\n .interpolate(d3.interpolateHslLong)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":996,"value":"html`

\n${d3.ticks(0, 1, 20)\n .map(paintRgb)\n .map(t => ` `)}

\n\n

\n${d3.ticks(0, 1, 20)\n .map(paintHsl)\n .map(t => ` `)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1055,"value":"[*scale*.invert](https://d3js.org/d3-scale/linear#linear_invert): given a value from the range, returns the corresponding value from the domain. (Works only for scales with a numeric range.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1065,"value":"mutable hitValue = \"Touch or hover the chart below:\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1062,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1075,"value":"[*scale*.clamp](https://d3js.org/d3-scale/linear#linear_clamp) restricts the output value to the range. Useful to keep data points in the screen — even when their values exceed the domain’s bounds. For example, suppose we want to draw a circle with a surface area proportional to one of our data’s dimensions; but some of our data points might be outside the domain, for example have a negative value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1074,"value":"radius = d3.scaleSqrt([0, 100], [0, 30])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"radius(-1e-6) // 🕷 if this is used as a circle’s radius, it might create a bug","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"{\n const clamped = d3.scaleSqrt([0, 100], [0, 30]).clamp(true);\n return clamped(-1e-6); // 👍 fixed !\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1071,"value":"radius.clamp() // read the clamping state.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"[*scale*.unknown](https://d3js.org/d3-scale/linear#linear_unknown) sets the return value for unknown (undefined or NaN) input values. Useful when we want to show the missing data in a specific place — below, on the left of the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1069,"value":"x = d3.scaleLinear([0, 1], [60, width * 0.95]).unknown(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"values = Array.from({ length: 100 }, (_, i) => i % 10 === 0 ? NaN : Math.random())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"{\n const context = DOM.context2d(width, 50);\n\n for (const v of values) {\n context.beginPath();\n context.arc(x(v), 10 + 30 * Math.random(), 5, 0, 2 * Math.PI);\n\n if (isNaN(v)) context.fillStyle = \"#ff000044\";\n else context.fillStyle = \"#00000044\";\n\n context.fill();\n }\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"function visualizeScale(scale) {\n const w = Math.min(600, width),\n h = 300,\n m = width > 599 ? 30 : 10;\n const x = d3.scaleLinear()\n .domain(d3.extent(scale.domain()))\n .nice()\n .range([m, w - m]),\n y = d3.scaleLinear()\n .domain(d3.extent(scale.range()))\n .nice()\n .range([h - m, m]),\n svg = d3.create(\"svg\")\n .attr(\"width\", width + 20)\n .attr(\"height\", h + 20),\n g = svg.append(\"g\"),\n line = [];\n\n for (let i = m + 1e-6; i < w - m; i += 1) {\n const X = x.invert(i),\n Y = scale(X),\n j = y(Y);\n line.push([i, j]);\n }\n\n g.append(\"path\")\n .attr(\"d\", \"M\" + line.join(\"L\"))\n .style(\"stroke\", \"black\")\n .style(\"fill\", \"none\");\n\n g.append(\"g\")\n .attr(\"transform\", `translate(${m},0)`)\n .call(d3.axisLeft(y));\n g.append(\"g\")\n .attr(\"transform\", `translate(0,${y(0)})`)\n .call(d3.axisBottom(x));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"function visualizeTicks(scale, tickArguments) {\n const height = 20, m = width > 599 ? 90 : 10;\n\n if (tickArguments === undefined) tickArguments = [];\n\n scale.range([m, width - m]);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\").call(d3.axisBottom(scale).ticks(...tickArguments));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"