2d:null 2e:["$","title",null,{"children":"Build up a (Balloon) chart bit by bit | Russell Watson | Observable"}] 33:T5aa,{ const height = 250; const chart = d3 .create("svg") .attr("width", width) .attr("height", height); yield chart.node(); const y = d3 .scaleLinear() .domain([0, 12]) .range([10, height - 10]), extent = d3.extent(data, d => d.date), x = d3 .scaleLinear() .domain(extent) .range([10, width - 10]); function X(pos) { return x(pos < data.length ? data[pos].date : extent[1]); } const last = positions.length - 1, l = positions[last]; chart .append("line") .attr("y2", height) .attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;") .attr("x1", X(l)) .attr("x2", X(l)); chart .append("g") .selectAll("line") .data(d3.pairs(positions)) .join("line") .attr("x1", d => X(d[0])) .attr("x2", d => X(d[1])) .attr("y1", (_, i) => y(i)) .attr("y2", (_, i) => y(i + 1)) .style("stroke", "#ccc"); chart .append("g") .selectAll("circle") .data(positions.slice(0, -1)) .join("circle") .attr("r", 2) .attr("cx", d => X(d)) .attr("cy", (_, i) => y(i)); chart .append("circle") .attr("r", 3) .attr("cx", X(l)) .attr("cy", y(last)) .style("fill", "red"); chart.on("mousemove click touchmove", function() { const m = d3.mouse(this); const date = x.invert(m[0]); const i = bisect.right(data, date); mutable lookup = new Date(date); }); }34:T6d3,skyGradients = [ "background: linear-gradient(to bottom, #020111 85%,#191621 100%)", "background: linear-gradient(to bottom, #020111 60%,#20202c 100%)", "background: linear-gradient(to bottom, #020111 10%,#3a3a52 100%)", "background: linear-gradient(to bottom, #20202c 0%,#515175 100%)", "background: linear-gradient(to bottom, #40405c 0%,#6f71aa 80%,#8a76ab 100%)", "background: linear-gradient(to bottom, #4a4969 0%,#7072ab 50%,#cd82a0 100%)", "background: linear-gradient(to bottom, #757abf 0%,#8583be 60%,#eab0d1 100%)", "background: linear-gradient(to bottom, #82addb 0%,#ebb2b1 100%)", "background: linear-gradient(to bottom, #94c5f8 1%,#a6e6ff 70%,#b1b5ea 100%)", "background: linear-gradient(to bottom, #b7eaff 0%,#94dfff 100%)", "background: linear-gradient(to bottom, #9be2fe 0%,#67d1fb 100%)", "background: linear-gradient(to bottom, #90dffe 0%,#38a3d1 100%)", "background: linear-gradient(to bottom, #57c1eb 0%,#246fa8 100%)", "background: linear-gradient(to bottom, #2d91c2 0%,#1e528e 100%)", "background: linear-gradient(to bottom, #2473ab 0%,#1e528e 70%,#5b7983 100%)", "background: linear-gradient(to bottom, #1e528e 0%,#265889 50%,#9da671 100%)", "background: linear-gradient(to bottom, #1e528e 0%,#728a7c 50%,#e9ce5d 100%)", "background: linear-gradient(to bottom, #154277 0%,#576e71 30%,#e1c45e 70%,#b26339 100%)", "background: linear-gradient(to bottom, #163C52 0%,#4F4F47 30%,#C5752D 60%,#B7490F 80%, #2F1107 100%)", "background: linear-gradient(to bottom, #071B26 0%,#071B26 30%,#8A3B12 80%,#240E03 100%)", "background: linear-gradient(to bottom, #010A10 30%,#59230B 80%,#2F1107 100%)", "background: linear-gradient(to bottom, #090401 50%,#4B1D06 100%)", "background: linear-gradient(to bottom, #00000c 80%,#150800 100%)" ]35:[] 31:{"id":"5783b6fb96ca1731","slug":"build-up-a-balloon-chart-bit-by-bit","title":"Build up a (Balloon) chart bit by bit","thumbnail":"0ca835c3d1317cfc25ec9f163724084c26a0a22d51cc8784d902c7d2709981d1","access_level":"public","create_time":"$D2019-10-28T20:29:41.560Z","update_time":"$D2020-12-03T20:51:27.240Z","view_time":null,"first_public_time":"$D2020-10-24T02:57:38.843Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"2ea319d712724ad1","login":"mrwatson-de","name":"Russell Watson","avatar_url":"https://avatars-next.observableusercontent.com/2a48c13ac30c60930dd81fd54e0ba08f726a63c81c6400ef7ca118e43dc43cf4","tier":"starter_2024"},"version":1223,"publish_version":1223,"role":null,"authored":false,"authors":[{"type":"individual","id":"59a4c14bf9f7feae","login":"mrwatson-de","name":"Russell Watson","avatar_url":"https://avatars-next.observableusercontent.com/2a48c13ac30c60930dd81fd54e0ba08f726a63c81c6400ef7ca118e43dc43cf4","tier":null}],"members":[{"type":"individual","id":"59a4c14bf9f7feae","login":"mrwatson-de","name":"Russell Watson","avatar_url":"https://avatars-next.observableusercontent.com/2a48c13ac30c60930dd81fd54e0ba08f726a63c81c6400ef7ca118e43dc43cf4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5abe719868e37397","slug":"learn-d3-basics","title":"Learn d3 basics","owner":{"id":"2ea319d712724ad1","login":"mrwatson-de","name":"Russell Watson"}},"type":"notebook","body":{"title":"Build up a (Balloon) chart bit by bit","cells":[{"id":0,"value":"md`# Build up a (Balloon) chart bit by bit\n\nHere I'm experimenting with building charts.\n\nOf course, there's no such thing as a balloon chart, but it just so happens that the thing I've ended up building looks like a bunch of balloons floating in the sky, ... so I'm calling it a balloon chart. Who knows, it might catch on!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"md`And, of course, I'm learning d3 in observable ... that means, of course, learning...\n\n- d3\n- JavaScript\n- SVG\n- HTML\n- CSS\n- and last, but absolutely not least, the wonder (and quirks) of observable itself\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"md`# Learn by your mistakes...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`This is NOT the way to start a d3 chart...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3.selectAll(\"circle\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`...but we WILL be seeing a lot more of THAT function!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`# ...and stand on the shoulders of giants!\n\nObservable is FULL of great visualisations that you can learn from, steal, import, and even import AND APPLY YOUR OWN DATA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`For example, here are some numbers that I stole from somewhere:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"normalDistribution = Float64Array.from({length: 1000}, d3.randomNormal())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"numbers = normalDistribution","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`...and here is the bar chart that inspired me - imported and rerendered USING MY DATA above - Wow cool!:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {chart as histogram} with {numbers as data2, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"histogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"md`...and here is another...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`# COOL bisecting chart - which reacts to mouseover\n\nJust be awed by the chart ... don't let yourself be daunted by the code (which is quite complex)!\n\nDown below I start off *much* easier!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"mutable lookup = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"positions = [...bisectSteps(data, lookup, d => d.date)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function* bisectSteps(a, x, accessor = d => d) {\n let lo = 0,\n hi = a.length;\n while (lo < hi) {\n var mid = (lo + hi) >>> 1;\n yield mid;\n if (d3.ascending(accessor(a[mid]), x) < 0) lo = mid + 1;\n else hi = mid;\n }\n yield lo;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"bisect = d3.bisector(d => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// A synthetic dataset\n// to load your own, use data = d3.json(url)\n// or data = require(\"@observablehq/aapl\")\ndata = Array.from(\n (function*() {\n let date = new Date(),\n close = 98.84;\n for (let i = 0; i < 1280; i++) {\n if (i % 7 > 5) continue; // ignore 2 days per week\n date = new Date(date.setDate(date.getDate() + 1));\n close = +(close + Math.random() - 0.485).toFixed(2);\n yield { date, close };\n }\n })()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`/End of COOL Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`# MY Chart\nHere we go: here I create the chart, and for the sake of anything better to do, I'm just going to plot the numbers above on a (SVG) canvas from left to right, and the size of the number will correspond to the position on the y-axis **and** to the size of the balloon (circle).\n\nFirst the chart OBJECT`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"myFirstProperChart = {\n const myFirstProperChart = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"style\",\"background-color:ivory\")\n \n myFirstProperChart\n .selectAll(\"circle\")\n .data(numbers)\n .join(\"circle\")\n .attr(\"cx\", (d,i) => i)\n .attr(\"cy\", d => d*height)\n .attr(\"r\", d => d*10)//Math.random()*10)\n .attr(\"fill\", d => \"#\" + (Math.random()*999999).toFixed(0))\n\n \n return myFirstProperChart\n\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`Its node() function renders the actual graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"myFirstProperChart.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`# Aside: A quick and (really) dirty method of making random (dark) colours\n\nJavaScript colours are hexadecimal numbers of the form \"#RRGGBB\".\n\nThe following generates a random dark color by only using the lower 10 digits instead of all 16 hexadecimal digits:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"\"#\" + (Math.random()*999999).toFixed(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`# Margins and scales\nnow let's do exactly the same chart, but frame it with a margin and give it scales to make it fit the canvas properly`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"margin = ({top: 60, right: 40, bottom: 40, left: 80})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`First the x-scale`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"x = d3.scaleLinear()\n .domain([0, numbers.length])\n .range([margin.left, width - margin.right])\n //.interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"qtyOfNumbers = numbers.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`and the y-scale - but let's flip the chart vertically to get the standard up=larger y-axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"y = d3.scaleLinear()\n .domain([d3.min(numbers), d3.max(numbers)])\n .range([height - margin.bottom,margin.top]) // swapped values to flip the chart vertically\n //.interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`Now let's put the margin and scales into the chart, and see how it changes\n\nMargins are just used to mathematically adjust the bounds\n\nScales are simply a function you have to pass the coordinates through\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"chartWithScales = {\n const chartWithScales = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"style\",\"background-color:ivory\")\n \n /* Visualize the margin with a rectangle */\n chartWithScales\n .append(\"rect\")\n .attr(\"x\", margin.left)\n .attr(\"y\", margin.top)\n .attr(\"width\", width - margin.left - margin.right)\n .attr(\"height\", height - margin.top - margin.bottom)\n //.style(\"stroke\", \"red\")\n .attr(\"style\", \"fill:none;stroke:#333; stroke-width:0.5; stroke-dasharray: 5 3;\")\n \n chartWithScales\n .selectAll(\"circle\")\n .data(numbers)\n .join(\"circle\")\n .attr(\"cx\", (d,i) => x(i)) // scale the x-coordinate\n .attr(\"cy\", d => y(d)) // scale the y-coordinate\n .attr(\"r\", d => d*10) // scale the size\n .attr(\"fill\", d => \"#\" + (Math.random()*999999).toFixed(0))\n\n return chartWithScales \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chartWithScales.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`# So why are we seeing only half a chart?\n\nThe reason is that some of our numbers are NEGATIVE...in the original chart without scales we did not see them, because they were OFF the SVG-canvas. Now that we have a scale the negative values are mapping to the lower half of the chart ... and have a NEGATIVE radius, so...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`# We need a SIZE scale too`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`Not forgetting the SIZE scale ... which is particularly necessary, because we have NEGATIVE sizes!\n\nIt's generally better to usea the Sqrt scale for numbers being displayed as an area, since the area is what you percieve - and that is pi * r^2 ... You can compare them below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"r = (balloonScaleType=='area'?d3.scaleSqrt():d3.scaleLinear())\n .domain([d3.min(numbers), d3.max(numbers)])\n .range([1,circleSizeMax])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`Add in the size scale (and tweak the colours to make it look like balloons in the sky)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"chartWith3Scales = {\n const chartWith3Scales = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"style\",skyGradientStyle)\n \n /* And plot the balloons */\n chartWith3Scales\n .selectAll(\"circle\")\n .data(numbers)\n .join(\"circle\")\n .attr(\"cx\", (d,i) => x(i)) // scale the x-coordinate\n .attr(\"cy\", d => y(d)) // scale the y-coordinate\n .attr(\"r\", d => r(d)) // scale the size\n .attr(\"fill\", d => \"#\" + (Math.random()*999999).toFixed(0))\n\n return chartWith3Scales \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`and adjust the maximum circle size to suit:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof circleSizeMax = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"circleSizeMax","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"chartWith3Scales.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"viewof balloonScaleType = radio({\n title: 'balloon scale type',\n description: 'Please select your preferred scale',\n options: [\n { label: 'Linear', value: 'linear' },\n { label: 'Area', value: 'area' },\n ],\n value: 'area'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"md `The above simple-to-use input is imported from elsewhere:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"md`# And for a bit of fun, let's make a variable sky gradient in the background!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"viewof skyGradientIndex = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"skyGradientIndex","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"md`Pluck the selected skyGradientStyle from the skyGradients array for us in the chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"skyGradientStyle = skyGradients[skyGradientIndex]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"\nmd`Sky Gradients CSS from https://codepen.io/billyysea/pen/whjbK\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"md`Back to business: time to add axes ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`# Adding axes\n\n~~Note that axes are not only the visualization of the lines and ticks, they also take over the role of applying the scale function to your data!~~\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"{\n const chartWithAxes = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"style\",skyGradientStyle)\n\n chartWithAxes\n .append('g')\n .call(d3.axisLeft(y))\n .attr('transform', `translate(${margin.left/2},0)`) \n \n chartWithAxes\n .append('g')\n .call(d3.axisBottom(x))\n .attr('transform', `translate(0,${height-margin.bottom/2-10})`) \n \n\n chartWithAxes\n .selectAll(\"circle\")\n .data(numbers)\n .join(\"circle\")\n .attr(\"cx\", (d,i) => x(i))\n .attr(\"cy\", d => y(d))\n .attr(\"r\", d => r(d))\n .attr(\"fill\", d => \"#\" + (Math.random()*999999).toFixed(0))\n return chartWithAxes.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"md`# Improving the looks\n\nNow here's an idea: Let's try sorting the numbers, so that the big balloons are in the foreground!\n\n - We'll have to sort the numbers from low to high, so that biggest balloons = later = at front\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"numbersSorted = [...numbers].sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"{\n const chartWithPerspective = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"style\",skyGradientStyle)\n\n chartWithPerspective\n .append('g')\n .call(d3.axisLeft(y))\n .attr('transform', `translate(${margin.left/2},0)`) \n \n chartWithPerspective\n .append('g')\n .call(d3.axisBottom(x))\n .attr('transform', `translate(0,${height-margin.bottom/2-10})`) \n \n\n chartWithPerspective\n .selectAll(\"circle\")\n .data(numbersSorted)\n .join(\"circle\")\n .attr(\"cx\", (d,i) => x(i))\n .attr(\"cy\", d => y(d))\n .attr(\"r\", d => r(d))\n .attr(\"fill\", d => \"#\" + (Math.random()*999999).toFixed(0))\n return chartWithPerspective.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"md`OK, so THAT didn't work!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"md`# Munging the Data\n\nIf we just sort the number array we get the numbers in the order that we want to process them (for the z-order) ...**but** we lose the (essential) original position of the number\n\nWe thus have to retain the original position by constructing a new Array comprising the number n and its original position i.\n\nWe can use he reduce function to iterate across all eleements of the array and push the comined info onto a new array...\n\n# ...and stabilising the colour...(and the luck)\n\nwhile we are at it, we can also store the fill colour, so that the \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"numbersSortedWithOriginalPosition = {\n const arr = new Array()\n numbers.reduce( (a,n,i) => arr.push({n,i,fill:\"#\" + (Math.random()*999999).toFixed(0),luck:Math.random()}) )\n return arr.sort( (a,b) => a.n > b.n)\n} \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"md`# Looking good!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"{\n const chartWithPerspective2 = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"style\",skyGradientStyle)\n\n chartWithPerspective2\n .append('g')\n .call(d3.axisLeft(y))\n .attr('transform', `translate(${margin.left/2},0)`) \n \n chartWithPerspective2\n .append('g')\n .call(d3.axisBottom(x))\n .attr('transform', `translate(0,${height-margin.bottom/2-10})`) \n \n\n chartWithPerspective2\n .selectAll(\"circle\")\n .data(numbersSortedWithOriginalPosition)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.i))\n .attr(\"cy\", d => y(d.n))\n .attr(\"r\", d => r(d.n))\n .attr(\"fill\", d => d.fill)\n return chartWithPerspective2.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"md`# Amount of data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"viewof thinningOfData = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"viewof amountOfData = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"viewof startOfData = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"{\n const chartWithPerspective2 = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n .attr(\"style\",skyGradientStyle)\n\n chartWithPerspective2\n .append('g')\n .call(d3.axisLeft(y))\n .attr('transform', `translate(${margin.left/2},0)`) \n \n chartWithPerspective2\n .append('g')\n .call(d3.axisBottom(x))\n .attr('transform', `translate(0,${height-margin.bottom/2-10})`) \n \n\n chartWithPerspective2\n .selectAll(\"circle\")\n .data(numbersSortedWithOriginalPosition.slice(startOfData,startOfData+amountOfData).filter(d => d.luck * 100 <= thinningOfData))\n .join(\"circle\")\n .attr(\"cx\", d => x(d.i))\n .attr(\"cy\", d => y(d.n))\n .attr(\"r\", d => r(d.n))\n .attr(\"fill\", d =>d.fill)\n return chartWithPerspective2.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"md`# 🚧 REST IS STILL UNDER CONSTRUCTION 🚧`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"md `Further ideas:\n\n- change the x-axis to a timeline\n- add a balloon tail to show the lead up to the event\n - For example, if the balloons represent payments, the tail could represent the sales process up to the payment\n - Maybe with the tail starting at first contact, and a little point (Bow ⧓ ?) for each 'event' / order / shipment / delivery / invoice\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof tailLength = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"tailLength","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"{\n /*myFirstProperChart\n .append(\"line\")\n .attr(\"x1\",0)\n .attr(\"y1\",height/2)\n .attr(\"x2\",lineLength)\n .attr(\"y2\",height/2)\n .attr(\"stroke\",\"red\")\n */\n yield myFirstProperChart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"svg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data2=[{\"x\": 1.0, \"y\": 1.1}, {\"x\": 2.0, \"y\": 2.5}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"