2d:null 2e:["$","title",null,{"children":"D3 by Example | Mark Steve Samson | Observable"}] 33:T590,md` ### Mutation array.pop - Remove the last element from the array. array.push - Add one or more elements to the end of the array. array.reverse - Reverse the order of the elements of the array. array.shift - Remove the first element from the array. array.sort - Sort the elements of the array. array.splice - Add or remove elements from the array. array.unshift - Add one or more elements to the front of the array. ### Access array.concat - Join the array with other array(s) or value(s). array.join - Join all elements of the array into a string. array.slice - Extract a section of the array. array.indexOf - Find the first occurrence of a value within the array. array.lastIndexOf - Find the last occurrence of a value within the array. ### Iteration array.filter - Create a new array with only the elements for which a predicate is true. array.forEach - Call a function for each element in the array. array.every - See if every element in the array satisfies a predicate. array.map - Create a new array with the result of calling a function on every element in the array. array.some - See if at least one element in the array satisfies a predicate. array.reduce - Apply a function to reduce the array to a single value (from left-to-right). array.reduceRight - Apply a function to reduce the array to a single value (from right-to-left). `34:T458,axisGrid = { const width = 800 const height = 400 const padding = 50 const data = [1, 4, 3.5, 2] const x = d3.scaleLinear() .domain([0, data.length - 1]) .range([padding, width - padding]) const y = d3.scaleLinear() .domain([0, 4]) .range([height - padding, padding]) const line = d3.line() .x((d, i) => x(i)) .y(d => y(d)) const el = html`` const svg = d3.select(el) const xAxis = d3.axisBottom(x) .tickPadding(10) .tickSizeInner(-(height - 2 * padding)) .ticks(data.length) const yAxis = d3.axisLeft(y) .tickPadding(10) .tickSizeInner(-(width - 2 * padding)) const axes = svg.append('g') .attr('color', '#efefef') axes.append('g') .style('transform', `translate(0, ${height - padding}px)`) .call(xAxis) axes.append('g') .style('transform', `translate(${padding}px, 0)`) .call(yAxis) axes.selectAll('text') .attr('color', '#333') svg.append('path') .attr('d', line(data)) .attr('fill', 'transparent') .attr('stroke', '#333') return el }35:T500,axisStyle = { const width = 800 const height = 400 const padding = 50 const data = [1, 4, 3.5, 2] const x = d3.scaleLinear() .domain([0, data.length - 1]) .range([padding, width - padding]) const y = d3.scaleLinear() .domain([0, 4]) .range([height - padding, padding]) const line = d3.line() .x((d, i) => x(i)) .y(d => y(d)) const el = html`` const svg = d3.select(el) const xAxis = d3.axisBottom(x) .tickPadding(10) .tickSizeInner(-(height - 2 * padding)) .ticks(8) const yAxis = d3.axisLeft(y) .tickPadding(10) .tickSizeInner(-(width - 2 * padding)) .ticks(8) const axes = svg.append('g') .attr('color', '#efefef') axes.append('g') .style('transform', `translate(0, ${height - padding}px)`) .call(xAxis) .selectAll('.tick') .attr('color', (d, i) => d3.schemeBlues[9][i]) axes.append('g') .style('transform', `translate(${padding}px, 0)`) .call(yAxis) .selectAll('.tick') .attr('color', (d, i) => d3.schemeBlues[9][i]) axes.selectAll('.domain').remove() svg.append('path') .attr('d', line(data)) .attr('fill', 'transparent') .attr('stroke', 'red') .attr('stroke-width', 3) return el }36:T52f,axisTime = { const width = 800 const height = 400 const padding = 50 const data = [ {timestamp: new Date(2018, 3), value: 1}, {timestamp: new Date(2018, 4), value: 4}, {timestamp: new Date(2018, 5), value: 3.5}, {timestamp: new Date(2018, 6), value: 2}, ] const x = d3.scaleTime() .domain(d3.extent(data, d => d.timestamp)) .range([padding, width - padding]) const y = d3.scaleLinear() .domain([0, 4]) .range([height - padding, padding]) const line = d3.line() .x(d => x(d.timestamp)) .y(d => y(d.value)) const el = html`` const svg = d3.select(el) const xAxis = d3.axisBottom(x) .tickSizeInner(-(height - 2 * padding)) .tickSizeOuter(0) .ticks(d3.timeMonth) .tickFormat(d3.timeFormat('%B %Y')) .tickPadding(10) const yAxis = d3.axisLeft(y) .tickSizeOuter(0) const axes = svg.append('g') .attr('color', '#eee') axes.append('g') .style('transform', `translate(0, ${height - padding}px)`) .call(xAxis) axes.append('g') .style('transform', `translate(${padding}px, 0)`) .call(yAxis) axes.selectAll('text') .attr('color', '#333') svg.append('path') .attr('d', line(data)) .attr('fill', 'transparent') .attr('stroke', '#333') return el }37:T4b6,tooltip = { const width = 400 const height = 200 const padding = 50 const el = html`` const data = [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5] const x = d3.scaleLinear() .domain(d3.extent(data)) .range([padding, width - padding]) const y = d3.scaleLinear() .domain(d3.extent(data, d => Math.pow(d, 2))) .range([height - padding, padding]) const svg = d3.select(el) svg.selectAll('circle') .data(data) .enter() .append('circle') .attr('cx', x) .attr('cy', d => y(Math.pow(d, 2))) .attr('r', 10) .attr('fill', 'whitesmoke') .on('mouseover', function (d) { d3.select(this) .attr('fill', 'crimson') tooltip .attr('x', x(d)) .attr('y', y(Math.pow(d, 2))) .attr('dy', 25) .text(JSON.stringify({ x: d, y: Math.pow(d, 2) })) }) .on('mouseout', function (d) { d3.select(this) .attr('fill', 'whitesmoke') tooltip.text('') }) const tooltip = svg.append('text') .attr('text-anchor', 'middle') .attr('font-family', 'Helvetica Neue, sans-serif') return el }38:T6a6,checkins = [{"actual":"258.75","users":"13","week":"1"},{"actual":"487.1","users":"14","week":"2"},{"actual":"399.5","users":"14","week":"3"},{"actual":"395.95","users":"13","week":"4"},{"actual":"436.625","users":"13","week":"5"},{"actual":"447.5","users":"14","week":"6"},{"actual":"367.0","users":"13","week":"7"},{"actual":"364.0","users":"12","week":"8"},{"actual":"404.25","users":"12","week":"9"},{"actual":"441.0","users":"16","week":"10"},{"actual":"578.5","users":"16","week":"11"},{"actual":"573.45","users":"16","week":"12"},{"actual":"314.25","users":"15","week":"13"},{"actual":"570.95","users":"18","week":"14"},{"actual":"583.91","users":"19","week":"15"},{"actual":"665.8","users":"18","week":"16"},{"actual":"617.0","users":"18","week":"17"},{"actual":"447.15","users":"16","week":"18"},{"actual":"508.55","users":"15","week":"19"},{"actual":"498.15000000000003","users":"16","week":"20"},{"actual":"727.4","users":"19","week":"21"},{"actual":"614.0","users":"19","week":"22"},{"actual":"429.01","users":"19","week":"23"},{"actual":"529.85","users":"19","week":"24"},{"actual":"755.59","users":"21","week":"25"},{"actual":"734.4599999999999","users":"21","week":"26"},{"actual":"871.5000000000001","users":"25","week":"27"},{"actual":"970.0400000000001","users":"25","week":"28"},{"actual":"857.36","users":"25","week":"29"},{"actual":"869.2599999999998","users":"24","week":"30"},{"actual":"828.5399999999998","users":"24","week":"31"},{"actual":"856.9699999999999","users":"25","week":"32"},{"actual":"906.99","users":"26","week":"33"}] .map(d => ({ week: parseInt(d.week, 10), avgHours: parseFloat(d.actual) / parseInt(d.users, 10), users: parseInt(d.users, 10) }))39:T663,quiz7 = { const width = 800 const height = 800 const padding = 50 const [minX, maxX] = d3.extent(checkins.map(d => d.users)) const x = d3.scaleLinear() .domain([minX - 1, maxX + 1]) .range([padding, width - padding]) const [minY, maxY] = d3.extent(checkins, d => d.avgHours) const y = d3.scaleLinear() .domain([minY - 1, maxY + 1]) .range([height - padding, padding]) const el = html`` const svg = d3.select(el) const xAxis = d3.axisBottom(x) .ticks(maxX - minX) const yAxis = d3.axisLeft(y) // Axes const axes = svg.append('g') axes.append('g') .style('transform', `translate(0, ${height - padding}px)`) .call(xAxis) axes.append('g') .style('transform', `translate(${padding}px, 0)`) .call(yAxis) const labels = axes.append('g') .attr('font-family', 'Helvetica Neue, sans-serif') .attr('font-size', 12) labels.append('text') .attr('x', width / 2) .attr('y', height) .attr('dy', -20) .attr('text-anchor', 'middle') .text('Team size') labels.append('text') .attr('x', 0) .attr('y', height / 2) .attr('dy', 20) .attr('transform', `rotate(-90, 0, ${height / 2})`) .attr('text-anchor', 'middle') .text('Average hours per person') // Baselines const baselines = svg.append('g') // Connected scatterplot const line = d3.line() svg.append('path') .datum(checkins) svg.append('g') .selectAll('circle') .data(checkins) svg.append('g') .selectAll('text') .data(checkins) return el }3a:[] 31:{"id":"d5a50b1218c35470","slug":"d3-by-example","title":"D3 by Example","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-07-26T05:08:15.990Z","update_time":"$D2018-08-23T05:59:45.013Z","view_time":null,"first_public_time":"$D2018-07-27T05:02:18.426Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4cd62aaa0676797f","login":"marksteve","name":"Mark Steve Samson","avatar_url":"https://avatars-next.observableusercontent.com/9c60d3bee4d29b47f86959903600105b1851616b5c2999f58c35fc1a3185707a","tier":"starter_2024"},"version":2359,"publish_version":2359,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c7708f524897050","login":"marksteve","name":"Mark Steve Samson","avatar_url":"https://avatars-next.observableusercontent.com/9c60d3bee4d29b47f86959903600105b1851616b5c2999f58c35fc1a3185707a","tier":null}],"members":[{"type":"individual","id":"4c7708f524897050","login":"marksteve","name":"Mark Steve Samson","avatar_url":"https://avatars-next.observableusercontent.com/9c60d3bee4d29b47f86959903600105b1851616b5c2999f58c35fc1a3185707a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"title":"D3 by Example","cells":[{"id":0,"value":"md`# D3 by Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## 0. Basics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"helloHtml = html`\n\n Hello, world\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"helloSvg = svg`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"instruct1 = quiz(md`### Quiz #1\n> _Render a horizontal bar chart svg with the following specs:_\n- Width: 400\n- Height: 200\n- Bar widths: 50%, 75%, 80%, 25%\n- Bar color: Your favorite color\n\n> _Use the cell below 👇 as base_.\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"quiz1 = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`## 1. Selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"selectHtml = withClone(helloHtml, el => {\n d3.select(el).select('.hello').html('Kamusta')\n d3.select(el).select('.target').text('mga kapatid!')\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"selectSvg = withClone(helloSvg, function (el) {\n const svg = d3.select(el)\n svg.select('rect').attr('fill', 'rebeccapurple')\n svg.select('circle').attr('fill', 'goldenrod')\n svg.select('ellipse').attr('stroke', 'black')\n svg.select('line').attr('stroke-dasharray', '5')\n svg.select('text').attr('font-family', 'sans-serif')\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"circles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"selectAll = withClone(circles, el => {\n d3.select(el)\n .selectAll('circle')\n .attr('fill', '#b4d455')\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"append = withClone(circles, el => {\n d3.select(el)\n .append('circle')\n .attr('cx', 90)\n .attr('cy', 10)\n .attr('r', 10)\n .attr('fill', 'magenta')\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"remove = withClone(circles, el => {\n d3.select(el)\n .selectAll('circle').filter(':first-child')\n .remove()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`\n### Other selection methods\n\n selection.attr(name[, value])\n selection.style(name[, value[, priority]])\n selection.property(name[, value])\n selection.text([value])\n selection.html([value])\n selection.classed(className[, toggled])\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"instruct2 = quiz(md`### Quiz #2\n\n> _Highlight the 80% width bar in your chart with a seatmate's favorite color. If you have the same favorite color, you found a bestie. Use your least favorite color instead._`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"quiz2 = withClone(quiz1, el => {\n // Write here\n return el\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`## 2. Joining Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"datumJoin = {\n const el = html`

`\n d3.select(el)\n .datum('a')\n .text(d => d)\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"dataJoin = {\n const button = html``\n const el = html`\n

${button}

`\n button.addEventListener('click', () => {\n d3.select(el)\n .select('ul')\n .selectAll('li')\n .data([1, 2, 3, 4])\n .text(d => d)\n })\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"nestedData = {\n const button = html``\n const el = html`\n\n \n \n \n \n \n \n \n

No \"boy\"	Has \"boy\"

${button}

`\n const data = [\n ['Girl', 'Boy'],\n ['Bakla', 'Tomboy'],\n ['Butiki', 'Baboy'],\n ]\n button.addEventListener('click', () => {\n d3.select(el)\n .select('tbody')\n .selectAll('tr')\n .data(data)\n .selectAll('td')\n .data(d => d)\n .text(d => d)\n })\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"circlesV2 = {\n const el = html`\n`\n const x = [10, 30, 50, 70]\n d3.select(el)\n .selectAll('circle')\n .data(x)\n .attr('cx', d => d)\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"instruct3 = quiz(md`### Quiz #3\n> _Recreate your chart using data joining. Fill up and use the \\`data\\` cell below so you can access it in later quizzes._\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"data = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"quiz3 = withClone(quiz2, el => {\n // Write here\n return el\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`## 3. Enter/Exit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"alphabets = require('@observablehq/alphabet')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"generalUpdatePattern = {\n const button = html``\n const el = html`

${button}

`\n \n const selection = d3.select(el)\n .select('ul')\n .selectAll('li')\n .data(alphabets)\n .enter()\n .append('li')\n .text(d => d.letter)\n \n button.addEventListener('click', () => {\n const filteredAlphabets = alphabets.filter(d => ~alphabest.toUpperCase().lastIndexOf(d.letter))\n selection\n .data(filteredAlphabets)\n .text(d => d.letter)\n .exit()\n .remove()\n })\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"viewof alphabest = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"circlesV3 = {\n const el = html``\n const data = circlesX.split(',')\n d3.select(el)\n .selectAll('circle')\n .data(data)\n .enter()\n .append('circle')\n .attr('cx', (d, i) => d)\n .attr('cy', 10)\n .attr('r', 10)\n .attr('fill', 'red')\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"viewof circlesX = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"instruct4 = quiz(md`### Quiz #4\n> _Use enter/exit to render your chart with 4 additional data points:_\n- Your birth month divided by 12\n- Your birth day divided by total days of that month\n- \\`Math.random()\\`\n- \\`1 - Math.random()\\`\n\n> _Don't forget about the highlighted bar!_\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"newData = data.concat([\n // Additional data here\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"quiz4 = {\n const el = svg``\n // Write code here\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"md`## 4. Arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"array = [['a', 1], ['b', 2], ['c', 3], ['d', 4]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"arrayMax = d3.max(array, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"arrayMin = d3.min(array, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"arrayExtent = d3.extent(array, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"arraySum = d3.sum(array, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"arrayMean = d3.mean(array, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"arrayMedian = d3.median(array, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"arrayRange = d3.range(4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"arrayZip = d3.zip(['a', 'b', 'c', 'd'], arrayRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"alphabetsFreq = {\n const el = html``\n const svg = d3.select(el)\n \n const maxFreq = d3.max(alphabets, d => d.frequency)\n const meanFreq = d3.mean(alphabets, d => d.frequency)\n \n svg.selectAll('rect')\n .data(alphabets)\n .enter()\n .append('rect')\n .attr('x', (d, i) => i * 30)\n .attr('y', d => 100 - (100 * d.frequency / maxFreq))\n .attr('width', 20)\n .attr('height', d => 100 * d.frequency / maxFreq)\n .attr('fill', 'dodgerblue')\n \n svg.append('line')\n .attr('x1', 0)\n .attr('x2', 800)\n .attr('y1', 100 * meanFreq / maxFreq)\n .attr('y2', 100 * meanFreq / maxFreq)\n .attr('stroke', 'pink')\n \n svg.selectAll('text')\n .data(alphabets)\n .enter()\n .append('text')\n .attr('x', (d, i) => i * 30)\n .attr('dx', 5)\n .attr('y', 120)\n .style('font-size', 12)\n .style('font-family', 'Helvetica Neue')\n .text(d => d.letter)\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"instruct5 = quiz(md`### Quiz #5\n> _Dynamically highlight the bar in your chart with the max value. Highlight the min value as well with the dominant color of the last food you ate._\n\n> _**Protip**: Use the ternary operator!_\n\n> \\`const pogiBa = d.name === 'Pepe' ? 'Pogi' : 'Pwede na' \\`\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"quiz5 = withClone(quiz4, el => {\n // Write here\n return el\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"md`## 5. Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"linearScale = {\n const el = html``\n const data = d3.range(10)\n \n const x = d3.scaleLinear()\n .domain(d3.extent(data))\n .range([0, 400])\n \n d3.select(el)\n .selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', 0)\n .attr('y', (d, i) => i * 20)\n .attr('width', d => x(d))\n .attr('height', 15)\n .attr('fill', 'gold')\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"sequentialScale = {\n const el = html``\n const data = d3.range(10).map(d => (d + 1) / 10)\n \n const fill = d3.scaleSequential(d3.interpolatePurples)\n \n d3.select(el)\n .selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', (d, i) => i * 40)\n .attr('y', 10)\n .attr('width', 30)\n .attr('height', 30)\n .attr('fill', d => fill(d))\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"divergingScale = {\n const el = html``\n const data = d3.range(10).map(d => (d + 1) / 10)\n \n const fill = d3.scaleDiverging(d3.interpolatePuOr)\n\n d3.select(el)\n .selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', (d, i) => i * 40)\n .attr('y', 10)\n .attr('width', 30)\n .attr('height', 30)\n .attr('fill', d => fill(d))\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"quantizeScale = {\n const el = html``\n const data = d3.range(10)\n \n const fill = d3.scaleQuantize()\n .domain(d3.extent(data))\n .range(['red', 'orange', 'magenta'])\n\n d3.select(el)\n .selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', (d, i) => i * 40)\n .attr('y', 10)\n .attr('width', 30)\n .attr('height', 30)\n .attr('fill', d => fill(d))\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"ordinalScale = {\n const el = html``\n const data = d3.range(10)\n const fill = d3.scaleOrdinal()\n .domain(data)\n .range(['black', 'yellow'])\n\n d3.select(el)\n .selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', (d, i) => i * 40)\n .attr('y', 10)\n .attr('width', 30)\n .attr('height', 30)\n .attr('fill', d => fill(d))\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"bandScale = {\n const el = html``\n const data = d3.range(10)\n const band = d3.scaleBand()\n .domain(data)\n .range([0, 400])\n .paddingInner(0.25)\n\n d3.select(el)\n .selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', d => band(d))\n .attr('y', 10)\n .attr('width', band.bandwidth())\n .attr('height', band.bandwidth())\n .attr('fill', 'forestgreen')\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"instruct6 = quiz(md`### Quiz #6\n> _Use scales to make you chart leaner and more colorful._\n\n> _**Extra challenge**: Right-align your chart._\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"quiz6 = withClone(quiz5, el => {\n // Write here\n return el\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"md`## 6. Shapes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"renderPath = (d, marginLeft=0, marginTop=0, fill='transparent') => {\n const el = html``\n d3.select(el).select('path')\n .attr('d', d)\n .attr('fill', fill)\n .attr('stroke', 'gray')\n .style('transform', `translate(${marginLeft}px, ${marginTop}px)`)\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"star = {\n const data = [\n {x: 5, y: 0},\n {x: 2, y: 8},\n {x: 10, y: 3},\n {x: 0, y: 3},\n {x: 8, y: 8},\n {x: 5, y: 0}\n ]\n const s = d3.scaleLinear()\n .domain([0, 10])\n .range([0, 200])\n const genPath = d3.line()\n .x(d => s(d.x))\n .y(d => s(d.y))\n return genPath(data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"renderPath(star)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"curve = {\n const data = [\n [0, 0],\n [1, 0],\n [1, 1],\n [2, 1],\n [2, 2],\n [3, 2],\n [3, 3]\n ]\n const x = d3.scaleLinear()\n .domain([0, 3])\n .range([0, 300])\n const y = d3.scaleLinear()\n .domain([0, 3])\n .range([0, 150])\n const genPath = d3.line()\n .x(d => x(d[0]))\n .y(d => y(d[1]))\n .curve(d3.curveCardinal)\n return genPath(data)\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"renderPath(curve, 0, 25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"md`_You can explore different curve types using the [curve explorer](http://bl.ocks.org/d3indepth/raw/b6d4845973089bc1012dec1674d3aff8/)._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"radialLine = {\n const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]\n const a = d3.scaleLinear()\n .domain(d3.extent(data))\n .range([0, 6 * Math.PI])\n const r = d3.scaleLinear()\n .domain(d3.extent(data))\n .range([0, 100])\n const pathGen = d3.radialLine()\n .angle(a)\n .radius(r)\n return pathGen(data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"renderPath(radialLine, 100, 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"area = {\n const data = [1, 3, 2, 5, 4]\n const x = d3.scaleLinear()\n .domain([0, data.length - 1])\n .range([0, 400])\n const y = d3.scaleLinear()\n .domain([0, 6])\n .range([200, 0])\n const pathGen = d3.area()\n .x((d, i) => x(i))\n .y1(y)\n .y0(y(0))\n return pathGen(data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"renderPath(area, 0, 0, 'rgba(0, 128, 255, 0.3)')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"areaRange = {\n const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]\n const x = d3.scaleLinear()\n .domain(d3.extent(data))\n .range([0, 400])\n const y = d3.scaleLinear()\n .domain([-1, 3])\n .range([200, 0])\n const pathGen = d3.area()\n .x(x)\n .y1(d => y(Math.sin(d)))\n .y0(d => y(Math.cos(d) + 2))\n .curve(d3.curveCardinal)\n return pathGen(data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"renderPath(areaRange, 0, 0, 'rgba(255, 128, 0, 0.3)')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"arc = {\n const el = html``\n const data = [[0, 0.2], [0.2, 0.5], [0.5, 1]]\n const genPath = d3.arc()\n .innerRadius(20)\n .outerRadius(100)\n .padAngle(0.05)\n .cornerRadius(3)\n .startAngle(d => d[0] * 2 * Math.PI)\n .endAngle(d => d[1] * 2 * Math.PI)\n d3.select(el)\n .selectAll('path')\n .data(data)\n .enter()\n .append('path')\n .attr('d', d => genPath(d))\n .attr('stroke', 'peru')\n .attr('fill', 'lemonchiffon')\n .style('transform', 'translate(100px, 100px)')\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1554,"value":"pie = {\n const el = html``\n const data = [1, 2, 3, 2, 1, 4]\n const pie = d3.pie()\n const angleData = pie(data)\n const genPath = d3.arc()\n .innerRadius(0)\n .outerRadius(100)\n \n const fill = d3.scaleOrdinal()\n .domain(angleData.map(d => d.index))\n .range(d3.schemePastel1)\n \n const svg = d3.select(el)\n svg.append('g')\n .style('transform', 'translate(100px, 100px)')\n .selectAll('path')\n .data(angleData)\n .enter()\n .append('path')\n .attr('d', genPath)\n .attr('fill', d => fill(d.index))\n \n svg.append('g')\n .style('transform', 'translate(100px, 100px)')\n .selectAll('text')\n .data(angleData)\n .enter()\n .append('text')\n .attr('font-family', 'Helvetica Neue, sans-serif')\n .attr('text-anchor', 'middle')\n .attr('transform', d => {\n const [x, y] = genPath.centroid(d)\n return `translate(${x}, ${y})`\n })\n .text(d => d.data)\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"projectCheckins = [\n\t{\"date\": \"2018-07-02\", \"bizdev\": 59.48, \"cultureandmanagement\": 48.22, \"opsandadmin\": 86.24},\n\t{\"date\": \"2018-07-09\", \"bizdev\": 46.78, \"cultureandmanagement\": 67.16, \"opsandadmin\": 70.06},\n\t{\"date\": \"2018-07-16\", \"bizdev\": 71.4\t, \"cultureandmanagement\": 66.68, \"opsandadmin\": 70.66},\n\t{\"date\": \"2018-07-23\", \"bizdev\": 49.33, \"cultureandmanagement\": 61.92, \"opsandadmin\": 91.66},\n\t{\"date\": \"2018-07-30\", \"bizdev\": 48.48, \"cultureandmanagement\": 41.92, \"opsandadmin\": 95.48}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"stackData = {\n const stack = d3.stack()\n .keys(['bizdev', 'cultureandmanagement', 'opsandadmin'])\n // .offset(d3.stackOffsetExpand)\n // .offset(d3.stackOffsetWiggle)\n return stack(projectCheckins)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"checkinsStack = {\n const el = html``\n const colors = d3.schemeYlGnBu[3]\n const b = d3.scaleBand()\n .domain(projectCheckins.map((d, i) => i))\n .range([0, 200])\n .paddingInner(0.25)\n const max = d3.max(stackData.map(d => d3.max(d, d2 => d2[1])))\n const w = d3.scaleLinear()\n .domain([0, max])\n .range([0, 400])\n \n const g = d3.select(el)\n .selectAll('g')\n .data(stackData)\n .enter()\n .append('g')\n .attr('fill', (d, i) => colors[i])\n \n g.selectAll('rect')\n .data(d => d)\n .enter()\n .append('rect')\n .attr('x', d => w(d[0]))\n .attr('y', (d, i) => b(i))\n .attr('width', d => w(d[1] - d[0]))\n .attr('height', b.bandwidth())\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"md`## 7. Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1703,"value":"axisBottom = {\n const width = 800\n const height = 400\n const padding = 50\n const data = [1, 4, 3.5, 2]\n const x = d3.scaleLinear()\n .domain([0, data.length - 1])\n .range([padding, width - padding])\n const y = d3.scaleLinear()\n .domain([0, 4])\n .range([height - padding, padding])\n const line = d3.line()\n .x((d, i) => x(i))\n .y(d => y(d))\n const el = html``\n const svg = d3.select(el)\n \n const xAxis = d3.axisBottom(x)\n .tickSizeOuter(0)\n .ticks(data.length)\n const yAxis = d3.axisLeft(y)\n .tickSizeOuter(0)\n \n const axes = svg.append('g')\n .attr('color', 'silver')\n \n axes.append('g')\n .style('transform', `translate(0, ${height - padding}px)`)\n .call(xAxis)\n axes.append('g')\n .style('transform', `translate(${padding}px, 0)`)\n .call(yAxis)\n\n svg.append('path')\n .attr('d', line(data))\n .attr('fill', 'transparent')\n .attr('stroke', '#333')\n \n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2090,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2139,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2262,"value":"instruct7 = quiz(md`### Quiz #6\n> _Using everything you've learned thur far, create a connected scatterplot using the \\`checkins\\` data given below. Each item of the dataset is a point with \\`users\\` as \\`x\\` and \\`avgHours\\` as \\`y\\`._\n\n> _You're given a base to work on which has the scales and axes set up. To finish the chart you need to:_\n- Turn the axis into a grid with muted colors\n- Add a baseline for \\`avgHours = 36\\`\n- Draw circles for each scatter plot point\n- Draw a smooth line connecting the scatterplot points\n- Label each point with the week number\n- Add tooltips for each point showing values of \\`users\\` and \\`avgHours\\`\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"md`## 8. Interactions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2292,"value":"hover = {\n const width = 400\n const height = 200\n const padding = 50\n const el = html``\n const data = [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5]\n const x = d3.scaleLinear()\n .domain(d3.extent(data))\n .range([padding, width - padding])\n const y = d3.scaleLinear()\n .domain(d3.extent(data, d => Math.pow(d, 2)))\n .range([height - padding, padding])\n d3.select(el).selectAll('circle')\n .data(data)\n .enter()\n .append('circle')\n .attr('cx', x)\n .attr('cy', d => y(Math.pow(d, 2)))\n .attr('r', 5)\n .on('mouseover', function (d) {\n d3.select(this)\n .attr('fill', 'red')\n .attr('r', 10)\n })\n .on('mouseout', function (d) {\n d3.select(this)\n .attr('fill', 'inherit')\n .attr('r', 5)\n })\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2310,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2343,"value":"bisect = {\n const width = 400\n const height = 200\n const padding = 50\n const el = html``\n const data = [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5]\n const x = d3.scaleLinear()\n .domain(d3.extent(data))\n .range([padding, width - padding])\n const y = d3.scaleLinear()\n .domain(d3.extent(data, d => Math.pow(d, 2)))\n .range([height - padding, padding])\n const svg = d3.select(el)\n const hoverline = svg.append('line')\n .attr('y1', 0)\n .attr('y2', height)\n .attr('stroke', 'silver')\n svg.on('mousemove', function () {\n const [mx, my] = d3.mouse(this)\n const i = d3.bisect(data, x.invert(mx))\n const d = data[i]\n hoverline\n .attr('x1', x(d))\n .attr('x2', x(d))\n })\n svg.selectAll('circle')\n .data(data)\n .enter()\n .append('circle')\n .attr('cx', x)\n .attr('cy', d => y(Math.pow(d, 2)))\n .attr('r', 5)\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1340,"value":"md`### Resources\n- https://github.com/d3/d3/wiki\n- http://d3indepth.com/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"withClone = (el, f) => {\n const clone = el.cloneNode(true)\n f(clone)\n return clone\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"quiz = el => {\n el.style.padding = '3em'\n el.style.background = `repeating-linear-gradient(\n -45deg,\n #ffc,\n #ffc 10px,\n #fec 10px,\n #fec 20px\n)`\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"