31:Tede,md`### selectAll Explaining how "selection" works in D3.js is the most difficult part of this tutorial. Let me give a try! \`svg.selectAll('circle')\` is the function call to get all the "circles" in svg. Remember the pokeball at the very beginning of this notebook? There are two circles, one big and one small. If we call \`.selectAll('circle')\` on that pokeball svg, we will get these two circles, and then we can manipulate their attributes, like the center of the circle (cx, cy), radius (r), color, etc. Back to our example above, trying to draw 4 circles, we do: ## \`svg.selectAll('circle')\` - At the beginning, there are no "circles" in the svg, \`.selectAll('circle')\` returns __an empty set__. ## \`.data([10, 20, 30, 40])\` - While it is __an empty set__, we want this set to be a set with 4 circles, that is the function call \`.data([10, 20, 30, 40])\` telling the set "should" have 4 data points. We call it __data binding__, binding an array of data to a __selection set__, which in our case, initially empty and now has 4 data points. ## \`.enter()\` - When a selection set is transiting from one state to another, there are 3 possible transitions: - \`.enter()\`: having new data points - just like our case, from a set of 0 data points \`[]\` to 4 data points \`[10, 20, 30, 40]\` - the enter set will be \`[10, 20, 30, 40]\` - \`.exit()\`: removing some data points - like shrinking from \`[10, 20, 30, 40]\` to \`[10, 40]\` - the exit set will be \`[20, 30]\` - \`.update()\`: the value of the data points get updated - like from \`[10, 20, 30, 40]\` to \`[0, 15, 30, 40]\`, we have 2 data points get updated - the update set will be \`[10 -> 0, 20 -> 15]\` - The \.enter()\ function call is telling d3 to give us the enter set for subsequent operations, like the \`.append()\` function call follows it - \`.exit()\` and \`.update()\` are less frequently used in static plots, while we will revisit them again when talking about animations ## \`.append('circle')\` - For the enter set, we want to add a circle to the svg for each data point, one for 10, one for 20, one for 30 and one for 40 - The subsequent function calls \`.attr()\` and others are specifying the attributes of of the SVG element, like - \`.attr('cy', 20)\` specifies the y coordinate of the center as \`20\` - \`.attr('r', 10)\` specifies the radius as \`10\` - \`.attr('fill', 'SteelBlue')\` specifies the color as "SteelBlue" - You can find a full list of attributes for \`circle\` elements [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle), and all the other elements [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) ## \`.attr('cx', d => xScale(d))\` - We want the data value being reflected in the plot. That is, we want to have the circles spread across the x-axis according to their values. In visualization language, we call it __encoding__. - The \`.attr()\` function call takes a callback as its second argument. We pass the annonymous function \`d => xScale(d)\` to it, where \`d\` is the value of a single data point. - This annonymous function will be called 4 times: - first time with the value \`10\`, we return \`xScale(10)\`, and a circle is now showing up at the position computed by \`xScale(10)\` - second time with the value \`20\`, and we return xScale(20) - third with \`30\` - forth with \`40\` Finally, we see 4 circles drawn across the x-axis according to their values. Horray! If you are still confused, the following two blog posts are also about selection: - [How Selections Work](https://bost.ocks.org/mike/selection/) is written by Mike Bostock, the author of D3.js - [D3 in Depth](https://d3indepth.com/selections/) is another well written explanation `32:T581,/****************************************************************************** * TODO: * * Try to draw the 4 circles vertically with y-axis! * * Also try to change their color, radius, stroke-color, etc.! * ******************************************************************************/ { const height = 200 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain([0, 40]) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) // ----- The above are the same as plotting x-axis in the previous section ----- // Add circles to svg, more explanation in the cell below svg.selectAll('circle') .data([10, 20, 30, 40]) .enter() .append('circle') .attr('cy', d => yScale(d)) .attr('cx', margin.left + 20) .attr('r', 8) .attr('fill', 'orange') .attr('stroke', 'limegreen') return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/33:T6e3,/****************************************************************************** * TODO: * * Try to plot the pokemon dataset! * * Also try to encode with color, radius, stroke-color, etc.! * ******************************************************************************/ { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) .domain(d3.extent(pokemonBaseStats.map(d => d.attack))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain(d3.extent(pokemonBaseStats.map(d => d.defense))) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) const rScale = d3.scaleLinear().domain(d3.extent(pokemonBaseStats, ({hp}) => hp)).range([1, 5]); svg.selectAll('circle') .data(pokemonBaseStats) .enter() .append('circle') .attr('cx', d => xScale(d.attack)) .attr('cy', d => yScale(d.defense)) .attr('r', d => rScale(d.hp)) .attr('fill-opacity', 0.5) .attr('stroke', '#6666') .attr('fill', d => d.is_legendary ? 'red' : 'SteelBlue') return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/34:T55a,{ const height = 200 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) .domain(d3.extent(exponentialData.map(d => d.x))) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain(d3.extent(exponentialData.map(d => d.y))) // Line generator, scaling x and y to fill the width and height const line = d3.line() .x(d => xScale(d.x)) .y(d => yScale(d.y)) svg.selectAll('path') // .data() expects an array of multiple series, each series with multiple data points // We have only one line to plot, so we pass in an array with only one series, and this // series has many data points in it .data([exponentialData]) .enter() .append('path') // Reminded that d is a series of data points, that is, an array of values // And the line function call takes in this array of data points .attr('d', d => line(d)) // Remove the default value of color fill, try to comment out this line and see what happens .attr('fill', 'none') // The default of stroke is none, while we disabled the color fill, we make the line visible // by setting the stroke color .attr('stroke', 'SteelBlue') return svg.node() }35:T4cd,// This is rather very similar to the line chart with logarithmicData // Only changed 3 lines of code, and substituted the dataset { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } // Use d3.scaleTime() instead of d3.scaleLinear() for datetime const xScale = d3.scaleTime() .range([margin.left, width - margin.right]) // Substitute dataset .domain(d3.extent(HKDailyTemperature.map(d => d.date))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Substitute dataset .domain(d3.extent(HKDailyTemperature.map(d => d.mean))) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) const line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.mean)) svg.append('g') .selectAll('path') // Substitute dataset .data([HKDailyTemperature]) .enter() .append('path') .attr('d', d => line(d)) .attr('fill', 'none') .attr('stroke', 'SteelBlue') return svg.node() }36:T67c,/****************************************************************************** * TODO: * * Try to plot the HKDailyTemperature dataset with max instead of mean! * ******************************************************************************/ { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } // Use d3.scaleTime() instead of d3.scaleLinear() for datetime const xScale = d3.scaleTime() .range([margin.left, width - margin.right]) // Substitute dataset .domain(d3.extent(HKDailyTemperature.map(d => d.date))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Substitute dataset .domain(d3.extent(HKDailyTemperature.map(d => d.max))) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) const line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.max)) svg.append('g') .selectAll('path') // Substitute dataset .data([HKDailyTemperature]) .enter() .append('path') .attr('d', d => line(d)) .attr('fill', 'none') .attr('stroke', '#B794F4aa') return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/37:T5df,{ const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const xScale = d3.scaleTime() .range([margin.left, width - margin.right]) .domain(d3.extent(HKMonthlyTemperature.map(d => d.month))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Find the domain of temperature value .domain(d3.extent(_.flatMap(HKMonthlyTemperature, d => [d.min, d.max]))) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) const categories = ['min', 'max', 'mean'] // Use categorical color scheme to encode different lines const colorScale = d3.scaleOrdinal(d3.schemeAccent) .domain(categories) const line = d3.line() // Use i to retrieve the month value .x((d, i) => xScale(HKMonthlyTemperature[i].month)) .y(d => yScale(d)) svg.append('g') .selectAll('path') // Two series of data instead of one .data([ _.map(HKMonthlyTemperature, 'min'), _.map(HKMonthlyTemperature, 'mean'), _.map(HKMonthlyTemperature, 'max') ]) .enter() .append('path') .attr('d', d => line(d)) .attr('fill', 'none') // Color encodes the category of the line (min, mean or max) .attr('stroke', (d, i) => colorScale(categories[i])) return svg.node() }38:T858,/****************************************************************************** * TODO: * * Try to plot the HKDailyTemperature dataset with 3 lines (min/max/mean)! * * Notice: If you see a chart full of cluttering, don't worry, it is expected * ******************************************************************************/ { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const xScale = d3.scaleTime() .range([margin.left, width - margin.right]) .domain(d3.extent(HKDailyTemperature.map(d => d.date))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Find the domain of temperature value .domain(d3.extent(_.flatMap(HKMonthlyTemperature, d => [d.min, d.max]))) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) const categories = ['min', 'max', 'mean'] // Use categorical color scheme to encode different lines const colorScale = d3.scaleOrdinal(d3.schemeAccent) .domain(categories) const line = d3.line() // Use i to retrieve the month value .x((d, i) => xScale(HKDailyTemperature[i].date)) .y(d => yScale(d)) svg.append('g') .selectAll('path') // Two series of data instead of one .data([ _.map(HKDailyTemperature, 'min'), _.map(HKDailyTemperature, 'mean'), _.map(HKDailyTemperature, 'max') ]) .enter() .append('path') .attr('d', d => line(d)) .attr('fill', 'none') // Color encodes the category of the line (min, mean or max) .attr('stroke', (d, i) => colorScale(categories[i])) return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/39:T5da,{ const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 30, right: 10, bottom: 20 } const dimensions = ['hp', 'attack', 'sp_attack', 'defense', 'sp_defense', 'speed'] const data = pokemonBaseStats.map(d => dimensions.map(dimension => d[dimension])) // Use scalePoint because x-axis domain is discrete const xScale = d3.scalePoint() .range([margin.left, width - margin.right]) .domain(dimensions) // Plot x-axis at the top, remove the line stroke svg.append('g') .call(d3.axisTop(xScale)) .attr('transform', `translate(0,${margin.top})`) .selectAll('path') .attr('stroke', 'none') // Make one y-scale for each dimension const yScales = dimensions.map(dimension => d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain(d3.extent(pokemonBaseStats.map(d => d[dimension]))) ) // Plot axes for each dimension dimensions.forEach((dimension, i) => { svg.append('g') .call(d3.axisLeft(yScales[i])) .attr('transform', `translate(${xScale(dimension)},0)`) }) // Line generator, carefully handle each dimension const line = d3.line() .x((d, i) => xScale(dimensions[i])) .y((d, i) => yScales[i](d)) // Just like a line chart! svg.append('g') .selectAll('path') .data(data) .enter() .append('path') .attr('d', d => line(d)) .attr('fill', 'none') .attr('stroke', 'SteelBlue') return svg.node() }3a:T85f,/****************************************************************************** * TODO: * * Try to rearrange the order of the y-axes! i.e. chaing the order of the * * dimensions array, like [attack, defense, sp_attack, sp_defense, hp, speed] * ******************************************************************************/ { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 30, right: 10, bottom: 20 } const dimensions = ['speed', 'hp', 'attack', 'defense','sp_attack', 'sp_defense'] const data = pokemonBaseStats.map(d => dimensions.map(dimension => d[dimension])) // Use scalePoint because x-axis domain is discrete const xScale = d3.scalePoint() .range([margin.left, width - margin.right]) .domain(dimensions) // Plot x-axis at the top, remove the line stroke svg.append('g') .call(d3.axisTop(xScale)) .attr('transform', `translate(0,${margin.top})`) .selectAll('path') .attr('stroke', 'none') // Make one y-scale for each dimension const yScales = dimensions.map(dimension => d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain(d3.extent(pokemonBaseStats.map(d => d[dimension]))) ) // Plot axes for each dimension dimensions.forEach((dimension, i) => { svg.append('g') .call(d3.axisLeft(yScales[i])) .attr('transform', `translate(${xScale(dimension)},0)`) }) // Line generator, carefully handle each dimension const line = d3.line() .x((d, i) => xScale(dimensions[i])) .y((d, i) => yScales[i](d)) // Just like a line chart! svg.append('g') .selectAll('path') .data(data) .enter() .append('path') .attr('d', d => line(d)) .attr('fill', 'none') .attr('stroke', 'SteelBlue') return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/3b:Tbd1,{ // Radius of radar chart const r = 200 const margin = { left: 30, top: 30, right: 30, bottom: 30 } // Need to handle the view box carefully, to ensure the plot is centered, surrounded by margins const svg = d3.select(DOM.svg(r * 2, r * 2)) .attr('viewBox', `-${margin.left}, -${margin.top}, ${r * 2 + margin.left + margin.right}, ${r * 2 + margin.bottom + margin.top}`) const dimensions = ['hp', 'attack', 'sp_attack', 'defense', 'sp_defense', 'speed'] // Line generator for radial lines const radialLine = d3.lineRadial() // Radar chart is a circle, the length of each axis is the radius of the circle // Mapping 0 - 255 to 0 - r const yScale = d3.scaleLinear() .range([0, r]) .domain([0, 255]) // The default tick marks is not ideal, override it with a customized one const ticks = [50, 100, 150, 200, 255] // One axis for each dimension dimensions.forEach((dimension, i) => { // We first build an axis at the origin, enclosed inside an "g" element // then transform it to the right position and right orientation const g = svg.append('g') .attr('transform', `translate(${r}, ${r}) rotate(${i * 60})`) // Combining a left oriented axis with a right oriented axis // to make an axis with tick marks on both side // Reminded that, these are "g" elements inside the outer "g" element // and will be transformed to the right position with its parent element g.append('g') .call(d3.axisLeft(yScale).tickFormat('').tickValues(ticks)) g.append('g') .call(d3.axisRight(yScale).tickFormat('').tickValues(ticks)) // Add a text label for each axis, put it at the edge // Again, this "text" element is inside the outer "g" element, // and will be transformed to the right position with its parent element g.append('text') .text(dimension) .attr('text-anchor', 'middle') .attr('transform', `translate(0, -${r + 10})`) }) // Line for the base stats of Snorlax svg.append('g') .selectAll('path') .data([pokemonBaseStats[142]]) .enter() .append('path') .attr('d', d => radialLine([ d.hp, d.attack, d.sp_attack, d.defense, d.sp_defense, d.speed, d.hp // hp again to close the loop ].map((v, i) => [Math.PI * 2 * i / 6 /* radian */, yScale(v) /* distance from the origin */])) ) // Move to the center .attr('transform', `translate(${r}, ${r})`) .attr('stroke', 'SteelBlue') .attr('stroke-width', 5) .attr('fill', 'rgba(70, 130, 180, 0.3)') // Gird lines for references svg.append('g') .selectAll('path') .data(ticks) .enter() .append('path') .attr('d', d => radialLine(_.range(7).map((v, i) => [Math.PI * 2 * i / 6, yScale(d)]))) .attr('transform', `translate(${r}, ${r})`) .attr('stroke', 'grey') .attr('opacity', 0.5) .attr('fill', 'none') return svg.node() }3c:Tee9,/****************************************************************************** * TODO: * * Try to plot a radar chart for your favorite Pokemon! * ******************************************************************************/ { // Radius of radar chart const r = 200 const margin = { left: 30, top: 30, right: 30, bottom: 30 } // Need to handle the view box carefully, to ensure the plot is centered, surrounded by margins const div = DOM.element("div"); const svg = d3.select(DOM.svg(r * 2, r * 2)) .attr('viewBox', `-${margin.left}, -${margin.top}, ${r * 2 + margin.left + margin.right}, ${r * 2 + margin.bottom + margin.top}`) const dimensions = ['hp', 'attack', 'sp_attack', 'defense', 'sp_defense', 'speed'] // Line generator for radial lines const radialLine = d3.lineRadial() // Radar chart is a circle, the length of each axis is the radius of the circle // Mapping 0 - 255 to 0 - r const yScale = d3.scaleLinear() .range([0, r]) .domain([0, 255]) // The default tick marks is not ideal, override it with a customized one const ticks = [50, 100, 150, 200, 255] // One axis for each dimension dimensions.forEach((dimension, i) => { // We first build an axis at the origin, enclosed inside an "g" element // then transform it to the right position and right orientation const g = svg.append('g') .attr('transform', `translate(${r}, ${r}) rotate(${i * 60})`) // Combining a left oriented axis with a right oriented axis // to make an axis with tick marks on both side // Reminded that, these are "g" elements inside the outer "g" element // and will be transformed to the right position with its parent element g.append('g') .call(d3.axisLeft(yScale).tickFormat('').tickValues(ticks)) g.append('g') .call(d3.axisRight(yScale).tickFormat('').tickValues(ticks)) // Add a text label for each axis, put it at the edge // Again, this "text" element is inside the outer "g" element, // and will be transformed to the right position with its parent element g.append('text') .text(dimension) .attr('text-anchor', 'middle') .attr('transform', `translate(0, -${r + 10})`) }) // Line for the base stats of Garbodor svg.append('g') .selectAll('path') .data([pokemonBaseStats[568]]) .enter() .append('path') .attr('d', d => radialLine([ d.hp, d.attack, d.sp_attack, d.defense, d.sp_defense, d.speed, d.hp // hp again to close the loop ].map((v, i) => [Math.PI * 2 * i / 6 /* radian */, yScale(v) /* distance from the origin */])) ) // Move to the center .attr('transform', `translate(${r}, ${r})`) .attr('stroke', 'SteelBlue') .attr('stroke-width', 5) .attr('fill', 'rgba(70, 130, 180, 0.3)') // Gird lines for references svg.append('g') .selectAll('path') .data(ticks) .enter() .append('path') .attr('d', d => radialLine(_.range(7).map((v, i) => [Math.PI * 2 * i / 6, yScale(d)]))) .attr('transform', `translate(${r}, ${r})`) .attr('stroke', 'grey') .attr('opacity', 0.5) .attr('fill', 'none') div.innerHTML = `

` div.appendChild(svg.node()); return div; } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/3d:T67a,// Warning: The following plot is rather computation intensive, comment it out if you experience lagging. // chart = { // const r = 30 // const height = 600 // const svg = d3.select(DOM.svg(width, height)) // const margin = { left: 30, top: 10, right: 10, bottom: 20 } // const xScale = d3.scaleLinear() // .range([margin.left + r, width - margin.right - r]) // .domain(d3.extent(pokemonBaseStats.map(d => d.x))) // const yScale = d3.scaleLinear() // .range([height - margin.bottom - r, margin.top + r]) // .domain(d3.extent(pokemonBaseStats.map(d => d.y))) // const radialLine = d3.lineRadial() // const radialScale = d3.scaleLinear() // .range([0, r]) // .domain([0, 255]) // svg.selectAll('circle') // .data(pokemonBaseStats) // .enter() // // For each Pokemon // .each(function (d) { // d3.select(this) // .append('g') // .selectAll('path') // .data([d]) // .enter() // .append('path') // .attr('d', d => radialLine([ // d.hp, // d.attack, // d.sp_attack, // d.defense, // d.sp_defense, // d.speed, // d.hp // ].map((v, i) => [Math.PI * i / 3, radialScale(v)])) ) // .attr('transform', `translate(${xScale(d.x)}, ${yScale(d.y)})`) // .attr('stroke', 'black') // .attr('stroke-width', d => d.is_legendary ? 3 : 2) // .attr('fill', d => d.is_legendary ? 'DarkGoldenRod' : 'Crimson') // .attr('opacity', 0.4) // }) // return svg.node() // }3e:[] 2f:{"title":"CS 529 VDS Tutorial: Observable and D3.js","cells":[{"id":0,"value":"md`# CS 529 VDS Tutorial: Observable and D3.js\n\nIn the previous notebook, we have explored Observable.\n\nIn this tutorial, we will look into the library behind Vega-Lite, that is D3.js, and we will also revisit HTML5 SVG (Scalable Vector Graphics), which is the core technology that D3.js relies on.\n\nAll the original materials of this tutorial are hosted on [this GitHub repository](https://github.com/leoyuholo/learning-vis-tools/tree/master/tutorial08)\n\n__Notice: Comment out the last chart of this notebook if you experience lagging. That chart is computationally intensive.__\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Why D3.js?\n\nBefore picking D3.js as your visualization tool, you need to ask why do you need D3.js?\n\nIf you are exploring a dataset, D3.js will not be a good choice. It requires quite some effort to make a visualization with D3.js. You are better using Python with Altair on Jupyter notebook, or Tableau if it is available to you.\n\nIf you want to embed visualizations in a web application, Vega-Lite is the best choice.\n\nCompare to the other tools, D3.js provides the flexibility if we needed. But it comes with a cost, you will need to write much more code, requires much more thinking and much easier to make mistakes that violate visualization principals.\n\nBefore commiting to visualize with D3.js, take a look into the [Vega-Lite Gallery](https://vega.github.io/vega-lite/examples/) and [Vega Gallery](https://vega.github.io/vega/examples/) to search if the plot you want is already there, it will save you a lot of time and effort.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`## SVG\n\nD3.js is built on SVG (Scalable Vector Graphics), and SVG is an extension of HTML, which means SVG is written in XML format and it can be manipulated through DOM, just like the other elements on the web page.\n\nLet's see how it looks like!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"// Draw a Pokeball with SVG! Writing SVG code is exacly like writing HTML code\n\nhtml`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`## D3.js Scale\n\nIn the Pokeball example, you can see that the values like \\`cx\\` and \\`cy\\` are hard coded and computed beforehand. It is a mundane task and inflexible to changes.\n\nD3.js provides a set of functions to generate such values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"// Linear scale, mapping 0 - 40 to 0 - 100\n\nlinearScale = d3.scaleLinear()\n .range([0, 100])\n .domain([0, 40])","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"[10, 20, 30, 40].map(n => linearScale(n))","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"/******************************************************************************\n * TODO: *\n * Try to make a scale that maps 0 - 12 to 0 - 720! e.g. 1.5 -> 90 *\n ******************************************************************************/\n\nmyLinearScale = d3.scaleLinear().domain([0, 12]).range([0, 720])\n\n/******************************************************************************\n * END OF YOUR CODE * \n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1748,"value":"myLinearScale(1.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"// We also use scale when encoding values with color\n// Remember that color scale can be diverging, sequential and categorical\n// the following demonstrate how to build a sequential color scale\n\ncolorScale = d3.scaleLinear()\n .interpolate(() => d3.interpolateOranges)\n .domain([0, 40])","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"[10, 20, 30, 40].map(n => colorScale(n))","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"legend(colorScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1285,"value":"/******************************************************************************\n * TODO: *\n * Try to make a diverging color scale with \"d3.interpolateRdYlBu\" color *\n * scheme with domain [0, 100]! *\n ******************************************************************************/\n\nmyColorScale = d3.scaleLinear().interpolate(() => d3.interpolateRdYlBu).domain([0, 100])\n\n/******************************************************************************\n * END OF YOUR CODE * \n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1295,"value":"md`A full list of color schemes can be found in the [documentation](https://github.com/d3/d3-scale-chromatic)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`## Coordinate System\n\nPosition encoding is the most effective channel of a visualization. When the data values are converted to the 2D coordinates of the screen, axes are crucial in order to decode the position of a mark back to its data value.\n\nThere are serveral coordinate systems; the most common are: X and Y Cartesian coordinate system, angular distance polar coordinate system, and also geographic projections of Earth systems.\n\nWe first look into the most common Cartesian coordinate system, then later in this tutorial, we will make a radar chart using polar coordinates, and in the next tutorial, we will plot geographic data on maps.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`### X-axis\n\nThe basic, horizontal axis, from left (smaller values) to right (larger values).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"// Width of available space of an output cell on Observable notebook\n// We use it as the maximum width of our drawing \"canvas\", it is a global\n// variable, declared and set by Observable notebook\n\nwidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"{\n // While width is given, we need to define the height of our drawing \"canvas\"\n const height = 60\n // Define our svg\n const svg = d3.select(DOM.svg(width, height))\n \n // Make some empty space around\n // Try to set the margins to zeros and see what happens!\n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \n const xScale = d3.scaleLinear()\n // Instead of mapping (0 - 40) to (0 - 100), we map (0 - 40) to (30 - 945) to fill the width\n .range([margin.left, width - margin.right])\n .domain([0, 40])\n \n // Append it to svg\n svg.append('g').call(d3.axisBottom(xScale))\n \n // Return it, and Observable will show it as output\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`### Y-axis\n\nRecall that the screen coordinates go from top to bottom. Which means that \\`(0, 0)\\` is at the top left corner, \\`(0, height)\\` is at the bottom left corner, and \\`(width, height)\\` is at the bottom right corner.\n\nBecause our normal perception of a plot drawn in Cartesian coordinate is having \\`(0, 0)\\` at the bottom left corner, and having the vertical axis extend upward to the top, we need to flip the vertical axis.\n\n $\"screen$ \n\nPicture from [processing.org](https://processing.org/tutorials/drawing/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"{\n const height = 600\n const svg = d3.select(DOM.svg(60, height))\n\n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \n const yScale = d3.scaleLinear()\n // For y-axis, we map (0 - 40) to (580 - 10) to fill the height\n // If you wonder why we are mapping the values reversely, 0 -> 580 and 40 -> 10,\n // as in the coordination system of our screens, the top left corner is (0, 0)\n // and bottom left corner is (0, 600)\n .range([height - margin.bottom, margin.top])\n .domain([0, 40])\n \n // Append it to svg\n svg.append('g')\n .call(d3.axisLeft(yScale))\n // Need to shift the axis a little bit in order to show the tick labels\n // See more about \"transform\" in the cell below\n .attr('transform', `translate(${margin.left},0)`)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`See the [documentation of transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) for more other functions for transform. We commonly use\n\n- \\`translate(x, y)\\` to do horizontal/vertical shifting\n- \\`rotate(degree, [x, y])\\` to do angular shifting\n- \\`scale(x, y)\\` to resize\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`## Marks and Channels\n\nNow, we have a coordinate system to encode data values, we put marks on the screen to represent the data points.\n\nTo do so, we have to touch the most difficult part of learning D3.js, __selection__.\n\nLet's see an example first!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"{\n const height = 60\n const svg = d3.select(DOM.svg(width, height))\n \n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n\n const xScale = d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain([0, 40])\n \n svg.append('g')\n .call(d3.axisBottom(xScale))\n .attr('transform', `translate(0,${height - margin.bottom})`)\n \n // ----- The above are the same as plotting x-axis in the previous section -----\n \n // Add circles to svg, more explanation in the cell below\n svg.selectAll('circle')\n .data([10, 20, 30, 40])\n .enter()\n .append('circle')\n .attr('cx', d => xScale(d))\n .attr('cy', 20)\n .attr('r', 10)\n .attr('fill', 'SteelBlue')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`### Points Mark: Scatter Plot\n\nScatter plot is the most simple yet most powerful plot in visual analysis. It uses the most effective channels in our visual systems, position, color and shapes. And yet, very easy to plot.\n\nLet's learn more about D3.js through making a scater plot!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"md`#### d3.extent()\n\nAs dataset changes, the values in \\`.domain([0, 40])\\` need to be changed as well. But what are the suitable values for the dataset in hand? \\`d3.extent()\\` is the function for computing these values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"// Example dataset grows in exponential scale\n\nexponentialData = _.range(0, 5).map(x => ({ x, y: 5 * Math.pow(2, x) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"d3.extent(exponentialData.map(d => d.x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"d3.extent(exponentialData.map(d => d.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1347,"value":"/******************************************************************************\n * TODO: *\n * Try to make another exponential dataset with exponents of 3 and use *\n * d3.extent to find the minimum and maximum values of the y values! *\n ******************************************************************************/\n{\n const data = d3.range(5).map(x => ({x, y: Math.pow(x, 3)}));\n \n return {\n x: d3.extent(data, ({x}) => x),\n y: d3.extent(data, ({y}) => y)\n }\n}\n\n/******************************************************************************\n * END OF YOUR CODE * \n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1355,"value":"md`#### Scatter Plot of logarithmicData`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"{\n const height = 600\n const svg = d3.select(DOM.svg(width, height))\n \n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \n const xScale = d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain(d3.extent(exponentialData.map(d => d.x)))\n \n svg.append('g')\n .call(d3.axisBottom(xScale))\n .attr('transform', `translate(0,${height - margin.bottom})`)\n \n const yScale = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain(d3.extent(exponentialData.map(d => d.y)))\n \n svg.append('g')\n .call(d3.axisLeft(yScale))\n .attr('transform', `translate(${margin.left},0)`)\n \n svg.selectAll('circle')\n .data(exponentialData)\n .enter()\n .append('circle')\n // Circles are distributed across x-axis\n .attr('cx', d => xScale(d.x))\n // Across y-axis as well, and it becomes two dimensional\n .attr('cy', d => yScale(d.y))\n .attr('r', 10)\n .attr('fill', 'SteelBlue')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1359,"value":"md`#### Scatter Plot of Pokemon Base Stats\n\nThe logarithmic data is too simple and not interesting.\n\nLet's revisit the Pokemon dataset and plot it with D3.js!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"// Load pokemon_tsne.csv from the tutorial repository on GitHub\n\npokemonBaseStats = d3.csv('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial04/lab4/pokemon.csv', d => _.mapValues(d, s => isNaN(parseFloat(s)) ? s : parseFloat(s)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1366,"value":"md`### One Chart, Three Libraries\n\nWe highly recommend the blog post by Lisa Charlotte Rost, [One Chart, Nine Tools](https://lisacharlotterost.github.io/datavistools-revisited) on making the same chart with many different tools and comparing their differences.\n\nWhile the tools used in her attempt are GUI based visualization tools, we can easily do it in 3 different programming based visualization tools (Altair, Vega-Lite, and D3)!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"md`### Line Mark\n\nLine mark is another important geometric mark in plottings. It gives us a \"linked\" perception of the data points. \n\nWe use a line to mark multiple data points of the same series, like using one line to represent a series of income flow over a period of time, another line to represent a series of expense over the same period of time.\n\nJust like how we learn about drawing circles with SVG, let's see how we can draw a line using SVG!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`### Drawing Lines with SVG Path Element\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"// Drawing a line with SVG\n// See the \"d\" attribute of the \"path\" element? How on earth do we come up with that string!?\n\nhtml`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1389,"value":"md`#### d3.line()\n\nWhile it is obscure to write the value of the \"d\" attribute of a path by hand (If you want to, you can [learn about it](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d), and write one), d3 provides the functions for us to generate the \"d\" attribute in a more human-understandable way.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"// Create a line generator\n\nlineGenerator = d3.line()","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"// Adjust the logarithmic data to a scale nicer for plotting\n// We will later use a scale function instead\n\nlineData = exponentialData.map(d => [d.x * 100, 200 - d.y])","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"// Generate the string used for the \"d\" attribute above\n\nlineGenerator(lineData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1402,"value":"md`#### Line Chart of logarithmicData`","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`### Lines: Line Chart\n\nNow, we have learned how to plot a line with our learning wheels dataset, we experiment it with real world data!\n\nRemember in the [last tutorial](https://bit.ly/vis-t07-ob), we have processed the weather dataset from weather underground and plotted a heatmap with Vega-Lite, now we use the same dataset again, but to make a line chart!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"// Hong Kong Daily Temperature from 1997 January to 2017 October, with the minimum,\n// maximum and average temperature of each day\nHKDailyTemperature = d3.csv('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial08/lab8/VHHH_DAILY_TEMP_1997-01-01_2017-10-28.csv', d => ({\n date: new Date(d.date),\n min: +d.min,\n max: +d.max,\n mean: +d.mean\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"md`#### Hong Kong Daily Temperature`","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"md`### Lines: Multiple Line Chart\n\nAmong all the basic charts, we see line charts more often than the others, like bar/column charts, it has the advantages of comparing different series of data.\n\nThat is, putting multiple lines into a single plot.\n\nLet's do it!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"// Similar to the daily temperature dataset, but this is aggregated over month instead\nHKMonthlyTemperature = d3.csv('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial08/lab8/VHHH_MONTHLY_TEMP_1997-01-01_2017-10-28.csv', d => ({\n month: new Date(d.month),\n min: +d.min,\n max: +d.max,\n mean: +d.mean\n}))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"md`#### Hong Kong Monthly Temperature`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"md`### Legend\n\nWe have missed an important component in our line chart, that is the legend!\n\nHere we create it with a supplementary library of d3, [d3 SVG Legend](https://d3-legend.susielu.com/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"// Create a legend\n\n{\n const height = 80\n const svg = d3.select(DOM.svg(width, height))\n \n // Need to yield the svg node first before adding the legend\n // It is rather a technical issue, see https://observablehq.com/@mbostock/d3-legend\n yield svg.node()\n \n const legend = d3.legendColor()\n .scale(d3.scaleOrdinal(d3.schemeAccent).domain(['min', 'mean', 'max']))\n \n svg.append(\"g\").call(legend);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`### Lines: Parallel Coordinates\n\nParallel Coordinates is very similar to a line chart. While line chart encodes an ordinal/temperal series on the x-axis, parallel coordinates encodes a nominal series on its x-axis.\n\nOrdinal means there is an order between values, while nominal means the other way. Time is ordered, from 1997 to 2017. Attributes are unordered, you cannot put the names of the base stats [hp, attack, sp_attack, defense, sp_defense, speed] in meaningful order (other than alphabetical, which does not reflect the meaning of these attribute names).\n\nParallel coordinates is best for visualizing multi-dimenional dataset, and we have the Pokemon dataset, which is multi-dimenional!\n\nLet's make a parallel coordinates plot with Pokemon Base Stats dataset!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"md`#### Parallel Coordinates of Pokemon Base Stats`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1242,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`#### Radar Chart: Lines Mark + Polar Coordinate\n\nRadar chart is very similar to parallel coordinates, it is a parallel coordinate wrapped in a circle.\n\nWhen showing the abilities of a Pokemon, radar chart is the choice!\n\nLet's make radar charts for Pokemon!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"// My favorite Pokemon, Snorlax, a.k.a. 卡比獸 in Chinese\n\npokemonBaseStats[142]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1525,"value":"md`#### Radar Chart of Snorlax`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1826,"value":"pokemonBaseStats.findIndex(d => d.name === \"Garbodor\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1263,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":1623,"value":"md`## Glyph\n\nWhile the above plots can be plotted with Vega-Lite. One of the areas that D3.js is really useful, is when you want to make an unusual plot that is not in the Vega-Lite language.\n\nFor example, instead of representing each Pokemon with a dot, we would like to represent each Pokemon with their radar charts reflecting their base stats. It is currently not possible with Vega-Lite. But with the flexibility of D3.js, it is possible.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"md`### Pokemon Base Stats t-sne`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1685,"value":"// Placeholder image for the cell below\n\nmd`\n![pokemon-base-stats-tsne.png](https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial08/lab8/pokemon-base-stats-tsne.png)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1259,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"import { legend } from \"@mbostock/mortality-due-to-alcohol-use-disorder\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3', 'd3-svg-legend')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}