2d:null 2e:["$","title",null,{"children":"The beauty in the irrationals | infographeo | Observable"}] 33:T6e9,legend = { let width = 0.98 * window.innerWidth, height = 50, radius = 20; let svg = d3.create("svg").attr("width", width).attr("height", height).style("background", "#FFF"); let container = svg.append("g").attr("class", "legend-board").attr("transform", `translate(${[0, height/2]})`); let palette = colorsPalette(settings[2]); let scale = d3.scalePoint() .domain(palette) .range([0, width]) .padding(0.6); let digitCircles = svg.select("g.legend-board").selectAll("circle").data([...Array(palette.length).keys()], (d,i) => d); digitCircles .join("circle") .attr("r", radius) .attr("cx", (d,i) => scale(palette[d])) .attr("fill", (d,i) => palette[d]) .attr("stroke", (d,i) => d3.rgb(palette[d]).darker()) .on("mouseover", function(e,d) { d3.select(this) .style("filter", "drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4))") .attr("stroke", "#FB8100") .attr("stroke-width", 2); chart.update(settings[0], settings[1], settings[2], d.toString()); }) .on("mouseout", function(e,d) { d3.select(this) .style("filter", "none") .attr("stroke", d3.rgb(palette[d]).darker()) .attr("stroke-width", 1); chart.update(settings[0], settings[1], settings[2], null); }); let digitTexts = svg.select("g.legend-board").selectAll("text").data(palette, (d,i) => i); digitTexts .join("text") .attr("x", (d,i) => scale(d)) .attr("dy", 5.5) .attr("text-anchor", "middle") .attr("fill", "whitesmoke") .attr("stroke", "#FFF") .attr("stroke-width", 0.5) .style("font", "18px/1.2 var(--sans-serif)") .style("pointer-events", "none") .style("pointer", "default") .text((d,i) => i); return svg.node(); }34:T15ba,chart = { let width = 0.98 * window.innerWidth; let height = width; let svg = d3.create("svg").attr("width", width).attr("height", height).style("background", "#000"); let pointsContainer = svg.append("g").attr("class", "points-container").attr("transform", `translate(${[width/2, height/2]})`); let segmentsContainer = svg.append("g").attr("class", "segments-container").attr("transform", `translate(${[width/2, height/2]})`); let symbolContainer = svg.append("g").attr("class", "symbol-container").attr("transform", `translate(${[width/2, height/2]})`); let tooltipContainer = svg.append("g").attr("class", "tooltip-container").attr("transform", `translate(${[width/2, height/2]})`); let tooltip = tooltipContainer.append("g") .attr("id", "tooltip") .attr("opacity", 0) .attr("transform", "translate(-100,100)"); tooltip .append("circle") .attr("class", "tooltip-circle") .attr("r", 20); tooltip .append("text") .attr("class", "tooltip-text") .attr("text-anchor", "middle") .attr("transform", "translate(20, 20)") .attr("dy", 6) .attr("fill", "#FFF") .style("font", "18px/1.2 var(--sans-serif)") .style("pointer-events", "none") .style("pointer", "default"); let titleText = symbolContainer .append("text") .attr("class", "symbol-text") .attr("fill", "#FFF") .attr("text-anchor", "middle") .attr("dy", 8) .style("font-size", "1.5em") .style("font-family", "Times New Roman") .style("font-style", "italic") .style("pointer-events", "none"); let connectingLine = d3.line() .x((d) => d[0]) .y((d) => d[1]) .curve(d3.curveLinear); return Object.assign(svg.node(), { update(irrational, layoutFunc, colorScheme, selectedDigit = null) { let splitDigitsArray = digits[irrational].split("").filter(d => d); let data = layoutFunc(splitDigitsArray); let palette = colorsPalette(colorScheme); let segments = []; if (layoutFunc === circlicLayoutData) { segments = segmentsLayout(data); } let board = svg.select("g.points-container").selectAll("circle").data(data, (d,i) => i); board .enter() .append("circle") .attr("title", (d,i) => d.digit) .attr("alt", (d,i) => d.digit) .attr("class", (d,i) => `box${d.digit}`) .attr("r", (d,i) => d.rho) .style("fill", "transparent") .attr("opacity", (d,i) => !selectedDigit || d.digit === selectedDigit ? 1 : 0.1) .attr("stroke-width", 1) .on("mouseover", function(event, d) { d3.select(this).attr("stroke", "#FFF").attr("stroke-width", 1); let coords = d3.pointer(event); d3.select("#tooltip") .attr("opacity", 1) .attr("transform", `translate(${coords})`); d3.select("#tooltip") .select(".tooltip-circle") .attr("r", 20) .attr("transform", "translate(20, 20)") .attr("fill", palette[+d.digit]) .attr("stroke", d3.rgb(palette[+d.digit]).darker()) .attr("stroke-width", 1); d3.select("#tooltip") .select(".tooltip-text") .text(+d.digit); }).on("mouseout", function(event,d) { d3.select(this).attr("stroke", d3.rgb(palette[+d.digit]).darker()).attr("stroke-width", 1); d3.select("#tooltip") .attr("opacity", 0); }) .transition() .duration((d,i) => 1 * i) .delay((d,i) => 3 * i) .ease(d3.easeSinInOut) .attr("cx", (d,i) => d.x) .attr("cy", (d,i) => d.y) .style("fill", (d,i) => palette[+d.digit]) .attr("stroke", (d,i) => d3.rgb(palette[+d.digit]).darker()); board .attr("opacity", (d,i) => !selectedDigit || d.digit === selectedDigit ? 1 : 0.1) .transition() .duration((d,i) => 1 * i) .delay((d,i) => 3 * i) .ease(d3.easeSinInOut) .attr("r", (d,i) => d.rho) .attr("cx", (d,i) => d.x) .attr("cy", (d,i) => d.y) .style("fill", (d,i) => palette[+d.digit]) .attr("stroke", (d,i) => d3.rgb(palette[+d.digit]).darker()); board.exit() .transition() .attr("r", 0) .remove(); let segmentation = svg.select("g.segments-container").selectAll("path").data(segments, (d,i) => d); segmentation .enter() .append("path") .style("fill", "none") .style("stroke-width", 0) .attr("opacity", (d,i) => !selectedDigit || d[0][2] === selectedDigit ? 1 : 0.1) .transition() .duration((d,i) => 1 * i) .delay((d,i) => 3 * i) .ease(d3.easeSinInOut) .attr("d", connectingLine) .style("stroke-width", 1) .style("stroke", (d,i) => palette[d[0][2]]); segmentation .attr("opacity", (d,i) => !selectedDigit || d[0][2] === selectedDigit ? 1 : 0.1) .transition() .duration((d,i) => 1 * i) .delay((d,i) => 3 * i) .ease(d3.easeSinInOut) .attr("d", connectingLine) .style("stroke-width", 1) .style("stroke", (d,i) => palette[d[0][2]]); segmentation .exit() .transition() .duration((d,i) => 1 * i) .delay((d,i) => 3 * i) .style("stroke-width", 0) .remove(); svg.select(".symbol-container").select("text.symbol-text").text(irrationals.find(d => d[1] === irrational)[2]); return data; } }); }35:T42c,adjacentLayoutData = (digitsArray) => { let pointRadius = 4; let p = 4.0, b = 2.0, radius = 20.0; let r = radius, theta, phi = radius / b; let f = (x, R) => { let r = R + b * x; return Math.pow(R, 2) + Math.pow(r, 2) - 2 * R * r * Math.cos(x) - 4 * Math.pow(p, 2); } let bolzano = (a, b, R) => { if (f(a, R) === 0) { return a; } if (f(b, R) === 0) { return b; } let x1 = a; let x2 = b let x = 0.5 * (a + b); while ((f(x1,R) * f(x2,R) < 0) && (Math.abs(f(x,R)) > 0.01)) { x = 0.5 * (x1 + x2); if (f(x1,R) * f(x,R) < 0) { x2 = x; } if (f(x2,R) * f(x,R) < 0) { x1 = x; } } return x; } let data = [{id: 0, digit: digitsArray[0], x: radius * Math.cos(phi), y: radius * Math.sin(phi), rho: pointRadius}]; for (let i = 0; i < digitsArray.length; i++) { theta = bolzano(0, Math.PI/2, r); r += b * theta; phi += theta; data.push({id: (i+1), digit: digitsArray[i+1], x: r * Math.cos(phi), y: r * Math.sin(phi), rho: pointRadius}); } return data; }36:T458,logarithmicLayoutData = (digitsArray) => { let pointRadius = 4; let p = 4.0, b = 0.01759, radius = 10.0; let r = radius, theta, phi = radius / b; let f = (x, R) => { let r = R + b * x; return Math.pow(R, 2) + Math.pow(r, 2) - 2 * R * r * Math.cos(x) - 4 * Math.pow(p, 2); } let bolzano = (a, b, R) => { if (f(a, R) === 0) { return a; } if (f(b, R) === 0) { return b; } let x1 = a; let x2 = b let x = 0.5 * (a + b); while ((f(x1,R) * f(x2,R) < 0) && (Math.abs(f(x,R)) > 0.01)) { x = 0.5 * (x1 + x2); if (f(x1,R) * f(x,R) < 0) { x2 = x; } if (f(x2,R) * f(x,R) < 0) { x1 = x; } } return x; } var data = [{id: 0, digit: digitsArray[0], x: radius * Math.cos(phi), y: radius * Math.sin(phi), rho: pointRadius}]; for(var i = 0; i< digitsArray.length; i++) { theta = bolzano(0,Math.PI/2,r); r *= Math.exp(b * theta); phi += theta; var datum = {id: (i+1), digit: digitsArray[i+1], x: r * Math.cos(phi), y: r * Math.sin(phi), rho: pointRadius} data.push(datum); } return data.slice(0); }37:[{"id":"fc21199733e77b722012c1421058a2eb2134180d1e27f40778a18cceea972081ba3f487755c9193c3118253964971b7b648feffec4a061e08f417999b5090ad9","href":"https://static.observableusercontent.com/files/fc21199733e77b722012c1421058a2eb2134180d1e27f40778a18cceea972081ba3f487755c9193c3118253964971b7b648feffec4a061e08f417999b5090ad9","name":"digits@1.json","type":"application/json","lastModified":1674340940493.807,"size":30056}] 31:{"id":"dcdb5016db896ca9","slug":"the-beauty-in-the-irrationals","title":"The beauty in the irrationals","thumbnail":"7ec387fc175806e440fcc7d94c9d16dec4b5d5f224f48d1fda7ebebd5ce43c4c","access_level":"public","create_time":"$D2022-10-21T18:48:31.405Z","update_time":"$D2023-04-04T21:10:55.336Z","view_time":null,"first_public_time":"$D2022-10-21T18:48:31.405Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"25b70a872b3828dd","login":"infographeo","name":"infographeo","avatar_url":"https://avatars-next.observableusercontent.com/16798d7c40be0311619918097a95e283dd1c432e23392674264f3e2194d225fa","tier":"starter_2024"},"version":805,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1dd636c4a6dd2c5c","login":"infographeo","name":"infographeo","avatar_url":"https://avatars-next.observableusercontent.com/16798d7c40be0311619918097a95e283dd1c432e23392674264f3e2194d225fa","tier":null}],"members":[{"type":"individual","id":"1dd636c4a6dd2c5c","login":"infographeo","name":"infographeo","avatar_url":"https://avatars-next.observableusercontent.com/16798d7c40be0311619918097a95e283dd1c432e23392674264f3e2194d225fa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"The beauty in the irrationals","cells":[{"id":185,"value":"# The beauty in the irrationals\nThe world of mathematics is filled with incredible numbers, including the well-known and often-used rational numbers. However, there are also a class of numbers known as irrational numbers, which are just as fascinating and deserving of recognition. In this data visualisation, we delve into the first 10,000 digits of three of the most famous irrational numbers: [Pi (π)](https://en.wikipedia.org/wiki/Pi), [Euler's number (e)](https://en.wikipedia.org/wiki/E_(mathematical_constant), and the [golden ratio (φ)](https://en.wikipedia.org/wiki/Golden_ratio). Each of these numbers has unique properties and characteristics that make them truly beautiful, both mathematically and visually. Through the visual representation of these numbers, we will see the underlying patterns and relationships that exist within the irrational numbers. Let us explore the beauty of these numbers and the wonders they have to offer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"viewof settings = Inputs.form(\n [\n Inputs.radio(new Map(irrationals), {label: htl.html`Νumber:`, value: \"pi\"}),\n Inputs.radio(new Map(layouts), {label: htl.html`Layout:`, value: concentricLayoutData}),\n Inputs.select(colorSchemes, {label: htl.html`Color Scheme:`, value: \"Category10\"})\n ],\n {\n template: (inputs) => htl.html`

\n ${inputs}\n

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"chart.update(settings[0], settings[1], settings[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"digits = FileAttachment(\"digits@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"concentricLayoutData = (digitsArray) => {\n const pointRadius = 4;\n return digitsArray.map((digit, i) => {\n let theta = 2 * Math.PI + i * Math.PI/32;\n let r = 0 + 2 * theta;\n return {id: i, digit: digit, x: r * Math.cos(theta), y: r * Math.sin(theta), rho: pointRadius}\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"circlicLayoutData = (digitsArray) => {\n let width = 0.98 * window.innerWidth;\n let pointRadius = 1;\n let R = 0.99 * width / 2.0, r = 0.5 * pointRadius, phi = 2 * Math.asin(r / R), dataLength = Math.floor(2 * Math.PI / phi); \n let hashtable = [[],[],[],[],[],[],[],[],[],[]];\n digitsArray.slice(0,dataLength).map((digit, i) => { \n hashtable[parseInt(digit)].push({id: i, digit: digit})\n });\n let chain = [];\n hashtable.map((d,i) => { d.map((e,j) => { return chain.push(e) })});\n let data = [];\n chain.map((d,i) => { data[d.id] = {id: d.id, digit: d.digit, x: R * Math.sin(i * phi), y: -R * Math.cos(i * phi), rho: 0.5 * pointRadius}})\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"segmentsLayout = (values) => {\n let i = 0, n = values.length, segs = new Array(n - 1);\n while (++i < n) segs[i - 1] = [[values[i - 1].x, values[i - 1].y, values[i - 1].digit], [values[i].x, values[i].y, values[i].digit]];\n return segs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"irrationals = [[\"π = 3.14159..\", \"pi\", \"π\"], [\"e = 2.718281..\", \"euler_e\", \"e\"], [\"φ = 1.61803..\", \"golden_ratio_phi\", \"φ\"]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"layouts = [[\"concentric\", concentricLayoutData], [\"adjacent\", adjacentLayoutData], [\"logarithmic\", logarithmicLayoutData], [\"circlic\", circlicLayoutData]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"colorSchemes = [\"Category10\", \"Tableau10\", \"Blues\", \"Oranges\", \"Reds\", \"BuGn\", \"GnBu\", \"YlOrRd\", \"RdBu\", \"PiYG\", \"Plasma\", \"Inferno\", \"Cool\", \"RdYlGn\", \"Spectral\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"colorsPalette = (name, n = 10) => {\n let colors = [];\n if (d3[`scheme${name}`] && d3[`scheme${name}`][n]) {\n colors = d3[`scheme${name}`][n];\n } else if (d3[`scheme${name}`] && d3[`scheme${name}`][0]) {\n colors = d3[`scheme${name}`];\n } else {\n const interpolate = d3[`interpolate${name}`];\n for (let i = 0; i < n; ++i) {\n colors.push(d3.rgb(interpolate(i / (n - 1))).hex());\n }\n }\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"library = import(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"