45:["$","title",null,{"children":"Lab - JavaScript and D3 Basics | jrogerthat | Observable"}] 4d: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)*`} 4e:[] 49:{"id":"69355ff1f363d3c3","slug":"lab-javascript-and-d3-basics","title":"Lab - JavaScript and D3 Basics","thumbnail":"8967b85ffc5886d6c56f2f3498ccdfa9466268903a6bf7ce7287d43fab4821ed","access_level":"public","create_time":"$D2019-09-04T00:30:35.559Z","update_time":"$D2019-09-04T01:16:29.117Z","view_time":null,"first_public_time":"$D2019-09-04T01:16:48.792Z","has_unpublished_edits":null,"fork":{"id":"4b299af85af1f77a","slug":"lab-javascript-and-d3-basics","title":"Lab - JavaScript and D3 Basics","owner":{"id":"6fb7aee764d1394e","login":"kirangadhave","name":"Kiran Gadhave"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d18f470d87fc3b35","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":176,"publish_version":176,"role":null,"authored":false,"authors":[{"type":"individual","id":"71d74430949eb42d","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"71d74430949eb42d","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lab - JavaScript and D3 Basics","cells":[{"id":0,"value":"md`# Lab - JavaScript and D3 Basics`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`Importing D3 here`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require('d3');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`# Defining Styles`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`# Selections`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`---\n## Example 02 -- Update :: Enter :: Exit :: Merge`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`# Data Binding - Try it out!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null