25:["$","title",null,{"children":"（線形スケール以外の）連続スケール | Yuichi Yazaki | Observable"}] 49: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(); }4a:[] 29:{"id":"963627989985df08","slug":null,"title":"（線形スケール以外の）連続スケール","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-08-18T03:23:49.984Z","update_time":"$D2024-08-18T08:12:33.527Z","view_time":null,"first_public_time":"$D2024-08-18T03:23:49.984Z","has_unpublished_edits":null,"fork":{"id":"da5b85fbbee1c6d3","slug":"continuous-scales","title":"Continuous scales","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false},"version":1249,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false}],"members":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"role":"editor"},{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"（線形スケール以外の）連続スケール","cells":[{"id":0,"value":"# （線形スケール以外の）連続スケール\n\n[d3.scaleLinear](https://observablehq.com/@d3/d3-scalelinear) のほかに、d3-scale は値を非線形に変換する他の連続スケールも提供します。これらのスケールは、ドメインを長さではなく表面積に一致させる必要がある場合や、ドメインが本質的に線形ではない場合に便利です。\n\n- [平方根スケール](#scale_sqrt)\n- [べき乗スケール](#scale_pow)\n- [対数スケール](#scale_log)\n- [対称対数スケール](#scale_symlog)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## 平方根スケール\n\n[d3.scaleSqrt](https://d3js.org/d3-scale/pow#scaleSqrt) は平方根ベースのスケールを作成します。値 *b* が値 *a* の 4 倍の場合、結果が 2 倍だけになるようにドメインを変換します。これは、円の面積と半径の関係とちょうど一致します。入力値を円の面積と考えると、このスケールは適切な半径を計算してくれるのです。面積は半径の 2 乗に比例するため ${tex`(A = π R^2)`}、逆に半径 (画面上に図形を描画するために必要なもの) は値の平方根に比例する必要があります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"scale_sqrt","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"population2radius(427e3) // Brunei shows up as a small circle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"この例は、[D3 のスケールの紹介](https://observablehq.com/@d3/introduction-to-d3s-scales#population2radius) で説明しました。では、円に太い線を追加してみましょう (スペースを節約するために、より小さな国を選択します)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"おっと！ご覧のとおり、グラフの見た目は大きく間違っています。ブルネイの円盤は完全に消え、自身のストロークで詰まってしまいました。これは、SVG（キャンバスのように）がパスの両側をペイントし、表面領域を食い込むためです。便利な解決策は、スケールの範囲を誤魔化すことです。つまり、円の半径に幅の半分を追加して「外側のストローク」をペイントします:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"このごまかしは数学的に正当化されます。小さな値を描く場合、その値を表すマークに最小限のサイズを与える必要があることがよくあります。いずれの場合も、チャートで情報を正しく伝えたい場合は、同じスケールに基づいた適切な凡例を添えるか、実際の数値を明示的にマークする必要があります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"平方根スケールに適した凡例の例です。「5」とラベル付けされた円盤の面積は、「20」とラベル付けされた円盤の4分の1であり、その半径は半分の長さです。（使いやすく見た目にも美しい数値の配列を見つけるには、科学的な計算と芸術的な感覚の両方が求められます。） ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"負の値に適用すると、スケールは状況に合わせて、まず絶対値 (正の値) を取り、次に結果を負にします。これは数字だけではわかりにくいので、画像を使用します。これは標準的な平方根スケールです:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"visualizeScale(d3.scaleSqrt())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"負のバージョン:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"visualizeScale(d3.scaleSqrt().domain([-1, 0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"分岐バージョン:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"visualizeScale(d3.scaleSqrt().domain([-1, 1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"先ほど見たように、負の値は絶対値の平方根を取った後に負の符号を付けることで、負の値にマッピングされます。さらに進んで、複数の区間でそれぞれ異なる変換規則を持つ「区間別定義」のドメインとレンジを指定することも可能です。これにより、データの特性に応じて柔軟にカスタマイズされたスケールを構築できます:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"他のメソッドはすべて同じように動作します: [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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"[d3.scaleRadial](https://d3js.org/d3-scale/linear#scaleRadial) もご覧ください。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"## べき乗スケール\n\n[d3.scalePow](https://d3js.org/d3-scale/pow) はべき乗ベースのスケールを作成します。値に適用される変換は ${tex`y = x^k`} 型で、指数 *k* は任意の実数にすることができます。\n\nd3.scaleSqrt() は、実際には d3.scalePow().exponent(1/2) の省略表記です。指数 *k* は任意の実数にすることができます (0 を除く)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"scale_pow","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"もちろん、これはカラースケールにも当てはまります:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"paint = d3.scalePow()\n .exponent(k)\n .range([\"yellow\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"べき乗スケールの使用例としては、*球*の 3 次元体積が値に比例する必要がある場合が挙げられます。円盤の半径を計算するために平方根スケールを使用したのと同様に、立方根 ${tex`\\sqrt[3]{x} = x^{\\frac13}`} を使用して球の半径を計算します:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"visualizeScale(d3.scalePow().exponent(1 / 3))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"べき乗スケールのもう一つの使用法は、線形スケールを少し調整して視覚的に穏やかにしたり、逆に、もう少しコントラストを加えたりしたい場合です。\n（数学的に不正確であるとして眉をひそめる人もいるでしょうが、ピクセル数よりも視覚的な認識を優先させることを許容してください。）\nここに、0.1から始まり、中間でほぼ0.5に等しく、そして「ほぼ線形」の形で終わる例があります。これは、ゼロに近い値を持つデータポイントを、小さいけれども消えない記号で表現するのに使用できます（代替案として、固定の最小サイズを使用する方法もあります）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"他のすべてのメソッドは同じように機能します: 区分ドメインとスケール、[反転](https://d3js.org/d3-scale/linear#linear_invert)、[クランプ](https://d3js.org/d3-scale/linear#linear_clamp)、[補間](https://d3js.org/d3-scale/linear#linear_interpolate)、[範囲ラウンド](https://d3js.org/d3-scale/linear#linear_rangeRound)、[不明](https://d3js.org/d3-scale/linear#linear_unknown)…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"## 対数スケール","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"scale_log","database":"$undefined"},{"id":503,"value":"[d3.scaleLog](https://d3js.org/d3-scale/log#scaleLog) は対数スケールを作成します。これは、ドメインがMath.log関数によって変換される連続スケールです。そのグラフは特に印象的ではありません:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"visualizeScale(d3.scaleLog())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"対数関数の本質的な特性は、乗算を加算に変換すること（[そして比率を差異に変換すること](https://observablehq.com/@d3/change-line-chart)）です。このため、垂直チャートは、最小値が最大値に比べて極端に小さくなることなく、複数の桁（オーダー）にまたがることができます。これを証明するために、宇宙のすべてを示す図表を以下に示します:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"scaleUniverse = d3.scaleLog().domain([1e-15, 1e20])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"現実的に考えると、長期にわたる金融系列をグラフ化する場合、インフレが価格や価値に与える影響を中和するために、対数スケールを使用するのが賢明です。線形スケールを使用すると、金融チャートは株価が高騰しているときに株価の変動性に不当な重点を置く可能性があります。\n\n*例として、[Bollinger Bands](https://observablehq.com/@d3/bollinger-bands) チャートの [y](https://observablehq.com/@d3/bollinger-bands#y) の定義を d3.scaleLinear() に変更してみてください…*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"[*logscale*.base](https://d3js.org/d3-scale/log#log_base):デフォルトでは、対数スケールは 10 進数です。対数スケールの基数を設定 (および読み取り) することができます。たとえば、コンピューターのメモリのサイズを表すグラフの場合:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"visualizeTicks(scaleBinary)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"対数スケールは、定義上、そのドメインに 0 を含めることはできません。ただし、ドメインが負の数にまたがる場合は、絶対値が取得され、スケールが機能します。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"d3.scaleLog().domain([-100, -1])(-10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"目盛り（つまり、軸上のマーク）もまた、複数の桁（オーダー）にまたがる可能性があり、科学、金融、コンピューターサイエンスなどで期待が異なるスケールのさまざまな使用ケースに自動的に適応する必要があります。\nd3-scaleのヒューリスティックは次のとおりです。基数が整数の場合、返される目盛りは基数の各整数乗の中で均等に配置されます。そうでない場合は、基数の1乗ごとに1つの目盛りが返されます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":714,"value":"powers = d3.scaleLog().domain([0.01, 100000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"*前のセルで、ドメインを* [1e-10, 1e12]に変更したり、*フォーマット、または目盛りの数を5から3、10、20などに変更したりしてみてください。*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"もちろん、バイナリ対数スケールはバイナリ形式で記述できます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":706,"value":"binaryScale = d3.scaleLog()\n .base(2)\n .domain([1, 32])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"他のすべてのメソッドは同じように機能します: 区分ドメインとスケール、[反転](https://d3js.org/d3-scale/linear#linear_invert)、[クランプ](https://d3js.org/d3-scale/linear#linear_clamp)、[補間](https://d3js.org/d3-scale/linear#linear_interpolate)、[範囲ラウンド](https://d3js.org/d3-scale/linear#linear_rangeRound)、[不明](https://d3js.org/d3-scale/linear#linear_unknown)…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"## 対称対数スケール\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"scale_symlog","database":"$undefined"},{"id":798,"value":"[d3.scaleSymLog](https://d3js.org/d3-scale/symlog) は、広範囲のデータに適した両対称対数変換を提供します。そのドメインは、負の値と正の値の両方を含む、複数の桁（オーダー）にまたがることができます。パラメータ [*scale*.constant](https://d3js.org/d3-scale/symlog#symlog_constant) を使用して、0付近の傾きを設定（または読み取り）することができます — デフォルトは1です。\n\nドメインが対称である場合は、通常、対称範囲も設定することをお勧めします。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"Symlog スケールは、相対的な時間データに創造的に適用できます (「現在」の前後の日付は、遠い過去や遠い未来よりもデータポイントがはるかに密集しています):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"symlogTime","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"## 標準メソッド\n\nここで紹介するすべての連続スケールは、標準メソッドを提供します:\n\n[*scale*.copy](https://d3js.org/d3-scale/linear#linear_copy) は、同じパラメータを持つスケールのコピーを返します。元のスケールを変更せずに設定を微調整する必要がある場合に便利です:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"standard","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"paintHsl = paintRgb.copy()\n .interpolate(d3.interpolateHslLong)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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 => ` `)}