2c:null 2d:["$","title",null,{"children":"Data Visualization Workshop: Designing Data Visuals that Sparkle | David Tittsworth | Observable"}] 32:T589,{ const width = 300 const height = 200 const svg = d3.select(DOM.svg(width + 20, height + 20)) const x = d3.scaleLinear().domain([0, 10]).range([20, width ]) const xaxis = d3.axisBottom(x) .ticks(5) .tickFormat("") .tickSize(-height) const y = d3.scaleLinear().domain([0, 10]).range([height , 0]).nice() const yaxis = d3.axisLeft(y) .ticks(5) .tickFormat("") .tickSize(-width) svg.append("circle") .attr("r", 10) .attr("cx", 20) .attr("cy", 20) .attr("fill", " #ed1d48") svg.append("text") .attr("x", 25) .attr("y", 35) .attr("font-size", "large") .text("(0,0)") svg.append("circle") .attr("r", 10) .attr("cx", 300) .attr("cy", 20) .attr("fill", "#57c5c7") svg.append("text") .attr("x", 260) .attr("y", 35) .attr("font-size", "large") .text("(5,0)") svg.append("circle") .attr("r", 10) .attr("cx", 20) .attr("cy", 180) .attr("fill", "#57c5c7") svg.append("text") .attr("x", 25) .attr("y", 180) .attr("font-size", "large") .text("(0,4)") svg.append("g") .attr("class", "xaxis") .attr("transform", `translate(0, ${height + 20})`) .call(xaxis) svg.append("g") .attr("transform", `translate(20, 20)`) .call(yaxis) return svg.node() }33:T557,chart = { const [lineData, circleData] = estimateParkWait(daySelection, kingdomSelection) const theme = "dark" const themeColor = theme === "dark" ? "#212121" : "white" const textColor = theme === "dark" ? "white" : "black" if (objectiveSVG) { // Lets set a background on the svg, based on the theme selector objectiveSVG .style('font', '16px verdana, sans-serif') .style("background", themeColor) const xScale = createXScale_solution(lineData) const yScale = createYScale_solution(lineData) const color = createColorScale(lineData) // Since this can get called multiple times, lets clean up old svg elements // that aren't data bound objectiveSVG.selectAll('g.xaxis, g.yaxis, .chart-header').remove() // Add axes to chart addAxesToChart_solution(objectiveSVG, xScale, yScale, textColor) // Add the header to the chart addHeaderToChart(objectiveSVG, textColor) // Add/Update the optimized lines addLineDataToChart_Optimized_solution(objectiveSVG, lineData, xScale, yScale, color) // Add legend to chart const legendData = getLegendData(circleData, color) drawLegend(objectiveSVG, legendData, textColor) // Add/Update the optimized data beads addDataBeads_Optimized(objectiveSVG, circleData, xScale, yScale, color) } return objectiveSVG.node() }34:T6ca,{ const data = [ {name: "Amber", values: [ {rank: 1, char: "Minnie Mouse"}, {rank: 2, char: "Stitch"}, {rank: 3, char: "Pocahontas"}, ]}, {name: "David", values: [ {rank: 1, char: "Minnie Mouse"}, {rank: 2, char: "Stitch"} ]}, {name: "Kate", values: [ {rank: 1, char: "Minnie Mouse"}, {rank: 2, char: "Genie"}, {rank: 3, char: "Mushu"}, {rank: 4, char: "Stitch"} ]} ] const filter = data.filter((d) => d.name === FavPerson)[0] const values = filter.values const svg = favoriteListSVG const t = svg.transition().duration(750) svg.selectAll('.fav-list') .data(values, d => d.char) .join( enter => { // append new text element enter.append("text") .text((d, i)=> `${d.rank}. ${d.char}`) .attr("x", 0) .attr("class", "fav-list") .attr("y", (d,i)=> i * 80 + 100) .transition() .duration(1000) .attr("x", 50) .style('font', '30px verdana, sans-serif') .attr("fill", " #8cc63f") }, update => { // update to new location based on order in selected person's list update.transition() .duration(1000) .attr("x", 50) .attr("y", (d,i)=> i * 80 + 100) .text((d, i)=> `${d.rank}. ${d.char}`) .attr("fill", " #57c5c7") }, exit => { //remove items not in currently selected person's list exit.attr("fill", "#ed1d48") .transition() .duration(1500) .ease(d3.easePolyIn) .attr("x", dimensions.width * 2) .remove() } ) return svg.node() }35:T441,md`1. If the first person to declare their favorite Disney Characters is Amber, then all of Amber's data will go into the enter. This is because there is currently no DOM elements matching the incoming data. Nothing will go into exit because there is nothing to remove and no previous data to update.

2. If the next person is David, when \`.data\` compares the previous data (Amber) with the new data (David), it finds that both Minnie Mouse and Stitch exist in both. However David doesn't have Pocahantas on his list. Therefore, Minnie Mouse and Stitch go into the update, and Pocahantas goes into exit and is removed from the SVG. Nothing will go into enter.

3. If next person is Kate, when \`.data\` compares the previous data (David) with new data (Kate), it finds that Minnie Mouse and Stitch exist in both. However, Stitch is number 4 on Kate's list. So Minnie Mouse and Stitch will go into the update, and the update will move Stitch to it's new position of 4. Kate also had Genie and Mushu on her list, so these 2 characters will go into the enter state.`36:T58c,md` ~~~js const xMargin = 5 const yMargin = 10 const tileHeight = 20 const tileWidth = 20 const height = data.length * elementHeight + ((data.length + 1) * yMargin) const xOrigin = dimensions.width - 150 const yOrigin = 30 svgElement.selectAll(".legend").remove() // remove previous legend const legendGroup = svgElement.append("g") .attr("class", "legend") legendGroup // outer rect .append("rect") .attr("x", xOrigin) .attr("class", "legend") .attr("y", yOrigin) .attr("fill", "#aaa") .attr("width", 150) .attr("height", height) .attr("opacity", 0.3) legendGroup // color tiles .selectAll(".legend-tiles") .data(data) .join("rect") .attr("fill", d => d.color) .attr("x", (d, i) => xOrigin + xMargin) .attr("y", (d, i) => (tileHeight * i) + yOrigin + yMargin * (i + 1)) .attr("height", tileHeight) .attr("width", tileWidth) .attr("stroke", textColor) .append("title") // add title to hover over and see full name .text(d => d.name) legendGroup // legend text .selectAll(".legend-text") .data(data) .join("text") .text(d => d.name.length > 6 ? d.name.substring(0, 12) + "..." : d.name) // limit name size .attr("x", (d, i) => xOrigin + xMargin + tileWidth) .attr("y", (d, i) => (tileHeight * i) + yOrigin + yMargin * (i + 1) + tileHeight / 2) .attr("dx", 5) .attr("dy", 3) .attr("fill", textColor) .attr("font-size", "small") ~~~ `37:T92b,/** * Adds data beads to our svg (our chart) * * We pass in several things: * svg - Our chart svg * circleData - Our filtered data for the beads * xScale - The x scale for outputting the beads * yScale - The y scale for outputting the beads * color - The color scale for the beads */ // Completed implementation: No need to modify addDataBeads_Optimized = (svg, circleData, xScale, yScale, color) => { const tip = createToolTip(svg) svg.selectAll(".circle-data") .data(circleData, d => d.name) .join( enter => { enter.append("circle") // Start the beads off as invisible, // but position them correctly .attr("class", "circle-data") .attr("fill", d => color(d.name)) .attr("cx", (d) => xScale(d.date)) .attr("cy", (d, i) => yScale(d.value)) .attr("opacity", "0") .attr("r", d => d.value > 0 ? 5 : -1e9) .on("mouseover", function (d, n, i) { d3.select(this) .transition() .duration(300) .attr("r", d.value > 0 ? 10 : -1e9) tip.show(d, this) // SHOW TOOL TIP }) .on("mouseout", function (d, n, i) { d3.select(this) .transition() .duration(500) .attr("r", d => d.value > 0 ? 5 : -1e9) tip.hide() // HIDE TOOL TIP }) .style("cursor", "pointer") // Wait a little bit (300msec), then slowly make them visible .transition() .delay(300) .duration(800) .attr("opacity", 0.8) }, update => { update .on("mouseover", function (d, n, i) { d3.select(this) .transition() .duration(300) .attr("r", d.value > 0 ? 10 : -1e9) tip.show(d, this) }) .on("mouseout", function (d, n, i) { d3.select(this) .transition() .duration(500) .attr("r", d => d.value > 0 ? 5 : -1e9) tip.hide() }) .attr("cx", (d) => xScale(d.date)) .attr("cy", (d, i) => yScale(d.value)) .attr("opacity", 0.8) }, exit => { exit.remove() } ) }38:T78c,{ // ==== SVG Setup ==== const svgContainer = d3.select(DOM.svg(400, 200)) .attr("width", 400) .attr("height", 200) .style("border-color", "black") .style("border-style", "solid") .style("border-width", "1px"); // Draw the Rectangle svgContainer.append("rect") .attr("x", 50) .attr("y", 50) .attr("width", 50) .attr("height", 50) .attr('class', 'rect-selector') const rectangle = svgContainer.select(".rect-selector") const duration = durationSelection || 200 const delay = delaySelection || 0 // ==== SVG Setup End ==== // === Important Animation Part ==== // MOVE d3.select("#move").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("x", 250); // New Position }) // RESIZE d3.select("#resizeT").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("width", 100) // New Width .attr("height", 100); // New Height }) // OPACITY d3.select("#opacityT").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("opacity", 0.5) }); // OPACITY d3.select("#colorT").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("fill", "blue") }) // RESET d3.select("#reset").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("x", 50) // Old Position .attr("width", 50) .attr("height", 50) .attr("opacity", 1) .attr("fill", "black") }) return svgContainer.node() }39:T407,addLineDataToChart_Optimized = (svg, lineData, xScale, yScale, color) => { const line = d3.line() .defined(d => !isNaN(d)) .x((d, i) => xScale(lineData.dates[i])) .y(d => yScale(d)) // Fill in missing implementation based on table above // Hint: If you get stuck, the solution is below svg .selectAll(".path-data") .data(lineData.series, d => d.name) .join( enter => { enter // Everything before the transition // will occur IMMEDIATELY .append("path") .attr("fill", "none") .attr("stroke-width", 2) .attr("class", "path-data") .attr("opacity", 0) .attr("d", d => line(d.values)) .attr("stroke", d => color(d.name)) // Add the enter transition here }, update => { update // Add the update transition here }, exit => { exit .attr("opacity", 1) // Add the exit transition here .remove() } ) }3a:T554,{ const themeColor = theme === "dark" ? "#212121" : "white" const textColor = theme === "dark" ? "white" : "black" if (finalSVG) { // Lets set a background on the svg, based on the theme selector finalSVG .style('font', '16px verdana, sans-serif') .style("background", themeColor) const xScale = createXScale(lineData) const yScale = createYScale(lineData) const color = createColorScale(lineData) // Since this can get called multiple times, lets clean up old svg elements // that aren't data bound // Namely the axes and the header finalSVG.selectAll('g.xaxis, g.yaxis, .chart-header').remove() // Add axes to chart addAxesToChart(finalSVG, xScale, yScale, textColor) // Add the header to the chart addHeaderToChart(finalSVG, textColor) // Add Lines to chart -- without transitions addLineDataToChart(finalSVG, lineData, xScale, yScale, color) // Add/Update the optimized lines (comment out above and uncomment below) // addLineDataToChart_Optimized(finalSVG, lineData, xScale, yScale, color) // Add/Update the legend const legendData = getLegendData(circleData, color) drawLegend(finalSVG, legendData, textColor) // Add/Update the optimized data beads addDataBeads_Optimized(finalSVG, circleData, xScale, yScale, color) } }3b:T517,drawLegend = (svgElement, data, textColor) => { const xMargin = 5 const yMargin = 10 const elementHeight = 20 const height = data.length * elementHeight + ((data.length + 1) * yMargin) const xOrigin = dimensions.width - 175 const yOrigin = 30 const elementWidth = 20 svgElement.selectAll(".legend").remove() const legendGroup = svgElement.append("g").attr("class", "legend") legendGroup .append("rect") .attr("x", xOrigin) .attr("class", "legend") .attr("y", yOrigin) .attr("fill", "#aaa") .attr("width", 170) .attr("height", height) .attr("opacity", 0.3) legendGroup .selectAll(".legend-tiles") .data(data) .join("rect") .attr("fill", d => d.color) .attr("x", (d, i) => xOrigin + xMargin) .attr("y", (d, i) => (elementHeight * i) + yOrigin + yMargin * (i + 1)) .attr("height", elementHeight) .attr("width", elementWidth) .attr("stroke", textColor) .append("title") .text(d => d.name) legendGroup .selectAll(".legend-text") .data(data) .join("text") .text(d => d.name) .attr("x", (d, i) => xOrigin + xMargin + elementWidth) .attr("y", (d, i) => (elementHeight * i) + yOrigin + yMargin * (i + 1) + elementHeight / 2) .attr("dx", 5) .attr("dy", 3) .attr("fill", textColor) .attr("font-size", "small") return svgElement }3c:T52f,estimateParkWait = (day, kingdom) => { const datePicked = day const data = themeParkData const sample = data[0].data const circleData = [] const hoursInDay = d3.range(0, 23) const dates = hoursInDay.map((time)=>{ const date = new Date(datePicked) const hour = time date.setHours(hour) return date }) let dataToFilter = themeParkData if(kingdom !== "All Kingdoms") { dataToFilter = themeParkData.filter((d) => d.kingdom === kingdom) } const series = dataToFilter.map((rideData) => { const waitValues = rideData.data.filter(d => d.date === datePicked) const hoursInDay = d3.range(0, 23) let flatValues = [] const name = rideData["short_name"] const fullname = rideData.name const land = rideData.land Object.values(waitValues).forEach((day) => { const times = day.times const values = hoursInDay.map((time)=>{ const date = new Date(day.date) const hour = time date.setHours(hour) const value = times[time] || 0 circleData.push({date, name, value}) return value }) flatValues = [...flatValues, ...values] }) return { name, values: flatValues } }) const lineData = {dates, series} return [lineData, circleData] }3d:T50c,addLineDataToChart_Optimized_solution = (svg, lineData, xScale, yScale, color) => { const line = d3.line() .defined(d => !isNaN(d)) // For every row in the dataset // Set the x value of the line according to the x scale .x((d, i) => xScale(lineData.dates[i])) // For every row in the dataset // Set the y value of the line according to the y scale .y(d => yScale(d)) svg .selectAll(".path-data") .data(lineData.series, d => d.name) .join( enter => { enter // Everything before the .transition // will occur IMMEDIATELY .append("path") .attr("fill", "none") .attr("stroke-width", 2) .attr("class", "path-data") .attr("opacity", 0) .attr("d", d => line(d.values)) .attr("stroke", d => color(d.name)) .transition() .delay(300) .duration(500) .attr("opacity", 1) }, update => { update .transition() .duration(500) .attr("d", d => line(d.values)) }, exit => { exit .attr("opacity", 1) .transition() .duration(500) .attr("opacity", 0) .remove() } ) }3e:[] 30:{"id":"52c91f73a180c0b9","slug":"data-visualization-workshop-designing-data-visuals-that-s","title":"Data Visualization Workshop: Designing Data Visuals that Sparkle","thumbnail":"45e09a7c3a94aea0aa58f91c4edde5d23657e9f816fa7827e8a536a6bd1d64b2","access_level":"public","create_time":"$D2019-07-26T14:53:15.475Z","update_time":"$D2019-08-19T15:20:47.553Z","view_time":null,"first_public_time":"$D2019-08-01T16:22:35.632Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"4dfcd480bbd72886","login":"stopyoukid","name":"David Tittsworth","avatar_url":"https://avatars-next.observableusercontent.com/29f6d13ac12f218d62203a21bd2eb3181c5d317241a794d072af6e37779ad5ec","tier":"starter_2024"},"version":6388,"publish_version":6388,"role":null,"authored":false,"authors":[{"type":"individual","id":"47807972bdcd7e05","login":"stopyoukid","name":"David Tittsworth","avatar_url":"https://avatars-next.observableusercontent.com/29f6d13ac12f218d62203a21bd2eb3181c5d317241a794d072af6e37779ad5ec","tier":null}],"members":[{"type":"individual","id":"47807972bdcd7e05","login":"stopyoukid","name":"David Tittsworth","avatar_url":"https://avatars-next.observableusercontent.com/29f6d13ac12f218d62203a21bd2eb3181c5d317241a794d072af6e37779ad5ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Data Visualization Workshop: Designing Data Visuals that Sparkle","cells":[{"id":2511,"value":"md`# Data Visualization Workshop: Designing Data Visuals that Sparkle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2566,"value":"md`#### Adding some ✨_magic_✨ to your charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2518,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6342,"value":"\nhtml`${ isComplete() ? chart : ''}`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2274,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2528,"value":"md`# Table of Contents\n- [Introduction](#introduction)\n- [Objective: The Line Chart](#objective)\n- [Step 1. Understand the Data](#step1)\n- [Step 2: Create SVG](#step2)\n- [Step 3: Choose Scales](#step3)\n- [Step 4. Binding Data to DOM](#step4)\n- [Step 5. Sparkle ](#step5)\n- [Step 6. Bask in your Glory](#step6)\n- [More To Explore](explore)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2507,"value":"introduction = md`## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2533,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2556,"value":"md`**Process** : We will go over a quick intro to D3 and SVG basics and then jump into our objective, building a line chart. We will progressively build the chart, walking through the steps together. Each section has functions that you will need to fill in. These functions will be called together in our final svg to render our result. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2559,"value":"md`**Solutions**: Steps 2-4 have mini exercises. Solutions are below the exercises, open the panel by click on the dots on the left side.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2562,"value":"md`**Technology**: We will be using Observable Notebook. If you are familiar with Juypter notebooks, this is not the same. Some important notes:\n- Cells are separate scripts\n- Cells run in topological order\n- Cells re-run when any referenced cell changes\n- Cells implicitly await promises\n- Named cells are declarations, not assignments\n- Statements need curly braces, and return\n- Cells can be imported from other notebooks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"d3Intro = md`### Introduction To Data Driven Documents (D3)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"md`### Working with SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"md`Scalable Vector Graphics (SVG) uses XML like syntax and produces smoother lines than Raster graphics. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"md`**SVG Coordinate System**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"md`The origin of the SVG starts in the upper left hand corner.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1397,"value":"md`**Excercise** \n
We are going to create our first svg!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3995,"value":"md`We are going to use the syntax:\n~~~ js\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"{\n const height = 100\n const width = 100\n\n // define svg here\n \n // uncomment below to view result\n // return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"md`SVG has basic elements such as circles, lines, text. A full list of SVG primitive elements on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3743,"value":"md` example:\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3727,"value":"md`### Working With D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`The base object to work with is *d3*
\nD3 relies on method chaining. Example: \n~~~ js\nd3.select(\"body\") // Selects the body element\n .append(\"svg\") // Then appends an svg element to the body\n .attr(\"class\", \"my-svg\") // Then adds a class attribute to the svg element\n~~~\n*Remember javascript doesn't care about new lines.*\n
D3 uses on CSS Selectors to do DOM manipulations. In the above example, D3 is selecting the \"body\" element in the webpage, appends an \"svg\" element to it, and adds a \"class\" attribute to the svg.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3571,"value":"md`We use the \\`append\\` operator to add elements and then define attributes using \\`.attr()\\` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3574,"value":"md`Example\n~~~js\n svg.append(\"circle\")\n .attr(\"r\", 10)\n .attr(\"cx\", 5)\n .attr(\"cy\", 10)\n .attr(\"fill\", \"red\")\n .attr(\"class\", \"circle-class\")\n~~~\nWill produce an SVG circle element that looks like this:\n~~~html\n \n~~~\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"md`**Excercise** `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"md`\nImplement the \\`createCircle\\` function, when you are done it should output three circles like the example right below:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"createCircle = (svg, r, cx, cy, fill, id, cls) => {\n // ***IMPLEMENT Below***\n // This function will be called three times, once for each circle.\n // We need to *append* a circle to the *svg*\n // then for each parameter in the function, we need to set the appropriate *attr* on the circle\n // Hint: If you need help, the solution is below\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"solutionToggle('createCircle', (svg, r, cx, cy, fill, id, cls) => {\n svg.append('circle')\n .attr('r', r) // Set the \"r\" (the radius)\n .attr('cx', cx) // Set the \"cx\" (the center x of the circle)\n .attr('cy', cy) // Set the \"cy\" (the center y of the circle)\n .attr('fill', fill) // Set the \"fill\" (the fill color) of the circle\n .attr('id', id) // Set the \"id\" of the circle\n .attr('class', cls) // Set the \"class\" of the circle\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5757,"value":"md`#### Output`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5743,"value":"{\n const svg = d3.select(DOM.svg(width, 30))\n\n // This will create Circle 1\n createCircle(svg, 10, 20, 15, 'blue', 'circle-1', 'my-first-selection')\n \n // This will create Circle 2\n createCircle(svg, 10, 60, 15, 'red', 'circle-2', 'my-first-selection')\n \n // This will create Circle 3\n createCircle(svg, 10, 100, 15, 'green', 'circle-3', 'my-first-selection')\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"md`**D3 is not an SVG Rendering Engine!**
It is a tool to bind data to DOM`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3639,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3642,"value":"md`### Selections`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3637,"value":"md`Selections are fundamental to working with DOM elements. D3 has two operands that help us select elements based on CSS selectors like class, id, tag, or select via element like circle, rect, text, etc. Select will get the first element matching the criteria while selectAll will get all elements matching the criteria. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"{\n const svg = d3.select(createCircles())\n \n // See how we are using .select, which selects only the *first* matching element\n svg.select(\"circle\")\n // Uncomment the line below, run, see how it only affects the first circle\n // .style(\"fill\", \"orange\")\n \n // Notice that we are now using .selectAll, which selects *all* matching elements.\n svg.selectAll(\"circle\")\n // Uncomment the line below, run, see how it affects all the circles\n // .style(\"fill\", \"purple\")\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6143,"value":"md`*For more info on D3 and SVG basics, visit the notebook here: https://observablehq.com/@project-essex/introduction-to-d3-and-svg*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3645,"value":"md`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"objective = md`## Objective: The Line Chart

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"viewof daySelection = select({ title: 'Day', options: dateRange})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3231,"value":"viewof kingdomSelection = select({ title: 'kingdom', options: kingdoms, value: \"Magic Kingdom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"step1 = md`### Step 1. Understand the Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"md`The most important thing when creating an amazing visual is to understand the data and to some extent how the data was collected. This data was collected from the public data set on Disney wait times published by [Touring Plans](https://touringplans.com/walt-disney-world/crowd-calendar#DataSets)\n
The raw data used is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"themeParkData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3262,"value":"md`Each data object is a ride and has the property \\`data\\` which shows each wait time by day.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3663,"value":"md`You can check out the data transformation here: https://observablehq.com/@ahoak/theme-park-data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"md`Once you have decided on a type of data visual, Data Prep is the next step. D3 provides utilities to help. *Dont worry we did this step for you.* Check out \\`estimateParkWait()\\` (in Utils section) to see the code. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"md`*Remember: Sorting your data is always a good practice.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"md`Because we are plotting paths for lines, we need to structure our data so that we iterate over the \\` series \\` array and then generate a line with \\` values\\` as our y position and dates as our x position.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3774,"value":"md`*If you don't know how to format your data for a specific chart type, lookup example notebooks as reference.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4038,"value":"step2 = md`## Step 2: Create the SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"md`We are going to create the SVG for the chart. Below we are going to use the height and width in use d3.create() to create an svg and return the svg ( **not** svg.node())`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4042,"value":"createChartArea = () => {\n const height = dimensions.height\n const width = dimensions.width\n \n // Create the svg here\n\n \n // Hint: If you get stuck, the solution is below\n \n // dont forget to return your svg (uncomment below)\n // return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4897,"value":"solutionToggle('createChartArea', createChartArea_solution)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4901,"value":"md`### Output`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4912,"value":"tryShowChart(() => createChartArea(), 'Error Displaying SVG: Please fill in createChartArea above to proceed')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4919,"value":"md`Pretty boring huh? Don't worry, we'll fill it out as we go.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"step3 = md`## Step 3: Choose Scales

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2609,"value":"md`We need to take a step back and look about how define a scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"md`### **A scale is a function which recieves a series of input domain values and maps those to a range of output values**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3666,"value":"md`Lets go through an example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"md`### What are the scales involved in creating this chart?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"wineChart(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"md`So in our wine example: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"md`**wine type --> color hex value**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"wineColors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"md`**wine type --> bottle shape**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"wineList","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"md`**food category --> color hex value**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"foodCatDisplay","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1286,"value":"md`**pairing quality --> circle radius**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"{\n const svg = d3.select(DOM.svg(width, 100))\n svg.append(\"circle\")\n .attr(\"r\", 5)\n .attr(\"cx\", 20)\n .attr(\"cy\", 20)\n .attr(\"fill\", \"#57c5c7\")\n svg.append(\"text\")\n .text(\"standard pairing\")\n .attr(\"x\", 30)\n .attr(\"y\", 25)\n \n \n svg.append(\"circle\")\n .attr(\"r\", 10)\n .attr(\"cx\", 20)\n .attr(\"cy\", 60)\n .attr(\"fill\", \"#57c5c7\")\n \n svg.append(\"text\")\n .text(\"perfect pairing\")\n .attr(\"x\", 35)\n .attr(\"y\", 65)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3669,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"md`### D3 Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"md`D3 offers a bunch of different types of scales to work with. Common scales include **linear**, **time**, and **ordinal**. Scales can be used to map values to circle radii, map names to hex colors, map values to axes coordinates, etc.
When creating a scale you will be mapping you values (domain) over range (pixels). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"md`
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":" md`\n~~~js\nconst xscale = d3.scaleLinear().domain([0, 400]).range([25, 150])\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6126,"value":"md`**Play around with adjusting the domain and range max/min values to see how it affects the xAxis.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6091,"value":"viewof xDomainEnd = slider({\n min: 10, \n max: 400, \n step: 1, \n value: 10, \n title: \"Max xScale Domain (End)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6099,"value":"viewof xDomainStart = slider({\n min: 0, \n max: 200, \n step: 1, \n value: 0, \n title: \"Min xScale Domain (Start)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6110,"value":"viewof xRangeStart = slider({\n min: 0, \n max: width, \n step: 1, \n value: margin.left, \n title: \"Min xScale Range (Start)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6115,"value":"viewof xRangeEnd = slider({\n min: 0, \n max: width, \n step: 1, \n value: width - margin.right, \n title: \"Max xScale Range (End)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6119,"value":" md`\n~~~js\nconst xscale = d3.scaleLinear().domain([\\`${xDomainStart}\\`, \\`${xDomainEnd}\\`]).range([\\`${xRangeStart}\\`, \\`${xRangeEnd}\\`])\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6083,"value":"{\n const height = 400\n \n const svg = d3.create(\"svg\").attr(\"height\", height).attr(\"width\", dimensions.width)\n \n\n const yScale = d3.scaleLinear()\n .domain([0, d3.max(lineData.series, d => d3.max(d.values))])\n .range([height - margin.bottom, margin.top])\n \n const xScale = d3.scaleLinear()\n .domain([xDomainStart, xDomainEnd]) \n .range([xRangeStart, xRangeEnd]) // fill in with pixel values\n\n const yAxis = d3.axisLeft(yScale)\n \n \n const xAxis = d3.axisBottom(xScale)\n \n svg.append(\"g\")\n .attr(\"class\", \"xaxis\")\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .style(\"color\", \"black\")\n .call(xAxis) \n\n svg.append(\"g\")\n .attr(\"class\", \"yaxis\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(yAxis)\n \n return svg.node() \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3817,"value":"md`We can apply the same concept to a **time scale**. We use \\` scaleTime()\\` and map our min and max dates to a range (pixels)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3811,"value":" md`\n~~~js\nconst minData = new Date('10/1/2018')\nconst maxData = new Date('10/4/2018')\nconst xscale = d3.scaleTime().domain([minDate, maxDate]).range([25, 150])\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"md`## Apply Scales to our Line Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4115,"value":"md`### X Scale: Time Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4075,"value":"md`Using \\`lineData.dates\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4077,"value":"md `const dates = lineData.dates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4083,"value":"md`we want to create our xScale so that it displays dates horizontally at the bottom of our svg from the earliest date to the latest date.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4087,"value":"md`** Hint: The dates varible is sorted with earliest date at index 0 and latest date at index dates.length-1**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4097,"value":"md`When calculating the **range** we need to account for margin. We will want our range to start at **0 + margin.left**, and end at **width - margin.right** `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4098,"value":"md`\n~~~ js\nmargin = ${JSON.stringify(margin, null, 2)}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4992,"value":"md`\n~~~ js\ndimensions = ${JSON.stringify(dimensions, null, 2)}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4036,"value":"createXScale = (lineData /* We pass in lineData because it can change after filtering */) => {\n const dates = lineData.dates // dates are sorted\n const startDate = dates[0]\n const endDate = dates[dates.length-1]\n const height = dimensions.height\n const width = dimensions.width\n \n // Fill in domain and range \n const xScale = d3.scaleTime()\n .domain([]) // fill in using \"dates\" using startDate and endDate from above\n .range([]) // fill in with pixel values, make sure to account for margin (margin.left, margin.right)\n \n return xScale\n}\n// Hint: If you get stuck, the solution is below","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4106,"value":"solutionToggle('createXScale', createXScale_solution)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4118,"value":"md`### Y Scale: Linear Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4148,"value":"md`Using \\`lineData.series \\` :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4125,"value":"md`Yvalues = lineData.series`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4155,"value":"md`We want to create an y scale that maps our values within for each item in \\`YValues.values \\` to a vertical pixel space.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4158,"value":"md`To do this we need the max and min value for YValues, given here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4129,"value":"md`\n~~~js \nmaxY = d3.max(Yvalues, d => d3.max(d.values))\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4134,"value":"md`\n~~~js \nminY = 0\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4161,"value":"md`For the range, using our margin as before, we want our range to start at \\`height - margin.bottom\\` and go to \\`0 + margin.top\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4128,"value":"createYScale = (lineData /* We pass in lineData because it can change after filtering */) => {\n const yValues = lineData.series\n const maxY = d3.max(yValues, d => d3.max(d.values))\n const minY = 0\n const height = dimensions.height\n const width = dimensions.width\n \n // Fill in domain and range\n const yScale = d3.scaleLinear()\n .domain([]) // fill in based on minY and maxY\n .range([]) // fill in with pixel values fix!\n return yScale\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4170,"value":"solutionToggle('createYScale', createYScale_solution)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"md`### Alternative Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3803,"value":"md`Choosing the correct scale is critical to how the visual is percieved. A Nonlinear Scale maybe appropriate for your needs or may lead to misinterpretations of the data. Here is a [link](https://observablehq.com/@project-essex/alternative-scales) to a notebook to get an understanding on how scales affect users view on data and common mistakes. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"md`### Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"md`**Aim for simplicity of visualization. Keep perceptual limits of users in mind.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3676,"value":"md`Notice when we toggle our output line chart to view All Kingdoms, it is hard to determine which path depicts which ride.
*This is because humans can only distinguish between 10 different colors at once.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3821,"value":"md`In the Line chart we are using the Categorical Color Scale: \\`d3.schemeAccent\\` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"md`**Categorical Colors**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"{\n const color = d3.scaleOrdinal(d3.schemeAccent)\n let colorSwatch = []\n for(let i = 0; i < 8; i ++){\n colorSwatch.push(color(i))\n }\n return swatches(colorSwatch)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"{\n const color = d3.scaleOrdinal(d3.schemeCategory10)\n let colorSwatch = []\n for(let i = 0; i < 10; i ++){\n colorSwatch.push(color(i))\n }\n return swatches(colorSwatch)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":" md`\n~~~js\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n... color(i) // get color based on index\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"md`**Diverging**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"{\n const bars = d3.range(0, 100) // create data\n \n const colorScale = d3.scaleLinear().domain([0, bars.length]).range([0, 1])\n const xScale = d3.scaleLinear().domain([0, 100]).range([5, 405])\n const diverging = (d) => d3.interpolateRdYlBu(colorScale(d)) // map our data to colors\n \n const svg = d3.select(DOM.svg(400, 30))\n svg.selectAll('.diverging')\n .data(bars)\n .enter()\n .append('rect')\n .attr('x', (d) => xScale(d))\n .attr('y', 0)\n .attr('height', 20)\n .attr('width', 5)\n .attr('class', 'diverging')\n .attr('fill', (d) => diverging(d)) \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2596,"value":"md`**Sequential**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2592,"value":"{\n const bars = d3.range(0, 100) // create data\n \n const colorScale = d3.scaleLinear().domain([0, bars.length]).range([0, 1])\n const xScale = d3.scaleLinear().domain([0, 100]).range([5, 405])\n const diverging = (d) => d3.interpolateRdYlBu(colorScale(d)) // map our data to colors\n const sequential = (d) => d3.interpolatePurples(colorScale(d))\n \n const svg = d3.select(DOM.svg(400, 50))\n svg.selectAll('.diverging')\n .data(bars)\n .enter()\n .append('rect')\n .attr('x', (d) => xScale(d))\n .attr('y', 0)\n .attr('height', 20)\n .attr('width', 5)\n .attr('class', 'diverging')\n .attr('fill', (d) => sequential(d)) \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2599,"value":"md`**Cyclical**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2602,"value":"{\n const bars = d3.range(0, 100) // create data\n \n const colorScale = d3.scaleLinear().domain([0, bars.length]).range([0, 1])\n const xScale = d3.scaleLinear().domain([0, 100]).range([5, 405])\n const cyclical = (d) => d3.interpolateSinebow(colorScale(d))\n \n const svg = d3.select(DOM.svg(400, 50))\n svg.selectAll('.diverging')\n .data(bars)\n .enter()\n .append('rect')\n .attr('x', (d) => xScale(d))\n .attr('y', 0)\n .attr('height', 20)\n .attr('width', 5)\n .attr('class', 'diverging')\n .attr('fill', (d) => cyclical(d)) \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4318,"value":"md`Color Scale we will be using:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4315,"value":"createColorScale = (lineData) => {\n // color scale to map our rides to colors\n return d3.scaleOrdinal()\n .domain(lineData.series.map((d) => d.name)) // For each of our ride names\n .range(d3.schemeAccent) // Map them to a color\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3854,"value":"md`### Acessibility Concerns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3858,"value":"md`When choosing colors, try to choose color-blind friendly palletes.Using diverging color scales or two color scheme avoid using red and green`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3900,"value":"md`**Example labels**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3865,"value":"{\n return html`

${swatches([\"red\"])}

Label 1

${swatches([\"green\"])}

Label 2

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3877,"value":"md`Instead you could use:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3880,"value":"{\n return html`

${swatches([\"red\"])}

Label 1

${swatches([\"blue\"])}

Label 2

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3886,"value":"md`Or you can add dual encoding with something like size or symbol: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3891,"value":"{\n return html`

Label 1

${swatches([\"green\"])}

Label 2

✨

Label 1

${swatches([\"green\"])}

Label 2

\n\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3934,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3931,"value":"md`With scales defined, we can add corresponding axes to our svg container. \n\nAxes can be generated based on the scales in your visualization. Axes are defined based on their position using axis generator functions \\`d3.axisTop()\\`, \\`d3.axisBottom()\\`, \\`d3.axisRight()\\`, or \\`d3.axisLeft()\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4236,"value":"md`Choose the appropriate axis function for the xAxis and yAxis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4227,"value":"viewof xAxisSelection= select({ title: 'xAxis function', options: [\"axisTop()\", \"axisBottom()\", \"axisRight()\", \"axisLeft()\"] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4184,"value":"createXAxis = (xScale, type) => {\n type = type || xAxisSelection\n if(type === \"axisBottom()\") {\n return d3.axisBottom(xScale)\n } else if(type === \"axisTop()\") {\n return d3.axisTop(xScale)\n } else if(type === \"axisLeft()\") {\n return d3.axisLeft(xScale)\n } else if(type === \"axisRight()\") {\n return d3.axisRight(xScale)\n }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4242,"value":"solutionToggleText('xAxis', 'axisBottom()')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4247,"value":"viewof yAxisSelection= select({ title: 'yAxis function', options: [\"axisTop()\", \"axisBottom()\", \"axisRight()\", \"axisLeft()\"] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4181,"value":"createYAxis = (yScale, type) => {\n type = type || yAxisSelection\n if(type === \"axisBottom()\") {\n return d3.axisBottom(yScale)\n } else if(type === \"axisTop()\") {\n return d3.axisTop(yScale)\n } else if(type === \"axisLeft()\") {\n return d3.axisLeft(yScale)\n } else if(type === \"axisRight()\") {\n return d3.axisRight(yScale)\n }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4251,"value":"solutionToggleText('yAxis', 'axisLeft()')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6057,"value":"{\n const height = 400\n \n const svg = d3.create(\"svg\").attr(\"height\", height).attr(\"width\", dimensions.width)\n \n\n const yScale = d3.scaleLinear()\n .domain([0, d3.max(lineData.series, d => d3.max(d.values))])\n .range([height - margin.bottom, margin.top])\n \n const dates = lineData.dates\n const xScale = d3.scaleTime()\n .domain([dates[0], dates[dates.length -1]]) \n .range([margin.left, width - margin.right]) // fill in with pixel values\n\n const yAxis = createYAxis(yScale)\n \n \n const xAxis = createXAxis(xScale)\n \n svg.append(\"g\")\n .attr(\"class\", \"xaxis\")\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .style(\"color\", \"black\")\n .call(xAxis) \n\n svg.append(\"g\")\n .attr(\"class\", \"yaxis\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(yAxis)\n \n return svg.node() \n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4220,"value":"md`To create an axis, we must create or select the element in which we want to place it, then invoke the selection \\`call()\\` method to apply our axis generator function to it.\n~~~ js\nsvg.append(\"g\")\n .attr(\"class\", \"xaxis\")\n .attr(\"transform\", translate(0, dimensions.height - margin.bottom))\n .call(d3.axisBottom(xScale))\n\nsvg.append(\"g\")\n .attr(\"class\", \"yaxis\")\n .attr(\"transform\", translate(margin.left, 0))\n .call(d3.axisLeft(yScale))\n\n~~~\n\nSee the [d3 Axes page](https://github.com/d3/d3-axis) for more information.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5534,"value":"// Adds xAxis and yAxis to SVG\n// OOMPLETE SOLUTION: No need to modify\n\naddAxesToChart = (svg, xScale, yScale, textColor) => {\n\n // Create our basic x axis\n const xAxis = d3.axisBottom(xScale) \n // Create our basic y axis\n const yAxis = d3.axisLeft(yScale)\n\n // Create a container for the x axis\n svg.append(\"g\")\n .attr(\"class\", \"xaxis\")\n .attr(\"transform\", `translate(0, ${dimensions.height - margin.bottom})`)\n .style(\"color\", textColor || \"black\") // Lets make the color of the axis configurable\n .call(xAxis) // Now add the x axis to it\n\n // create a container for the y axis\n svg.append(\"g\")\n .attr(\"class\", \"yaxis\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .style(\"color\", textColor || \"black\") // Lets make the color of the axis configurable\n .call(yAxis) // Now add the y axis to it\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"/**\n * Creates a chart with both the axes\n */\ncreateChartWithAxes = (xScale, yScale) => {\n // Create the basic chart\n const svg = createChartArea()\n\n addAxesToChart(svg, xScale, yScale)\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4265,"value":"md`** Result: **`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5026,"value":"tryShowChart(() => {\n // Create the x scale we are going to use for our line data\n const xScale = createXScale(lineData)\n \n // Create the y scale we are going to use for our line data\n const yScale = createYScale(lineData)\n \n // Create the chart with the axes\n return createChartWithAxes(xScale, yScale)\n}, 'Error Displaying SVG: Please fill in createChartArea above to proceed')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3906,"value":"step4 = md`## Step 4. Binding Data to DOM Elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2461,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3293,"value":"md`How do we actually get our data into an element such as a circle or a line?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3296,"value":"md`We could do like what we did back in the intro, and create the circles explicitly:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3314,"value":"md`\n~~~js\n{\n const svg = d3.select(DOM.svg(width, 30))\n\n // This will create Circle 1\n createCircle(svg, 10, 20, 15, 'blue', 'circle-1', 'my-first-selection')\n \n // This will create Circle 2\n createCircle(svg, 10, 60, 15, 'red', 'circle-2', 'my-first-selection')\n \n // This will create Circle 3\n createCircle(svg, 10, 100, 15, 'green', 'circle-3', 'my-first-selection')\n \n return svg.node()\n}\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5776,"value":"md`What happens if we have 100s of circles...we could iterate through our dataset and create circles for each row:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5779,"value":"md`\n~~~js\n{\n const svg = d3.select(DOM.svg(width, 30))\n const dataset = getMyDataset()\n for (let i = 0; i < dataset.length; i++) {\n const row = dataset[i]\n createCircle(svg, ...)\n }\n return svg.node()\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5784,"value":"md`What if we need to dynamically add/remove/update more than one circle? **d3** has a solution for that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1659,"value":"md`**Objective: Using our data we want to plot a line on each date to the next date based on wait times** `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3937,"value":"md`\nData binding makes your elements aware of the data: you can pass this data in the form of an array, and \"bind\" your data to the DOM elements using methods like \\`d3.selectAll()\\`. This is what it looks like:\n\n~~~ js\nd3.selectAll('').data()\n~~~\n\nWhat's happening here?\n\n* \\`selectAll('')\\` selects all _DOM_ elements and their data bindings (if any) \n\n* \\`.data()\\` _binds_ the data to the elements selected (replacing old bindings if they exist) by performing the equivalent of a database 'join' on the selection above and the data given. The key used for the join, by default, is simply the index of each datum in the data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"md`After binding the data, DOM and data undergo 3 different states which we address in the General Update Pattern `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"md`### General Update Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"md`\nD3 has 3 updates states that allows us to efficently and beautifully transition and update the DOM as our data changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"md`**Enter State**: New data in the desired dataset (The set of data that do not have bound DOM elements)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"md`**Update State**: Data existing in both the current dataset and the new desired dataset (The set of DOM elements that already have data)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1753,"value":"md`**Exit State**: Data from the current dataset that is not in the desired dataset (The set of DOM elements that do not have data bound)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3954,"value":"md`How does D3 determine what nodes are in what state?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3957,"value":"md`When we use the \\`.data()\\` method we are passing in a the data as well as a key used to compare the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3963,"value":"md`We specify how to handle these different states within the \\`.join()\\` method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"md`### Example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"md`Here is a list of Favorite Disney Characters in order of preference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"md`| Rank | Amber | David | Kate|\n| ------------- |-------------|-------------|\n| 1 | Minnie Mouse | Minnie Mouse | Minnie Mouse |\n| 2 | Stitch | Stitch | Genie |\n| 3 | Pocahontas | | Mushu |\n| 4 | | | Stitch |\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1847,"value":"favoriteListSVG = d3.select(DOM.svg(dimensions.width, 400))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"{\n return html`

${swatches([\"#8cc63f\"])}

Enter State: New Data

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1895,"value":"{\n return html`

${swatches([\"#57c5c7\"])}

Update State: Existing in previous and current Data

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1906,"value":"{\n return html`

${swatches([\"#ed1d48\"])}

Remove State: Does not exist in current Data

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"viewof FavPerson = radio({\n title: 'Person Choice',\n options: [\n { label: \"Amber\", value: \"Amber\" },\n { label: \"David\", value: \"David\" },\n { label: \"Kate\", value: \"Kate\" },\n ],\n value: \"Amber\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3960,"value":"md`What's happening? We are using our \\` .data(values, d => d.char)\\`, meaning that in each new dataset, we are comparing the characters in our previous data to the characters in our new data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3969,"value":"md`Let's break down this example into steps:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3966,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4296,"value":"md`General Template to Data Binding: \n~~~ js\nconst myData = [{},{},{}...]\nsvg.selectAll(\".myClassname\")\n .data(myData, d => d.comparisonKey)\n .join(\n enter => { \n enter.append(\"svgElement\")\n .attr(\"class\", \"myClassname\") // important: add class\n .attr(\"x\", ...) // add positions and styles \n .attr(\"y\", ...)\n ...\n },\n update => {\n update.attr(\"x\", ...)\n .attr(\"y\", ...) // update position and styling for nodes that exist\n\n },\n exit => {\n exit.remove() // remove all elements not in new data\n }\n)\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1934,"value":"md`### Adding Data to our line chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1939,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4304,"value":"md`Using the template above fill in the missing information to create the \"line part in our line chart\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4309,"value":"md`We are going to pass \\`lineData.series\\` into the \\`.data\\` method and \\`d.name\\` as the comparison key. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1978,"value":"md`We are going to create the \"line\" part in our line chart! How do we do this?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4345,"value":"md`We are going to use the \\`d3.line()\\` helper function to help generate the path for us! Below is the implementation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4291,"value":"md`\n~~~js\nd3.line()\n .defined(d => !isNaN(d))\n\n // For every row in the dataset\n // Set the x value of the line according to the x scale\n .x((d, i) => xScale(lineData.dates[i]))\n\n // For every row in the dataset\n // Set the y value of the line according to the y scale\n .y(d => yScale(d))\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4348,"value":"md`Below fill in the the missing infomation to properly handle the data as it enters, updates, and exits. Add attrubtes (.attr) based on the following table:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4335,"value":"md`\n| Enter | Update | Exit |\n| :------------- | ---------- | -----------: |\n| .append('path') | .attr('d', function(d) { return line(d.values) }) | .remove() |\n| .attr('fill', 'none') | | |\n| .attr('class', 'path-data') | |\n| .attr('d', function(d) { return line(d.values) }) | |\n| .attr('stroke', function(d) { return color(d.name) } ) | | |\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5298,"value":"/**\n * This function will add line data to the chart\n * Fill in missing values for join\n */\naddLineDataToChart = (svg, lineData, xScale, yScale, color) => {\n \n const line = d3.line() // line generator helper function\n .defined(d => !isNaN(d))\n .x((d, i) => xScale(lineData.dates[i]))\n .y(d => yScale(d))\n \n svg\n .selectAll(\".path-data\") // Finding all elements with the class \"path-data\"\n .data(lineData.series, d => d.name) // Updating the dataset and comparing data based on \"name\" key\n\n // Finally, join, implement based on table above\n .join(\n enter => {\n // // Fill in the \"enter\" logic here\n },\n update => {\n // Fill in the \"update\" logic here\n \n },\n exit => {\n // Fill in the \"exit\" logic here\n\n }\n )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3406,"value":"solutionToggle('addLineDataToChart', (svg, lineData, xScale, yScale, color) => {\n const line = d3.line()\n .defined(d => !isNaN(d))\n \n // For every row in the dataset\n // Set the x value of the line according to the x scale\n .x((d, i) => xScale(lineData.dates[i]))\n \n // For every row in the dataset\n // Set the y value of the line according to the y scale\n .y(d => yScale(d))\n \n svg\n // Find all elements with the class \"path-data\"\n .selectAll(\".path-data\")\n\n // Update the dataset\n .data(lineData.series, d => d.name)\n\n // Finally, join\n .join(\n enter => {\n enter.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"class\", \"path-data\")\n .attr(\"d\", d => line(d.values))\n .attr(\"stroke\", d => color(d.name))\n },\n update => {\n update.attr(\"d\", d => line(d.values))\n },\n exit => {\n exit.remove()\n }\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4425,"value":"createChartWithLineData = (lineData) => {\n // Create the x scale we are going to use for our line data\n const xScale = createXScale(lineData)\n \n // Create the y scale we are going to use for our line data\n const yScale = createYScale(lineData)\n \n // Create the color scale we are going to use to color our line\n const color = createColorScale(lineData)\n \n // Create our chart with the axes already created\n const svg = createChartWithAxes(xScale, yScale)\n \n // Add the line data to our chart\n addLineDataToChart(svg, lineData, xScale, yScale, color)\n\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5115,"value":"tryShowChart(() => createChartWithLineData(lineData), 'Error Displaying SVG: Please fill in createChartArea above to proceed')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2003,"value":"step5 = html`

Step 5. Sparkle

✨\t

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2122,"value":"md`### Header`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2127,"value":"md`SVG text is a pain to work with. When possible, try to use html instead.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2154,"value":"md`There is nothing magic about a header. We want to add a title and subtitle header.

**Objective**
Create variable named header. header equals an svg group with the class \"chart-header\" and append text element. Then copy and paste the below code to create the text on header:\n\n~~~ js\n //header content, width = width\n svg.selectAll('.chart-header').remove()\n const header = svg.append(\"g\")\n .attr(\"class\", \"chart-header\")\n .attr(\"transform\", \\`translate(${dimensions.width / 3}, ${margin.top / 2})\\`)\n .append(\"text\")\n\n header\n .append(\"tspan\")\n .text(\"Disney World Wait Times\")\n .attr(\"font-size\", \"2em\")\n .attr(\"dx\", \"-0.9em\")\n\n header\n .append(\"tspan\")\n .text(\\`Comparison on ${dayFinalSelection} for ${kingdomFinalSelection}\\`)\n .attr(\"x\", 0)\n .attr(\"dy\", \"1.5em\")\n .attr(\"font-size\", \"0.8em\")\n .attr(\"fill\", \"#aaa\")\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4488,"value":"/**\n * Adds a header to our chart\n *\n * This function takes our current chart (svg), as well as the textColor we want to use for the header\n */\naddHeaderToChart = (svg, textColor) => {\n // === Completed implementation: No need to modify ===\n const header = svg.append(\"g\")\n .attr(\"class\", \"chart-header\")\n .attr(\"transform\", `translate(${dimensions.width / 3}, ${margin.top / 2})`)\n .append(\"text\")\n\n header\n .append(\"tspan\")\n .text(\"Disney World Wait Times\")\n .attr(\"font-size\", \"2em\")\n .attr(\"dx\", \"-0.9em\")\n .attr(\"fill\", textColor || \"black\" )\n\n header\n .append(\"tspan\")\n .text(`Comparison on ${dayFinalSelection} for ${kingdomFinalSelection}`)\n .attr(\"x\", 0)\n .attr(\"dy\", \"1.5em\")\n .attr(\"font-size\", \"0.8em\")\n .attr(\"fill\", \"#aaa\")\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4760,"value":"createChartWithHeader = (lineData, textColor) => {\n // Create our chart with the axes & line data already created\n const svg = createChartWithLineData(lineData)\n \n // Add the header to the chart\n addHeaderToChart(svg, textColor)\n\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4537,"value":"md`**Result**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4491,"value":"tryShowChart(() => createChartWithHeader(lineData), 'Error Displaying SVG: Please fill in the createChartArea function to proceed')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"md`### Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4597,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6024,"value":"md`The legend that we are creating is pretty simple: It consists of an outer rect and mutliple inner rect colored based on the color scale we created, and the corresponding text with name. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6027,"value":"md`We transform our data so that we have an array of objects in which each object contains a name and corresponding color.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2259,"value":"md`Using this legendData (as data), we use the function \\`drawLegend()\\`, implemented as:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3625,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6020,"value":"md`We have put that code in a little function. Just copy and paste the follow code to the below svg:\n~~~ js\n const legendData = getLegendData(circleData, color)\n drawLegend(svg, legendData, textColor)\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5427,"value":"createChartWithLegend = (lineData, circleData, textColor, color) => {\n const svg = createChartWithHeader(lineData, textColor) \n \n // Call Legend Function (No need to modify)\n const legendData = getLegendData(circleData, color)\n drawLegend(svg, legendData, textColor)\n\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4540,"value":"md`### Data Beads`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4543,"value":"md`We want to add circles to show the actual values versus the interpolated values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4546,"value":"md`To do this, we are going to transform our data so that we have an array containing a value, ride name, and date for each wait time value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4550,"value":"circleData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4554,"value":"md`Like our paths data, we need to bind our data and specify an enter, update, and exit state`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5313,"value":"// Completed solution: No need to modify\naddDataBeads = (svg, circleData, xScale, yScale, color) => {\n svg.selectAll(\".circle-data\")\n .data(circleData, d => d.name + d.date)\n .join(\n enter => {\n enter.append(\"circle\")\n .attr(\"class\", \"circle-data\")\n .attr(\"cx\", (d) => xScale(d.date))\n .attr(\"cy\", (d, i) => yScale(d.value))\n .attr(\"fill\", d => color(d.name))\n .attr(\"r\", d => d.value > 0 ? 5 : -1e9)\n .attr(\"opacity\", 0.8)\n .style(\"cursor\", \"pointer\")\n },\n update => {\n update.attr(\"cx\", (d) => xScale(d.date))\n .attr(\"cy\", (d, i) => yScale(d.value))\n .attr(\"opacity\", 0.8)\n },\n exit => {\n exit.remove() \n }\n ) \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4495,"value":"createChartWithDataBeads = (circleData, lineData) => {\n \n // Create the scales we are going to use for the data beads\n const xScale = createXScale(lineData)\n const yScale = createYScale(lineData)\n const color = createColorScale(lineData)\n\n // Create the base chart from a previous step,\n // which is a combination of the axes, lines, headers, and legend\n const svg = createChartWithLegend(lineData, circleData, \"black\", createColorScale(lineData))\n\n // Now we are going to add our data beads\n addDataBeads(svg, circleData, xScale, yScale, color)\n\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4519,"value":"tryShowChart(() => createChartWithDataBeads(circleData, lineData), 'Error Displaying SVG: Please fill in the createChartArea function')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4619,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2184,"value":"md`### Tool Tip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2252,"value":"md`Remember back when you were learning data joins? You already have the basic concepts to create a legend!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2190,"value":"md`Here we are using a satellite library from D3 called d3-tip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2193,"value":"md`\n~~~js\n svg.call(tip)\n ...\n tip.show(d, this) //shows tip\n tip.hide() //hides tip\n ~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4608,"value":"/**\n * Creates a tooltip that we can use with our data beads\n */\ncreateToolTip = (svg) => {\n const tip = d3Tip(svg)\n .attr(\"class\", \"d3-tip\")\n .style(\"color\", \"white\")\n .style(\"background-color\", \"black\")\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"4px\")\n .style(\"font-size\", \"12px\")\n .offset([-10, 0])\n .html(function (d) {\n return `${d.name}
${(d.value)} mins

`\n })\n svg.call(tip)\n return tip\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2215,"value":"md`We want to call \\`tip.show(d, this)\\` on \\`mouseover\\` for the circles, and \\`tip.hide()\\` for \\`mouseout\\` events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2227,"value":"md`*Optimization: animate circle radius on \\`mouseover\\` so that the click radius is larger*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5322,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5219,"value":"tryShowChart(() => {\n // Create the scales we are going to use for the data beads\n const xScale = createXScale(lineData)\n const yScale = createYScale(lineData)\n const color = createColorScale(lineData)\n \n // Create the base chart from a previous step,\n // which is a combination of the axes, lines, and headers\n const svg = createChartWithLegend(lineData, circleData, color)\n \n // Now we are going to add our *optimized* data beads\n addDataBeads_Optimized(svg, circleData, xScale, yScale, color)\n\n return svg\n}, 'Error Displaying SVG: Please fill in the createChartArea function')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":"md`### Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2044,"value":"html`\n

\n Move\n \n

\n Resize\n \n

\n Opacity\n \n

\n Color\n \n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"viewof durationSelection = number({placeholder: 800, title: \"transition duration\", step :100, min: 800, max: 2000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"viewof delaySelection = number({placeholder: 0, title: \"transition delay\", step :100, min: 0, max: 1000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2662,"value":"md`Use this data and modify \\`Enter\\` and \\`Update\\` states`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2042,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2099,"value":"md`We are going to update our line chart path so that is has the following transitions:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2102,"value":"md`| Enter | Update | Exit|\n| ------------- |-------------|-------------|\n| .transition()| .transition() | .transition() | \n| .attr('duration', 500) | .attr('duration', 500) | .attr('duration', 500) | \n| .attr('delay', 300)| | | \n| .attr('opacity', 1) | | .attr('opacity', 1) | \n| | .attr('d', function(d) { return line(d.values) } | |\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6041,"value":"md`Essentially we want our lines to fade in and out. We are doing this by transitioning our opacity from 0 to 1 on enter and 1 to 0 on exit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5679,"value":"md`Below is our \"optimized\" version of addLineDataToChart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5377,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5683,"value":"solutionToggle('addLineDataToChart_Optimized', addLineDataToChart_Optimized_solution)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2109,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2321,"value":"md`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2296,"value":"step6 = md`## Step 6. Bask in your Glory`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2340,"value":"md`### Yay! You made it to the end!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2343,"value":"md`If you wish to add more pizazz, think about using mouse events for interaction, hover over lines and change opacity, add interaction between several SVGs. The sky is the limit!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6271,"value":"{\n const container = document.createElement(\"container\")\n twttr.widgets.createShareButton(\n \"https://observablehq.com/@project-essex/data-visualization-workshop-designing-data-visuals-that-s\",\n container,\n {\n size: \"large\",\n text:\"Creating awesome charts using D3 Magic\",\n hashtags: \"ghc19, dataviz, magic\",\n related: \"twitterapi,twitter\"\n }\n )\n return container\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4065,"value":"lineData = estimateParkWait(dayFinalSelection, kingdomFinalSelection)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4070,"value":"circleData = estimateParkWait(dayFinalSelection, kingdomFinalSelection)[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5569,"value":"finalSVG = createChartArea()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3522,"value":"viewof dayFinalSelection = select({ title: 'Day', options: dateRange})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3535,"value":"viewof kingdomFinalSelection = select({ title: 'kingdom', options: kingdoms })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3548,"value":"viewof theme = checkbox({\n description: \"darkTheme\",\n options: [{ value: \"dark\", label: \"On\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5524,"value":"tryShowChart(() => finalSVG, 'Error Displaying SVG: Please fill in createChartArea above to proceed')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5519,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6383,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6371,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2348,"value":"explore = md`## More To Explore`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2362,"value":"md`Examples of data-visualizations using D3.js:\n
\n- [nfl-salaries-team-position](https://www.theguardian.com/sport/interactive/2013/jan/30/nfl-salaries-team-position#baltimore-ravens,san-francisco-49ers)\n- [among-the-oscar-contenders-a-host-of-connections](https://archive.nytimes.com/www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html)\n

\n[Workshop v1](https://observablehq.com/@ahoak/svg-primitives): More in depth view of concepts covered here.\n
\nFor other Tutorials: https://github.com/sgratzl/d3tutorial or look up specific examples on https://bl.ocks.org/mbostock`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2359,"value":"md`Check out these amazing Data Visualization Designers for inspiration `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2355,"value":"md`- [Shirley Wu](http://sxywu.com/)\n- [Nadieh Bremer](https://www.visualcinnamon.com/portfolio/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"md`## Imports

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"d3Tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4322,"value":"import {printTable} from '@uwdata/data-utilities' ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"import { wineChart, wineColors, wineList, foodCatDisplay} from '@ahoak/the-wine-folly-food-pairing-guide-as-_powered_-by-graphcms'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {select, radio, button, slider, number, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6282,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"d3Array = require(\"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6260,"value":"twttr = require(\"https://platform.twitter.com/widgets.js\").catch(() => window.twttr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"md`### Utils

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5896,"value":"objectiveSVG = createChartArea_solution()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3083,"value":"themeParkData = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-visualization-workshop/master/data/themePark/themePark.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5911,"value":"dimensions = ({height: 800, width: width})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5905,"value":"margin = ({top: 100, bottom: 100, left: 60, right: 200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3128,"value":"dateRange = {\n const range = []\n Object.values(themeParkData[0].data).forEach((d)=>{\n const date = d.date\n range.push(date)\n })\n return range\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3216,"value":"kingdoms = {\n const uniqueKingdoms = new Set([])\n themeParkData.forEach((ride) => {\n uniqueKingdoms.add(ride.kingdom) \n })\n uniqueKingdoms.add(\"All Kingdoms\")\n const kingdomSelection = Array.from(uniqueKingdoms)\n return kingdomSelection\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"getLegendData = (data, colorScale) => {\n const uniqueNames = data.reduce((acc, d) => {\n acc.add(d.name)\n return acc\n }, new Set([])) \n return Array.from(uniqueNames).map((name) => {\n return {name, color: colorScale(name)} \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5900,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3087,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2677,"value":"{\n function toggleElement(id, defaultStyle = 'block') {\n const ele = document.getElementById(id)\n if (ele) {\n ele.style.display = ele.style.display === 'none' ? defaultStyle : 'none'\n }\n }\n window.toggleElement = toggleElement\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2676,"value":"createCircles = (circleCreator, width = 400, height = 30) => {\n const svg = d3.select(DOM.svg(width, height))\n \n if (!circleCreator) {\n circleCreator = function(svg, r, cx, cy, fill, id, cls) {\n svg.append('circle')\n .attr('r', r) // Set the \"r\" (the radius)\n .attr('cx', cx) // Set the \"cx\" (the center x of the circle)\n .attr('cy', cy) // Set the \"cy\" (the center y of the circle)\n .attr('fill', fill) // Set the \"fill\" (the fill color) of the circle\n .attr('id', id) // Set the \"id\" of the circle\n .attr('class', cls) // Set the \"class\" of the circle\n }\n }\n \n // This will create Circle 1\n circleCreator(svg, 10, 20, 15, 'blue', 'circle-1', 'my-first-selection')\n \n // This will create Circle 2\n circleCreator(svg, 10, 60, 15, 'red', 'circle-2', 'my-first-selection')\n \n // This will create Circle 3\n circleCreator(svg, 10, 100, 15, 'green', 'circle-3', 'my-first-selection')\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5044,"value":"svg = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5075,"value":"createErrorSVG = (message) => {\n const svg = d3\n .create('svg')\n .attr('width', 500)\n .attr('height', 25)\n \n svg.append('text')\n .text(message)\n .attr('font-style', 'italic')\n .attr('x', 0)\n .attr('y', 20)\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5286,"value":"tryShowChart = (createChart, errorMessage) => {\n try {\n return createChart().node()\n } catch (e) {\n console.error(e)\n return createErrorSVG(errorMessage).node()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6361,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6358,"value":"isComplete = () => {\n try {\n createChartArea().node()\n return true\n } catch(e) {\n return false\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"function swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5626,"value":"solutionToggleText = (id, text) => {\n const code = \nmd`\n~~~ js\n${text}\n~~~\n`\n return (\nmd`\n\n\n`\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5597,"value":"solutionToggle = (id, solutionFn) => {\n return solutionToggleText(id, `${id} = ${solutionFn.toString()}`)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5846,"value":"md`## Solutions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5839,"value":"createChartArea_solution = () => {\n const height = dimensions.height\n const width = dimensions.width\n\n // Create the svg here\n\n // Hint: If you get stuck, the solution is below\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5835,"value":"createXScale_solution = (lineData) => { \n const dates = lineData.dates\n const xScale = d3.scaleTime()\n .domain([dates[0], dates[dates.length -1]])\n .range([0 + margin.left, dimensions.width - margin.right])\n \n return xScale\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5843,"value":"createYScale_solution = (lineData) => {\n const yValues = lineData.series\n const maxY = d3.max(yValues, d => d3.max(d.values))\n const minY = 0\n const yScale = d3.scaleLinear()\n .domain([minY, maxY]) // fill in based on Yvalues\n .range([dimensions.height - margin.bottom, margin.top]) // fill in with pixel values\n return yScale\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5852,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5874,"value":"addAxesToChart_solution = (svg, xScale, yScale, textColor) => {\n const xAxis = createXAxis(xScale, 'axisBottom()')\n const yAxis = createYAxis(yScale, 'axisLeft()')\n\n // Create a container for the x axis\n svg.append(\"g\")\n .attr(\"class\", \"xaxis\")\n .attr(\"transform\", `translate(0, ${dimensions.height - margin.bottom})`)\n .style(\"color\", textColor || \"black\")\n .call(xAxis) \n\n // create a container for the y axis\n svg.append(\"g\")\n .attr(\"class\", \"yaxis\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .style(\"color\", textColor || \"black\")\n .call(yAxis)\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 31:"$30:body"