25:["$","title",null,{"children":"Learn D3: Joins | Yuichi Yazaki | Observable"}] 49:T566,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // For the initial render, reference the current age non-reactively. const agedata = viewof agedata.value; const x = d3.scaleLinear() .domain([0, d3.max(agedata, d => d.value)]) .rangeRound([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(agedata.map(d => d.name)) .rangeRound([margin.top, margin.top + 20 * data.names.length]); let bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(agedata, d => d.name) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", x(0)) .attr("y", d => y(d.name)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth() - 1); const gx = svg.append("g") .call(xAxis, x); const gy = svg.append("g") .call(yAxis, y); return Object.assign(svg.node(), { update(agedata) { const t = svg.transition().duration(750); gx.transition(t) .call(xAxis, x.domain([0, d3.max(agedata, d => d.value)])); gy.transition(t) .call(yAxis, y.domain(agedata.map(d => d.name))); bar = bar .data(agedata, d => d.name) .call(bar => bar.transition(t) .attr("width", d => x(d.value) - x(0)) .attr("y", d => y(d.name))); } }); }4a:[{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1724463696831.75,"size":3516}] 29:{"id":"493e7e6df4bad0d5","slug":null,"title":"Learn D3: Joins","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-08-24T01:41:36.831Z","update_time":"$D2024-08-24T01:55:44.726Z","view_time":null,"first_public_time":"$D2024-08-24T01:41:36.831Z","has_unpublished_edits":null,"fork":{"id":"4fed9b9938ac2369","slug":"learn-d3-joins","title":"Learn D3: Joins","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":1118,"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":"Learn D3: Joins","cells":[{"id":240,"value":"# Learn D3: Joins\n\nIf you were familiar with D3 going into this tutorial, you may be surprised by how little D3 selections have been mentioned.\n\nThat’s because you might not need them!\n\nこのチュートリアルを始める前に D3 についてよく知っていた場合、D3 の選択についてほとんど触れられていないことに驚くかもしれません。\n\nそれは、それらが必要ないかもしれないからです!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"D3 selectionsは、動的グラフィックスの高速な増分更新という特定のニッチを満たします。静的グラフィックス、またはフレームごとに最初から再描画できるグラフィックスに重点を置いている場合は、別の抽象化が適している可能性があります。一方、アニメーション化されたトランジションが必要な場合や、最新のブラウザーから最高のパフォーマンスを引き出す場合は、selectionsが最適です。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"(selectionsを使用しないことにした場合でも、D3 には視覚化に役立つ他のツールが無数にあることを忘れないでください。スケール、シェイプ、補間、色、地図投影、およびその他の多くの機能は、Canvas、WebGL、または Observable の HTML タグ付きテンプレートリテラル、React、Svelte などの他の DOM 抽象化で使用できます。また、D3 は、統計、グループ化と集計、時系列と解析のメソッドを使用して、データのクリーニングと分析を支援できます。)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"本質的に、D3 selections は *表現* ではなく *変換* を指定します。グラフィック (DOM) の望ましい状態を表現する代わりに、現在の状態を望ましい状態に変換するために必要な変更 (挿入、更新、削除) を指定します。これは面倒なこともありますが、遷移をアニメーション化し、DOM への変更を最小限に抑えてパフォーマンスを向上させることができます。\n\n方法を見てみましょう。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"アルファベットの文字を表示したいとします。あまり文字を可視化することはありませんが、テクニックに焦点を当てるためにシンプルな例にしておきます。(実際の例については、[D3 ギャラリー](/@d3/gallery) のアニメーションとインタラクションのセクションを参照してください。)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"chart1 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n svg.selectAll(\"text\")\n .data(alphabet)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\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":335,"value":"このグラフィックは、セルが実行されるたびに最初から作成されるという意味で静的であり、D3 コードは HTML リテラルと精神的に同等になります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"では、なぜselectionsにこだわるのでしょうか。静的なグラフィックの場合、selectionsする理由はほとんどありません。\n\nただし、データの変更に応じてこのチャートを更新したいとします。そして、最初から再描画したくないとします。新しいデータを反映するために、最小限の更新セットを適用したいとします。既存の要素を再利用し、必要なものを追加し、不要なものを削除したいとします。上記のコードを、データが変更されたときに呼び出されるメソッドに移動するだけで、パフォーマンスの高い増分更新が実現します。😲","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"randomLetters = {\n while (true) {\n yield d3.shuffle(alphabet.slice())\n .slice(Math.floor(Math.random() * 10) + 5)\n .sort(d3.ascending);\n await Promises.delay(3000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"chart2.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"コードを分解してみましょう。\n\n*text* は、最初は空で、親が SVG 要素であるテキスト要素の選択です。この親は、入力テキスト要素が後で追加される場所を決定します。\n\n*selection*.data を呼び出すと、*text* は新しいデータ配列 *letters* にバインドされます。これにより、*text* 選択の 3 つの独立したサブセットが計算されます。*enter* 選択は既存の要素がない新しいデータを表します。*update* 選択は新しいデータがある既存の要素を表します。*exit* 選択は新しいデータがない既存の要素を表します。\n\nベン図としては以下のとおりです:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"

\n \n

The three selections computed by the selection.data.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"(これらのselectionsはコード内に隠されています: *selection*.data は *update* 選択を返します。そこから *selection*.enter または *selection*.exit を呼び出して他の選択にアクセスできます。)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"これら 3 つのケースを手動で処理することもできますが、[*selection*.join](/@d3/selection-join) は便利なデフォルトを提供します。*enter* 選択が追加され、*exit* 選択が削除され、最後に *update* 選択と *enter* 選択が結合され、順序付けされて返されます。その後、これらの entering または update 要素に属性とテキストを割り当てることができます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"文字とテキスト要素の関連付けが一定である限り、要素の更新時に一部の属性とテキスト・コンテンツを再割り当てする必要がないことに注意することで、さらに効率を上げることができます。この関連付けを保持するには、*selection*.data にキー関数が必要です。また、*enter*、*update*、*exit* の正確な操作には、*selection*.join に対応する関数が必要です。updates が enter や exit よりも頻繁に行われる場合、パフォーマンスが大幅に向上します!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"chart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d),\n update => update,\n exit => exit.remove()\n )\n .attr(\"x\", (d, i) => i * 17);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"chart3.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"以前と同様に、*selection*.join は結合(merged)された *enter* と *update* の選択を返すため、*x* 属性の設定など、両方に適用されるコードを共有できます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"The key function passed to *selection*.data is used to compute a (string) key for each new datum and each selected element’s old datum, determining which datum is bound to which element: if an element and datum have the same key, that datum is bound to the element and the element is put in the *update* selection. Letters make good keys, so the identity function (d => d) is appropriate here.\n\n*selection*.data に渡されるキー関数は、各新しいデータと各選択された要素の古いデータの (文字列) キーを計算し、どのデータがどの要素にバインドされるかを決定するために使用されます。要素とデータに同じキーがある場合、そのデータは要素にバインドされ、要素は *update* 選択範囲に配置されます。文字は適切なキーとなるため、ここでは恒等関数 (d => d) が適切です。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"(If no key function is specified, data is bound by index: the first datum is bound to the first element, and so on. As an exercise, try rewriting the code above to join by index. You’ll also want to swap setting the *x* attribute with setting the text content!)\n\n(キー関数が指定されていない場合、データはインデックスによってバインドされます。つまり、最初のデータは最初の要素にバインドされ、以下同様に続きます。練習として、上記のコードを書き直してインデックスで結合してみてください。また、*x* 属性の設定とテキストコンテンツの設定を入れ替えることもお勧めします。)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"Where selections really shine, though, are transitions! ✨\n\nBelow, letters enter from the top, slide horizontally when they update, and exit to the bottom. This is much easier to interpret than the instantaneous cuts above.\n\nしかし、選択が本当に輝くのはトランジションです! ✨\n\n以下では、文字が上から入り、更新されると水平にスライドし、下に出ていきます。これは、上の瞬間的なカットよりもはるかに解釈しやすいです。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n const t = svg.transition().duration(750);\n\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", -7)\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", (d, i) => i * 17)\n .text(d => d),\n update => update,\n exit => exit\n .call(text => text.transition(t).remove()\n .attr(\"y\", 41))\n )\n .call(text => text.transition(t)\n .attr(\"y\", 17)\n .attr(\"x\", (d, i) => i * 17));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"chart4.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Good transitions don’t just make a graphic “dance” to grab attention; they help the viewer understand through motion *how the data changes*. \n\nGood transitions maintain [*object constancy*](https://bost.ocks.org/mike/constancy/): a graphical element that represents a particular thing (such as the letter C) *before* the transition should represent the same thing *throughout and after* the transition, allowing continuous tracking by the viewer. If instead the meaning of a given element were to change during the transition, then the motion would be meaningless.\n\n優れたトランジションは、注意を引くためにグラフィックを「踊らせる」だけではありません。モーションを通じて、視聴者がデータがどのように変化するかを理解するのに役立ちます。\n\n優れたトランジションは、[*オブジェクトの一貫性*](https://bost.ocks.org/mike/constancy/) を維持します。つまり、トランジションの *前* に特定のものを表すグラフィック要素 (文字 C など) は、トランジションの *全体と後* に同じものを表す必要があり、視聴者が継続的に追跡できるようにします。トランジション中に特定の要素の意味が変わると、モーションは無意味になります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"How about a more practical example?\n\nThe chart below shows the top ten states (and D.C., the urban outlier) by percentage of population in a particular age group. It shows Utah’s disproportionately youthful population, a reflection of the LDS Church’s emphasis on raising families. Florida in contrast has a large retiree population, many in their seventies or older.\n\nもっと実際的な例を挙げてみましょう。\n\n下のグラフは、特定の年齢層の人口の割合で上位 10 州 (および都市部の外れ値であるワシントン D.C.) を示しています。ユタ州の人口が不釣り合いに若年層が多いことが分かります。これは LDS 教会が家族を育てることに重点を置いていることを反映しています。対照的にフロリダ州は退職者が多く、その多くは 70 代以上です。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"選択したageグループを変更すると、ランキングの変更を反映してバーの順序が変わることがわかります。同時に、*x* 軸も新しいデータに合わせて再スケールされます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof agedata = Inputs.select(new Map(data.ages.map(age => [age, data.filter(d => d.age === age).sort((a, b) => d3.descending(a.value, b.value))])), {label: \"Age group\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"chart.update(agedata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"Only the top 10 bars are visible because the remaining bars are hidden below the chart. Hence *selection*.join is not needed: no bars enter or exit; they only update. This not only simplifies the code, but makes the transitions more meaningful, as the speed of entering or exiting bars now hints at their offscreen position.\n\n残りのバーはチャートの下に隠れているため、上位 10 個のバーのみが表示されます。したがって、*selection*.join は必要ありません。バーは出入りせず、更新されるだけです。これにより、コードが簡素化されるだけでなく、バーの出入りの速度が画面外の位置を示唆するため、遷移がより意味のあるものになります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Animated transitions are often triggered by the reader poking or prodding in search of answers. Next let’s see how we can make charts respond to such queries.\n\nアニメーション化されたトランジションは、読者が答えを求めて探したり、突っついたりすることでトリガーされることがよくあります。次に、そのようなクエリにチャートが応答するようにする方法を見てみましょう。\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = {\n const data = await FileAttachment(\"us-population-state-age.csv\").csv();\n const ages = data.columns.slice(1);\n const totals = new Map(data.map(d => [d.name, d3.sum(ages, age => d[age])]));\n return Object.assign(d3.cross(data, ages).map(([d, age]) => ({name: d.name, age, value: +d[age] / totals.get(d.name)})), {names: data.map(d => d.name), ages});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"xAxis = (g, x) => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, \"%\"))\n .call(g => (g.selection ? g.selection() : g).select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"yAxis = (g, y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = margin.top + 20 * 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"margin = ({top: 30, right: 20, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null