\\` element of SVG, we will see how to do it immediately.\n\nHowever, the \\`<title>\\` element limits to plain text only, while we may want to embed information other than text, like pictures, links to other web pages, or even a mini visualization in the tooltip. This harder way is to use mouse event and create a \\`<div>\\` element to contain the message, we will see it in the mouse events section.\n\nLet's see how to create tooltips in SVG and D3.js as well! Try to move your mouse over the circles!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"md`### Tooltip in SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"// Add a title element inside the element to be annotated\n// Try to move your mouse over the Pokeball and the button on it!\n\nhtml`\n<svg width=120 height=120>\n <circle cx=60 cy=60 r=50 stroke='black' fill='white'>\n\n \n <title>I'm a Pokeball!

32:T46f,// Try to move your mouse over the circles above! { const height = 60 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const data = [ { x: 30, y: 30, r: 30, title: 'I am the 1st circle!' }, { x: 90, y: 30, r: 30, title: 'I am the 2nd circle!' }, { x: 150, y: 30, r: 30, title: 'I am the 3rd circle!' }, { x: 210, y: 30, r: 30, title: 'I am the 4th circle!' } ] svg.selectAll('circle') .data(data) .enter() .append('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', d => d.r) .attr('fill', 'SteelBlue') // Listen to the "mouseover" event, and set the value of "hovering" and change the color .on('mouseover', function (d, i) { mutable hovering = data[i].title d3.select(this) .attr('opacity', 0.5) }) // Listen to the "mouseout" event, and reset the value of "hovering" and color .on('mouseout', function (d, i) { mutable hovering = 'None' d3.select(this) .attr('opacity', 1) }) return svg.node() }33:T6be,/****************************************************************************** * TODO: * * Try to replace the "mouseover" event to "click" event, and change the * * value of the "clicked" variable! * ******************************************************************************/ { const height = 60 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const data = [ { x: 30, y: 30, r: 30, title: 'I am the 1st circle!' }, { x: 90, y: 30, r: 30, title: 'I am the 2nd circle!' }, { x: 150, y: 30, r: 30, title: 'I am the 3rd circle!' }, { x: 210, y: 30, r: 30, title: 'I am the 4th circle!' } ] svg.selectAll('circle') .data(data) .enter() .append('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', d => d.r) .attr('fill', 'SteelBlue') // Listen to the "mouseover" event, and set the value of "hovering" and change the color .on('click', function (d, i) { mutable hovering = data[i].title d3.select(this) .attr('opacity', 0.5) }) // Listen to the "mouseout" event, and reset the value of "hovering" and color .on('dblclick', function (d, i) { mutable hovering = 'None' d3.select(this) .attr('opacity', 1) }) return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/34:T632,{ const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 50, bottom: 20 } const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) .domain(d3.extent(pokemonBaseStats.map(d => d.x))) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain(d3.extent(pokemonBaseStats.map(d => d.y))) // Setup the tooltip style, these are html and css, you can always lookup for their usage // by searching the keywords const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'monospace') .html(d => `

Pokedex: ${d.pokedex_number}
Name: ${d.name}
Base Total: ${d.base_total}
Types: ${d.type1} ${d.type2}

`) // Apply tooltip to our SVG svg.call(tooltip) svg.selectAll('circle') .data(pokemonBaseStats) .enter() .append('circle') .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('r', 5) .attr('opacity', 0.5) .attr('fill', d => d.is_legendary ? 'GoldenRod' : 'SteelBlue') // When "mouseover" event triggers, show the tooltip .on('mouseover', tooltip.show) // Hide the tooltip when "mouseout" .on('mouseout', tooltip.hide) return svg.node() }35:T87c,{ const height = 400 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 70, top: 10, right: 30, bottom: 50 } // Find the track information by "trackName", mostly we want the trackId const song = _.find(spotifySongs, { trackName }) // Go through a chain of process with "spotifyDailyGlobalRanking" dataset const data = _.chain(spotifyDailyGlobalRanking) // Filter the dataset to only the data of selected track .filter(d => d.trackId === song.trackId) // Group data by month .groupBy(d => d.date.substring(0, 7)) // Calculate the average of each month .map((list, date) => ({ date, streams: _.sumBy(list, 'streams') / list.length })) // Lodash keeps track of the chain with other information, .value() declares we are // done with the process, and returns the end result, which in our case, is an array // of the daily average streams of each month .value() const xScale = d3.scaleBand() .padding(0.1) .range([margin.left, width - margin.right]) .domain(_.range(1, 13).map(d => moment(`2017-${d}`).format('YYYY-MM'))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Use "maxDailyStreams" instead of calculating from the filtered data to keep the // chart consistent across different songs .domain([0, maxDailyStreams]) svg.append('g') .call(d3.axisLeft(yScale).tickFormat(d3.format('.2s'))) .attr('transform', `translate(${margin.left},0)`) // Make the column chart with "rect", its attributes can be found in the documentation: // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', d => xScale(d.date)) .attr('y', d => yScale(d.streams)) .attr('height', d => yScale(0) - yScale(d.streams)) .attr('width', xScale.bandwidth()) .attr('fill', 'SteelBlue') .append('title') .text(d => `${d.date}: ${Math.round(d.streams)}`) return svg.node() }36:Tce6,/****************************************************************************** * TODO: * * Try to add a click event to the column chart above, let the viewers to * * select a month by clicking on the "rect"! * * Hint: use .on('click', d => {}) to set the value of "selectedMonth" in the * * format of "2017-12" * ******************************************************************************/ { const height = 400 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 70, top: 10, right: 30, bottom: 50 } // Find the track information by "trackName", mostly we want the trackId const song = _.find(spotifySongs, { trackName }) // Go through a chain of process with "spotifyDailyGlobalRanking" dataset const data = _.chain(spotifyDailyGlobalRanking) // Filter the dataset to only the data of selected track .filter(d => d.trackId === song.trackId) // Group data by month .groupBy(d => d.date.substring(0, 7)) // Calculate the average of each month .map((list, date) => ({ date, streams: _.sumBy(list, 'streams') / list.length })) // Lodash keeps track of the chain with other information, .value() declares we are // done with the process, and returns the end result, which in our case, is an array // of the daily average streams of each month .value() const xScale = d3.scaleBand() .padding(0.1) .range([margin.left, width - margin.right]) .domain(_.range(1, 13).map(d => moment(`2017-${d}`).format('YYYY-MM'))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Use "maxDailyStreams" instead of calculating from the filtered data to keep the // chart consistent across different songs .domain([0, maxDailyStreams]) svg.append('g') .call(d3.axisLeft(yScale).tickFormat(d3.format('.2s'))) .attr('transform', `translate(${margin.left},0)`) // Make the column chart with "rect", its attributes can be found in the documentation: // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', d => xScale(d.date)) .attr('y', d => yScale(d.streams)) .attr('height', d => yScale(0) - yScale(d.streams)) .attr('width', xScale.bandwidth()) .attr('fill', 'SteelBlue') .on('click', function(d,i){ mutable selectedMonth = i.date d3.select(this) .attr('opacity', 0.5) }) .on('mouseout', function (d, i) { d3.select(this) .attr('opacity', 1) }) .append('title') .text(d => `${d.date}: ${Math.round(d.streams)}`) .append('title') .text(d => `${d.date}: ${Math.round(d.streams)}`) return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/37:T59e,md`### Missing data If you set the value of \`selectedMonth\` to "2017-12", you can see the data on 24th and 25th are missing. While missing values are very common in datasets, there are many ways we can deal with it, but none of those is perfect. The easiest is to let it be. It is missing, and we should show the dataset as it is and let the reader to figure out the reason. Like, why 24th and 25th of December? Maybe because it is Christmas and Spotify want to hide the data, or the data collection server is down and the administrator is out and celebrating? Who knows? ¯\\\\\\_(ツ)\\_/¯ We better leave the guess to the readers, instead of "handling" it. Another way is to interpolate it, use the data around the missing dates to make an approximation. It is very hard to do it right. Just like our case, we can see that the 31st, New Year's Eve has a spike, and it is very likely that Christmas and Christmas Eve also have spikes, too. If you set the value of \`selectedMonth\` to "2017-06", you will see that 2nd of June has missing data as well, is it safe to use the date around it to make an estimation? I would think so in this case. But what if it is a weekend, should we estimate it with data of the previous and the next weekend? And these questions go on and on... There is a subsidiary in statistics about handling missing data, [Imputation]. [Imputation]: https://en.wikipedia.org/wiki/Imputation_(statistics) `38:Tafd,/****************************************************************************** * TODO: * * Try to plot the column chart using D3 instead! * * You don't need to make the exact same plot as Vega-Lite, just the * * essential components will be good enough. * ******************************************************************************/ { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 50, top: 30, right: 30, bottom: 50 } const song = _.find(spotifySongs, { trackName }) const data = spotifyDailyGlobalRanking .filter(d => d.trackId == song.trackId && d.date.substring(0, 7) == selectedMonth) const xScale = d3.scaleBand() .padding(0.1) .range([margin.left, width - margin.right]) .domain(_.range(1, moment(selectedMonth).daysInMonth() + 1)) 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([0, d3.max(data.map(d=> d.streams))]) const tooltipSpotify = d3tip() .style('border', 'solid 1px black') .style('background-color', 'white') .style('border-radius', '5px') .style('font-family', 'san-serif') .html((d) => `

Streams: ${d.streams}

`) svg.call(tooltipSpotify) svg.append('g') .call(d3.axisLeft(yScale).tickFormat(d3.format('.2s'))) .attr('transform', `translate(${margin.left},0)`) svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', d => xScale(moment(d.date).date())) .attr('y', d => yScale(d.streams)) .attr('height', d => yScale(0) - yScale(d.streams)) .attr('width', xScale.bandwidth()) .attr('fill', 'SteelBlue') .on('mouseover', function(d,i){ tooltipSpotify.show(i,this); }) .on('mouseout', tooltipSpotify.hide) .append('title') .text(d => `${d.date}: ${Math.round(d.streams)}`) svg.append("text") .attr("class", "x label") .attr("text-anchor", "end") .attr("x", width/2) .attr("y", height-5) .text("Date"); svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", 2) .attr("x", -200) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Number of Streams"); return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/39:T84b,// Choropleth plot (map regions encoded with colors) { // Prepare data const song = _.find(spotifySongs, { trackName }) const date = moment([2017, 0, 1]).add(dateIn2017Slider2, 'd').format('YYYY-MM-DD') const data = spotifyDailyRanking // Filter out the selected song and selected date .filter(d => d.trackId === song.trackId && d.date === date) // Because we need to lookup the geographic information of the region, we need to find the // cca3 code of the region using the countries dataset .map(d => { const country = countries[d.region.toUpperCase()] return { ...d, cca3: country.cca3, country: country.name } }) return vegaEmbed({ width: width - 200, height: 400, data: { // Visualization with geographic data is not drawing data onto a map, instead, // we draw the map while color encoding according to the data values // This "worldTopoJson" dataset contains the borders of all the countries on Earth and // we draw them out one by one, if there is a record in our data, we give that region a // color according to the number of streams values: worldTopoJson, format: { type: 'topojson', feature: 'countries-land-10km' } }, // Vega-Lite transform, looking up values from our data, like a table join transform: [{ lookup: 'properties.A3', from: { data: { values: data }, key: 'cca3', fields: ['streams', 'country'] } }], // How do we project the latitude and longitude onto 2D screen // See https://vega.github.io/vega/examples/world-map/ for more available projections projection: { type: 'equirectangular' }, mark: 'geoshape', encoding: { // Color encode the number of streams in different regions color: { field: 'streams', type: 'q', scale: { scheme: 'blues', domain: [0, maxDailyRegionStream] } }, // Provide a tooltip to show the details tooltip: [ {field: 'streams', type: 'q'}, {field: 'country', type: 'n'} ] } }) }3a:T4c6,md`### More about interactions Interaction design has a huge space to explore. So far, visualization researchers have summarized some common patterns: - Selection: select one or multiple data points - Brushing: select multiple neighbouring data points - Pan and Zoom: like cameras, rescale the plot to focus on a different part of the visualization You may notice that, all these patterns are aiming to do one thing, removing excess data points, those out of our region of interest. To implement interactions in your own visualizations, you may find the following links useful: 1. [Interactive Plots with Selection in Vega-Lite](https://vega.github.io/vega-lite/docs/selection.html) 1. [Making Charts Interactive in Altair](https://altair-viz.github.io/user_guide/interactions.html) 1. [Event handling in D3.js](https://github.com/d3/d3-selection#handling-events) 1. [d3-drag](https://github.com/d3/d3-drag), [d3-zoom](https://github.com/d3/d3-zoom), [d3-brush](https://github.com/d3/d3-brush) 1. Demos for the use of [d3-drag](https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e), [d3-zoom](https://observablehq.com/@d3/zoomable-bar-chart), [d3-brush](https://observablehq.com/@d3/brushable-scatterplot) `3b:T46d,// Rerun this cell to see the animated transition { const height = 60 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([0, 40]) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) // Just append a circle, nothing special here yet! svg.selectAll('circle') .data([5]) .enter() .append('circle') .attr('cx', d => xScale(d)) .attr('cy', 20) .attr('r', 10) .attr('fill', 'SteelBlue') // This is the update! svg.selectAll('circle') // Gives a new dataset, replacing 5 with 30 .data([30]) // Tell D3.js to make a transition .transition() // Update the visual representation, it can be any attributes, cx, cy, r, color, etc. // And it must be placed after .transition() .attr('cx', d => xScale(d)) // That last for 5000 ms .duration(5000) // With "d3.easeCubic" easing .ease(d3.easeCubic) return svg.node() }3c:T713,/****************************************************************************** * TODO: * * Try other easing methods, duration and data value! e.g. d3.easeBounceOut! * * A full list of easing methods can be found in the documentation: * * https://github.com/d3/d3-ease * *******************************************************************************/ { const height = 60 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([0, 40]) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) // Just append a circle, nothing special here yet! svg.selectAll('circle') .data([5]) .enter() .append('circle') .attr('cx', d => xScale(d)) .attr('cy', 20) .attr('r', 10) .attr('fill', 'SteelBlue') // This is the update! svg.selectAll('circle') // Gives a new dataset, replacing 5 with 30 .data([20]) // Tell D3.js to make a transition .transition() // Update the visual representation, it can be any attributes, cx, cy, r, color, etc. // And it must be placed after .transition() .attr('cx', d => xScale(d)) // That last for 5000 ms .duration(2000) // With "d3.easeCubic" easing .ease(d3.easeBackOut) return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/3d:T89e,{ const height = 300 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 30, right: 30, bottom: 20 } const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) .domain([0, 10]) 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([0, 40]) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) const colorScale = d3.scaleOrdinal(d3.schemeSet3) .domain([0, 10]) let circles = svg.selectAll('circle') let data = [] while (true) { // No effect to this plot, just to print the values in the cell above mutable dataArray = data yield svg.node() // Update data const update = circles .data(data) // Remove SVG elements associated with the deleted data points update.exit().remove() // Add SVG elements for the newly added data points circles = update.enter() .append('circle') .attr('cx', (d, i) => xScale(i + 1)) .attr('r', 20) .attr('fill', (d, i) => colorScale(i)) // We want the variable "circles" to hold not just the set of newly added // data points, but all the exisiting data points // .merge is the function to combine two sets .merge(circles) // If nothing to animate, don't wait if (data.length !== 0) { // Wait until the transition animation is finished await circles .transition() .attr('cy', d => yScale(d)) .ease(d3.easeBounceOut) .duration(1000) // calling .end() is important, it returns a "waitable" object for "await" to // wait for. It is a concept call "Promise", similar to the concept of generator, // it will take a long passage to explain, just take it as a sandglass to wait for .end() } if (data.length >= 1) data[data.length - 1] = 0 if (data.length <= 10) data.push(40) if (data.length > 10 && data[data.length - 1] === 0) data = [] } }3e:Ta29,// Rerun this cell to see the animation { const height = 400 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 70, top: 10, right: 30, bottom: 50 } // A function to retrieve the data of the specified date // It always returns an array with all 10 songs const rankingOnDate = (date) => { const dateString = moment(date).format('YYYY-MM-DD') const data = spotifyDailyGlobalRanking.filter(d => d.date === dateString) return spotifySongs.map(song => { const ranking = _.find(data, { trackId: song.trackId }) return ranking || { trackId: song.trackId, streams: 0 } }) } const xScale = d3.scaleBand() .padding(0.1) .range([margin.left, width - margin.right]) .domain(spotifySongs.map(song => song.trackId)) svg.append('g') .call(d3.axisBottom(xScale) .tickFormat(v => _.find(spotifySongs, { trackId: v }).trackName.substr(0, 15))) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain([0, maxDailyStreams]) svg.append('g') .call(d3.axisLeft(yScale).tickFormat(d3.format('.2s'))) .attr('transform', `translate(${margin.left},0)`) // Make the text at the top right corner const dateText = svg.append('text') .text(`Spotify Streams on ${moment([2017, 0, 1]).format('YYYY-MM-DD')}`) .attr('transform', `translate(${width - 300}, 20)`) const bars = svg.selectAll('rect') .data(rankingOnDate('2017-01-01')) .enter() .append('rect') .attr('x', d => xScale(d.trackId)) .attr('y', d => yScale(d.streams)) .attr('height', d => yScale(0) - yScale(d.streams)) .attr('width', xScale.bandwidth()) .attr('fill', 'SteelBlue') let date = moment([2017, 0, 1]) while (true) { yield svg.node(); // Increment by 1 day date = date.add(1, 'd') // Stop if it is 31st December, reminded that month starts counting from 0 if (date.isAfter([2017, 11, 31])) break // Update the text at the top right corner dateText.text(`Spotify Streams on ${date.format('YYYY-MM-DD')}`) await bars // Because the "rankingOnDate" always return all 10 songs, so that we only // need to focus on updating the values and transitions, no .enter(), .exit() // or .merge() is needed .data(rankingOnDate(date)) .transition() .duration(500) .ease(d3.easeCubic) .attr('y', d => yScale(d.streams)) .attr('height', d => yScale(0) - yScale(d.streams)) .end() } }3f:T724,// Rerun this cell to see the animation { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 50, bottom: 20 } const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) .domain(d3.extent(pokemonBaseStats.map(d => d.x))) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain(d3.extent(pokemonBaseStats.map(d => d.y))) const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'monospace') .html(d => `

Pokedex: ${d.pokedex_number}
Name: ${d.name}
Base Total: ${d.base_total}
Types: ${d.type1} ${d.type2}

`) svg.call(tooltip) let circles = svg.selectAll('circle') let data = [] while(true) { yield svg.node() const update = circles .data(data) update.exit().remove() circles = update.enter() .append('circle') .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('r', 0) .attr('opacity', 0.5) .attr('fill', d => d.is_legendary ? 'GoldenRod' : 'SteelBlue') .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide) .merge(circles) if (data.length !== 0) { await circles .transition() .attr('r', 10) .ease(d3.easeElasticOut) .duration(1000) .end() } if (data.length < pokemonBaseStats.length) { data.push(pokemonBaseStats[data.length]) } else { break } } }40:T40b,md`## Layouts There are more visualizations we wish to cover, but do not have the space and time for them. They are mainly: - Wordle (a.k.a. Word Cloud) - Graph visualization: dorce-directed layout and matrix view If you are interested in these kinds of visualizatons, you encourage you to read the following references: - Word Cloud: - [Javascript implementation of wordle by Jason Davies](https://github.com/jasondavies/d3-cloud) - [Vega Word Cloud Example](https://vega.github.io/vega/examples/word-cloud/) - [Word Cloud of Color Names](https://observablehq.com/@leoyuholo/word-cloud-of-color-names) - Graph visualizations - [D3 in Depth: Layouts](https://d3indepth.com/layouts/) and [D3 in Depth: Force layout](https://d3indepth.com/force-layout/) - [Vega Force Directed Layout Example](https://vega.github.io/vega/examples/force-directed-layout/) - [D3 documentation on force directed layout](https://github.com/d3/d3-force) - Besides D3, [Gephi](https://gephi.org/) is a professional graph visualization tool `41:[] 30:{"title":"CS 529 Visual Data Science Tutorial: Interaction in D3.js","cells":[{"id":0,"value":"md`# CS 529 Visual Data Science Tutorial: Interaction in D3.js\n\nIn the previous notebook, we have revisited the basics of SVG, and used D3.js to make the different components of a chart, and to bind data to visual representations through selection. We have made serveral __static__ charts, scatter plots, line charts, parallel coordinates and radar charts.\n\nIn this tutorial, we will make more charts, and we will add interaction to them. While the visual representation changes upon interaction, we will also add animation to facilitate smooth transitions.\n\nAll the original materials of this tutorial are hosted on [this GitHub repository](https://github.com/leoyuholo/learning-vis-tools/tree/master/tutorial09)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Interaction in Visualizations\n\nWhile the information conveyed on a static plot is limited by the dimension of visual encoding space, x-coordinate, y-coordinate, color, etc. and these channels are not equally effective. Interaction brings static plots to live, to change the visual encoding in response to user enquiries most effectively.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Interaction Techniques\n\nWe will learn how to use these following interaction techniques:\n\n1. Tooltip\n1. Mouse events\n1. Inputs in Observable notebook\n1. Interactions between multiple visualizations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Tooltip\n\nWhen data are encoded in visual representation, the decoding process is not exact. A good visualization should provide a way for the viewers to access the original data being encoded. In a static plot, there are axes and legends to help. In an interactive plot, we can show the information upon their request. The most common form is tooltip.\n\nThere are two ways of making tooltips, one easy and one harder.\n\nThe easy one is to use the built in \\`\\` element of SVG, we will see how to do it immediately.\n\nHowever, the \\`<title>\\` element limits to plain text only, while we may want to embed information other than text, like pictures, links to other web pages, or even a mini visualization in the tooltip. This harder way is to use mouse event and create a \\`<div>\\` element to contain the message, we will see it in the mouse events section.\n\nLet's see how to create tooltips in SVG and D3.js as well! Try to move your mouse over the circles!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"md`### Tooltip in SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"// Add a title element inside the element to be annotated\n// Try to move your mouse over the Pokeball and the button on it!\n\nhtml`\n<svg width=120 height=120>\n <circle cx=60 cy=60 r=50 stroke='black' fill='white'>\n\n \n <title>I'm a Pokeball!\n\n \n\n \n \n\n \n What's inside!?\n\n \n \n \n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1180,"value":"md`### Tooltip in D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"// D3.js is built on top of SVG, so it is very similar to the SVG example\n// Try to move your mouse over the circle above!\n\n{\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 svg.selectAll('circle')\n .data([{ x: 30, y: 30, r: 30, title: 'Details on demand!' }])\n .enter()\n .append('circle')\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n .attr('r', d => d.r)\n .attr('fill', 'SteelBlue')\n // Append a title element inside the circle\n .append('title')\n // It can be multilined, but becareful with the indentation\n .text(d => `${d.title}\ncx: ${d.x}\ncy: ${d.y}\nr: ${d.r}`)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Mouse Events\n\nWhen we need more customized interactions, we want to get notified for the mouse events and give responses accordingly.\n\nThe most common events from mouse input are:\n1. Hover: mouseover, mouseout\n1. Click: click, double click, right click\n1. Drag and drop: mousedown, mousemove, mouseup\n1. Scroll: wheel\n\nYou can find a full list of mouse events for the current HTML standard [here](https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"// Variable to demonstrate mouseover and mouseout events\n\nmutable hovering = 'None'","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"// Variable to reflect the clicking, change its value in your code below!\n\nmutable clicked = \"None\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1440,"value":"md`### Customizble Tooltip\n\nTo break the limitation of \\`\\` element, a more flexible tooltip implementation is needed, and the library [d3-tip](https://github.com/Caged/d3-tip) is exactly built for this purpose.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"// Import the d3-tip library\n\nd3tip = require('d3-tip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"// Pokemon dataset again!\n\npokemonBaseStats = d3.csv('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial06/lab6/pokemon_tsne.csv', d => _.mapValues(d, s => isNaN(parseFloat(s)) ? s : parseFloat(s)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1860,"value":"md`### Pokemon Base Stats t-SNE with Tooltip\n\nTry to mouse over the dots!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1427,"value":"md`## Inputs in Observable Notebook\n\nObservable notebook comes with a set of inputs that provides a way for the viewers to set the value of variables.\n\nThe most common inputs are to let viewers to choose among a set of possible values. Dropdown menus and sliders are designed for this purpose.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"md`You can find a full list of available inputs from [this notebook](https://observablehq.com/@jashkenas/inputs). And you may also want to try these very impressive [data driven range sliders](https://observablehq.com/@bumbeishvili/data-driven-range-sliders).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1448,"value":"md`### Dropdown Menu`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"// Top 10 songs from the spotifys-worldwide-daily-song-ranking dataset\n\nspotifySongs = d3.csv(\n 'https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial09/lab9/spotify-songs.csv',\n song => _.mapKeys({\n ...song,\n 'Track ID': song.URL.substring(song.URL.indexOf('track') + 6)\n }, (v, k) => _.camelCase(k))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"// Dropdown menu contains the 10 songs in spotifySongs, with title and a default value\n\n// \"viewof\" is a keyword in Observable notebook, it creates a binding between \"trackName\"\n// and the underlying dropdown menu HTML input element\nviewof trackName = select({\n title: 'Pick a song:',\n options: spotifySongs.map(song => song.trackName),\n value: spotifySongs[0].trackName\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1742,"value":"// Only the rankings with region == \"global\" from the spotifys-worldwide-daily-song-ranking dataset\n\nspotifyDailyGlobalRanking = d3.csv(\n 'https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial09/lab9/spotify-daily-global-song-ranking-2017.csv',\n d => _.mapKeys({...d, Position: +d.Position, Streams: +d.Streams}, (v, k) => _.camelCase(k)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"// To be used as the domain of the y-axis, to keep the y-axis consistent across different songs\n\nmaxMonthlyStreams = _.chain(spotifyDailyGlobalRanking)\n .groupBy(d => d.trackId + '-' + d.date.substring(0, 7))\n .map((list, date) => ({ date, streams: _.sumBy(list, 'streams') }))\n .maxBy('streams')\n .value()\n .streams","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"md`### Spotify Daily Average Streams of \"${trackName}\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1487,"value":"md`#### Why daily average, but not monthly total?\n\nIt is a common pitfall in data analysis. While each month has different number of days, comparing monthly total is very unfair to February, which may has 2-3 days less and often shows a dent in monthly total plots.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"// Update this variable using a click event\n\nmutable selectedMonth = '2017-12'","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"md`## Details on Demand!\n\nViewers now able to provide inputs, and the visualization can response to the change and provide information more relevant to the interest of the viewer.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"// To be used as the domain of the y-axis, to keep the y-axis consistent across different songs\n\nmaxDailyStreams = _.maxBy(spotifyDailyGlobalRanking, 'streams').streams","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"md`### Spotify Daily Streams of \"${trackName}\" in ${selectedMonth}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"{\n // Prepare the data\n const song = _.find(spotifySongs, { trackName })\n const data = spotifyDailyGlobalRanking\n .filter(d => d.trackId === song.trackId && d.date.substring(0, 7) === selectedMonth)\n\n // And then visualize\n return vegaEmbed({\n data: { values: data },\n width: width - 200,\n height: 400,\n mark: 'bar',\n encoding: {\n x: {\n field: 'date',\n type: 'o',\n timeUnit: 'date',\n scale: {\n // Instead of automatically inferring from data, we provide the range\n // Otherwise, the missing data will not be shown as a missing bar\n domain: _.range(1, moment(selectedMonth).daysInMonth() + 1)\n }\n },\n // Adjust the axis label to 1 significant digit after decimal point\n y: { field: 'streams', type: 'q', axis: { format: '.1s' } }\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1511,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1553,"value":"md`### Slider\n\nSlider is another commonly seen input, providing a range of possible values for viewers to pick.\n\nThe following example let the user to slide through the year of 2017!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"// Slider with integer values range from 0 to 364, each corresponding to a date in 2017\n\nviewof dateIn2017Slider = slider({\n title: 'Pick a date:',\n value: 180,\n min: 0,\n max: moment([2017]).isLeapYear() ? 365 : 364,\n step: 1,\n display: v => moment([2017, 0, 1]).add(v, 'd').format('dddd, MMMM D YYYY')\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1565,"value":"md`### Spotify Streams on ${moment([2017, 0, 1]).add(dateIn2017Slider, 'd').format('MMMM D YYYY')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"{\n const date = moment([2017, 0, 1]).add(dateIn2017Slider, 'd').format('YYYY-MM-DD')\n const data = spotifyDailyGlobalRanking.filter(d => d.date === date)\n .map(d => ({ ...d, trackName: _.find(spotifySongs, { trackId: d.trackId }).trackName }))\n \n return vegaEmbed({\n data: { values: data },\n width: width - 200,\n height: 400,\n mark: 'bar',\n encoding: {\n x: {\n field: 'trackName',\n type: 'n',\n // We provide the domain instead of auto-infer, to keep the plot consistent among changes\n scale: { domain: spotifySongs.map(song => song.trackName) }\n },\n y: {\n field: 'streams',\n type: 'q',\n axis: { format: '.1s' },\n // Same reason as above to provide the domain\n scale: { domain: [0, maxDailyStreams] }\n }\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2217,"value":"// Another slider\n\nviewof dateIn2017Slider2 = slider({\n title: 'Pick a date:',\n value: 180,\n min: 0,\n max: moment([2017]).isLeapYear() ? 365 : 364,\n step: 1,\n display: v => moment([2017, 0, 1]).add(v, 'd').format('dddd, MMMM D YYYY')\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2132,"value":"// spotifys-worldwide-daily-song-ranking dataset from 2017-01-01 to 2017-12-31\n\nspotifyDailyRanking = d3.csv(\n 'https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial09/lab9/spotify-daily-song-ranking-2017.csv',\n d => _.mapKeys({...d, Position: +d.Position, Streams: +d.Streams}, (v, k) => _.camelCase(k)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"// To be used as the domain of the y-axis, to keep the y-axis consistent across different songs\n\nmaxDailyRegionStream = d3.max(spotifyDailyRanking, d => d.streams)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"// Countries dataset from https://github.com/mledoze/countries, use for mapping region code to cca3 code\n\ncountries = _.chain(await d3.json('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial09/lab9/countries.json'))\n .map(d => ({ cca2: d.cca2, cca3: d.cca3, name: d.name.common }))\n .keyBy('cca2')\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"value":"// The dataset used to draw the world map, further explanation in the cells below\n\nworldTopoJson = d3.json('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial09/lab9/countries-land-10km.topo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2113,"value":"md`### Spotify Streams Global Distribution of \"${trackName}\" on ${moment([2017, 0, 1]).add(dateIn2017Slider, 'd').format('MMMM D YYYY')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1726,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1575,"value":"md`## Animation\n\nYou may wonder that, instead of manually sliding the slider, what if we make it an animation!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"// Variable holding the steps of the animation below\n// Rerun this cell to see the animation below\n\nmutable dateIn2017Mutable = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":838,"value":"{\n if (dateIn2017Mutable < 364) {\n // Delay for 500 ms, yield is a keyword in Javascript, which is relayed to the concept\n // of generator. It will take up a long passage (if not an article) to explain, just\n // take it as a loop that keep updating the value of \"dateIn2017Mutable\" until 364\n yield Promises.delay(500, dateIn2017Mutable)\n // Then increment the variable\n mutable dateIn2017Mutable++\n } else {\n // Do not increment if it is 31st December\n yield dateIn2017Mutable\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1654,"value":"md`If you're interested to know about generator in Javascript and Observable notebook, [here](https://observablehq.com/@mbostock/generator-cells-functions-and-objects) is a notebook explaining the concepts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"md`### Spotify Streams on ${moment([2017, 0, 1]).add(dateIn2017Mutable, 'd').format('MMMM D YYYY')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"// Keep producing a new plot each half a second, we now have an animation of 2 frames per second\n{\n const date = moment([2017, 0, 1]).add(dateIn2017Mutable, 'd').format('YYYY-MM-DD')\n const data = spotifyDailyGlobalRanking.filter(d => d.date === date)\n .map(d => ({ ...d, trackName: _.find(spotifySongs, { trackId: d.trackId }).trackName }))\n \n return vegaEmbed({\n data: { values: data },\n width: width - 200,\n height: 400,\n mark: 'bar',\n encoding: {\n x: {\n field: 'trackName',\n type: 'n',\n scale: { domain: spotifySongs.map(song => song.trackName) }\n },\n y: {\n field: 'streams',\n type: 'q',\n axis: { format: '.1s' },\n scale: { domain: [0, maxDailyStreams] }\n }\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"md`## Transition with D3.js\n\nWhile the above animation is viable in Observable notebooks, it was not the way that D3.js handles animation. And reconstructing a new plot with Vega-Lite for each frame is computation intensive.\n\nD3.js has a very convient way to make animations to smooth the transition between states, like from one set of data points to another set of data points.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1610,"value":"md` ## Eyes Beat Memory\n\nWhile it is fun to make animations, you probably don't want to put much work on animating your visualizations, because, if you remember, \"__eyes beat memory__\"! The appropriate use of animation in visualization is still under active research. The justifiable use of animations are:\n\n1. Smoothing the transition between two static visualizations, it helps readers to follow the data point across two visualization\n1. Pop-out effect of motion, as an encoding channel. It draws the readers' attention to a particlar data point. We will see an example at the end of this section.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"md`### Transition, Duration and Easing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1623,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":1631,"value":"md`## Adding and Removing Data Points\n\nMost of the time, it is not just updating the values of a data point, but adding and removing data points.\n\nThe animation below keep adding and removing data points.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"// Just use this to show the content of the data array in the animation\n\nmutable dataArray = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1657,"value":"md`If you're interested to know about asynchronous and Promise in Javascript and Observable notebook, [here](https://observablehq.com/@observablehq/introduction-to-asynchronous-iteration) is a notebook explaining the concept of asynchronous, and [here](https://observablehq.com/@observablehq/introduction-to-generators) is another notebook explaining the use of \\`await\\` combined with generators.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"md`## Animation without Reconstructing the whole Plot\n\nIn the previous section, we have make an animation by reconstructing the whole plot for each frame, which is very computation intensive. After learned about transition, we can make it in the D3.js way.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":1906,"value":"md`### Pokemon Base Stats t-SNE Animated\n\nMotion is also a channel of visual encoding. In the following plot, we encode the newly added data with motion, see which data point do your eyes follow?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1704,"value":"md`### Don't use timers in Observable notebooks\n\nIn order to create a Jupyter-style environment for Javascript, some compromises had to be made.\n\nBecause of the nature of Javascript timers, re-evaluating the cell containing \\`setTimeout()\\` or \\`setInterval()\\` statements will create a mess. Every time evaluating the cell, it creates new timers, and after a few times, there are many timers triggering all the way. It is like setting new alarm clocks without turning off the previous one; finally you get tens of alarm clocks ringing.\n\nThus, we have to use a less commonly seen pattern in this notebook. Although it looks bizarre at first, after understanding it, it makes a lot of sense. And I (the HKUST team) believe it is the right way to handle asynchronous like animation in our case.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1721,"value":"md`### However, you may need timers in a standalone web page\n\nSo far we are making all this in Observable notebook, if you want to make it in a standalone web page, the \\`yield\\` and \\`await\\` loop will no longer applicable. You may take a look in the code repository of Scott Murray's book on D3.js, here is the [chapter about transition](https://github.com/alignedleft/d3-book/tree/master/chapter_09). Or, you may go to [BlockBuilder](https://blockbuilder.org/search) to find an example that is applicable to your visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2203,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":2316,"value":"md`## Can't get enough of Observable and D3?\n\nCan't blame you, Observable is awesome. As a bonus, here is the Observable notebook explaining how to make a Bar Chart Race, which is likely the most popular graph on the Internet this year:\nhttps://observablehq.com/@d3/bar-chart-race-explained\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1767,"value":"md`## This is (almost) our last tutorial!\n\nWe offer these tutorials only for one purpose, that is your project! We can't wait to see you making your visualizations and show us how cool that is, share with us the story inside the data, tell us what difficulties you have overcome, and finally, how you have enjoyed the whole journey!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"getPokemonPNG = (pokedex) => `https://rawcdn.githack.com/PokeAPI/sprites/f33025ee68fb6a90e5e005902865dd7ba82716e0/sprites/pokemon/${pokedex}.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"vegaEmbed = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W41","stdlib":"1","titling":"auto"} </article></body></html>