2a:null 2b:["$","title",null,{"children":"Lab - JavaScript and D3 Basics | Kiran Gadhave | Observable"}] 31:T467,viewof Example02 = { // Select the svg you initialized let svg = d3.select('#example-2'); //[Update :: Enter :: Exit :: Merge] // Use Update :: Enter :: Exit :: Merge to create circles bound to dataArray // n.b., The circles should have a 'fill' associated with the data color, // a radius associated with the data value, and should be regualrly // spaced across the svg. For ease of selection assign the circles // an empty class! // (You will need to be able to update the data and re-run this code block!) let circles = svg.selectAll('circle').data(dataArray); // Update let circleEnter = circles.enter().append('circle'); // Enter circles.exit().remove() // Exit circles = circleEnter.merge(circles); // Merge //Update properties of all circle according to the bound data circles.attr('cx', (d, i) => i*100+50) .attr('cy', 200) .attr('fill', (d) => d.color) .attr('r', (d) => d.value*5); return md`**Data Binding - Enter, Exit, Merge ** *(expand)*`} 32:T6b0,{ let ssSvg = d3.select('#solar-system'); let sortedSolarSystem = solarSystem.sort((a,b)=> a.distanceFromSun - b.distanceFromSun); const sun = sortedSolarSystem[0]; sortedSolarSystem = sortedSolarSystem.slice(1) const planetSizeScale = d3.scaleLinear().domain([2370, 142984]).range([5, 20]) const distFromSunScale = d3.scalePow() .exponent(0.1) .domain([57.9, 5906.4]) .range([60, 400]) sortedSolarSystem.forEach(planet => { const X = getRadialX(distFromSunScale(planet.distanceFromSun)); const Y = getRadialY(X, distFromSunScale(planet.distanceFromSun)); planet.X = X; planet.Y = Y; }); const solarSystemGroup = ssSvg.append('g').attr('transform', 'translate(450, 450)'); solarSystemGroup.append('circle').attr('r', 30).style('fill', sun.color); const planets = solarSystemGroup.selectAll('.planet').data(sortedSolarSystem); planets.join('circle') .classed('planet', true) .attr('r', d => planetSizeScale(d.diameter)) .attr('cx', d=> d.X) .attr('cy', d => d.Y) .style('fill', d => d.color); const orbits = solarSystemGroup.selectAll('.orbit').data(sortedSolarSystem); orbits.join( enter => enter .append('circle') .classed('orbit', true) .attr('stroke', d=> d.color) .attr('r', d => distFromSunScale(d.distanceFromSun)) .attr('stroke-width', 1), update => update.classed('orbit', true) .attr('stroke', d=> d.color) .attr('stroke-width', 1), exit => exit.remove() ) return sortedSolarSystem; }33:[] 2e:{"id":"4b299af85af1f77a","slug":"lab-javascript-and-d3-basics","title":"Lab - JavaScript and D3 Basics","thumbnail":"980e568681aee8b7f4d676187be181812e7aa9641593a51a76203b4b75fe567a","access_level":"public","create_time":"$D2019-09-03T21:23:42.841Z","update_time":"$D2019-09-05T01:28:00.350Z","view_time":null,"first_public_time":"$D2019-09-03T21:25:37.750Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"6fb7aee764d1394e","login":"kirangadhave","name":"Kiran Gadhave","avatar_url":"https://avatars-next.observableusercontent.com/97bc247200dca4f593fe558d4eaf94be7366bf9c379f095ee799d1890ffbdf0a","tier":"starter_2024"},"version":275,"publish_version":275,"role":null,"authored":false,"authors":[{"type":"individual","id":"a5c6293168616967","login":"kirangadhave","name":"Kiran Gadhave","avatar_url":"https://avatars-next.observableusercontent.com/97bc247200dca4f593fe558d4eaf94be7366bf9c379f095ee799d1890ffbdf0a","tier":null}],"members":[{"type":"individual","id":"a5c6293168616967","login":"kirangadhave","name":"Kiran Gadhave","avatar_url":"https://avatars-next.observableusercontent.com/97bc247200dca4f593fe558d4eaf94be7366bf9c379f095ee799d1890ffbdf0a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"58a504c5a102f7df","slug":"visualization-for-data-science","title":"Visualization for Data Science","owner":{"id":"6fb7aee764d1394e","login":"kirangadhave","name":"Kiran Gadhave"}},"type":"notebook","body":{"title":"Lab - JavaScript and D3 Basics","cells":[{"id":0,"value":"md`# Lab - JavaScript and D3 Basics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`Importing D3 here`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require('d3');","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`# Defining Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`# Selections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof Example1A = {\n let exampleSvg = d3.select('#example-1');\n let aRect = exampleSvg.select('rect');\n aRect.classed('red-rect', true);\n return aRect;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"viewof Example1B = {\n ///Select ALL of the rects\n let exampleSvg = d3.select('#example-1');\n let aRect = exampleSvg.selectAll('rect');\n aRect.classed('red-rect', true);\n return aRect;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`---\n## Example 02 -- Update :: Enter :: Exit :: Merge`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"dataArray = [{ color: 'blue', value: 5 }, { color: 'red', value: 8 }, { color: 'yellow', value: 3 }, { color: 'green', value: 9 }]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`# Data Binding - Try it out!`","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"yourDataArray = [{ color: 'purple', value: 5 }, { color: 'red', value: 8 }, { color: 'yellow', value: 3 }, { color: 'green', value: 9 }, { color: 'brown', value: 15 }]","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"{\n // Use d3 to select the #your-turn div\n\n // Append an svg element with dimensions (600, 400)\n // Give it an id so you can access it in the next code block\n \nreturn md`**Exercise 1:** *Initialization*`}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"{\n //Solution 1: Use Data Binding! [Update :: Enter :: Exit :: Merge]\n \n // Select the svg you initialized\n \n // Use Update :: Enter :: Exit :: Merge to create circles bound to dataArray\n // n.b., The circles should have a 'fill' associated with the data color, \n // a radius associated with the data value, and should be regualrly \n // spaced across the svg. For ease of selection assign the circles \n // an empty class!\n // (You will need to be able to update the data and re-run this code block!)\n \n \n \nreturn md`**Exercise 1.2:** *Update Scheme*`} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`# Using D3V5 selection.join`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`We will visualize a representation of Solar System! **Not to scale**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`## Solar System Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"solarSystem = [\n{name: 'Mercury', diameter: 4879, meanTemperature: 167, distanceFromSun: 57.9, color: '#C0BEC7'},\n{name: 'Venus', diameter: 12104, meanTemperature: 464, distanceFromSun: 108.2, color: '#F5B16B'},\n{name: 'Earth', diameter: 12756, meanTemperature: 15, distanceFromSun: 149.6, color: '#24BCEA'},\n{name: 'Mars', diameter: 6792, meanTemperature: -66, distanceFromSun: 227.9, color: '#FD753E'},\n{name: 'Jupiter', diameter: 142984, meanTemperature: -110, distanceFromSun: 778.6, color: '#F49A30'},\n{name: 'Saturn', diameter: 120596, meanTemperature: -140, distanceFromSun: 1433.5, color: '#FBDB78'},\n{name: 'Uranus', diameter: 51118, meanTemperature: -195, distanceFromSun: 2872.5, color: '#88DBD1'},\n{name: 'Neptune', diameter: 49528, meanTemperature: -200, distanceFromSun: 4495.1, color: '#FFAC65'},\n{name: 'Pluto', diameter: 2370, meanTemperature: -225, distanceFromSun: 5906.4, color: '#6560C6'},\n{name: 'Sun', diameter: 1392530, meanTemperature: 5504, distanceFromSun: 0, color: '#ffff00'}\n]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"function getRadialX(max) {\n const X = Math.random() * max;\n if (Math.random() > 0.5)\n return X;\n return -X;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"function getRadialY(X, R) {\n const Y = Math.sqrt(R*R - X*X);\n if (Math.random() > 0.5) return Y;\n return -Y; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`# Recursion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`A recursive function is a function that call itself. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`We can test out recursion with our simple countdown function, that decrements a number, adds it to an array, and then calls itself until we reach 0.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"function countdown(value, keeper) {\n keeper.push(value);\n if (value <= 0) { //base case or termination condition\n return keeper;\n } else {\n return countdown(value - 1, keeper);//function calls itself\n }\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`In recursion, we need a base case that checks if we terminate. In this example, we are checking if we have gotten to zero. If so, we can return the array. Otherwise, we run the function again.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"countdown(10, [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`## A slightly more complicated example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`Calculating [Fibonacci Sequence](https://en.wikipedia.org/wiki/Fibonacci_number) with recursion. Fibonacci sequence looks like follows:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`1, 1, 2, 3, 5, 8, 13, 21, 34 ...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`Except for the first two numbers, every number is the sum of previous two numbers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"function fibonacciSequence(n, sequence) {\n const length = sequence.length;\n if (length === n) return sequence;\n if (length === 0 || length === 1)\n sequence.push(1)\n else\n sequence.push(sequence[sequence.length-1] + sequence[sequence.length - 2])\n \n fibonacciSequence(n, sequence);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"{\n const arr = []\n fibonacciSequence(10, arr)\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"