30:T475,html`

Mouse over me

&me

`31:T548,{ const svg = d3.select(DOM.svg(width, height/2)) const data = [[1,3], [2,4], [5,2], [6,3], [3,4], [6,2], [4,5]] const margin = 15 const iter = (i, d) => [ [+d[0][0] + (i/4)*(6 - +d[0][0]), +d[0][1] + (i/4)*(6 - +d[0][1]) ] , ...d.slice(1)] let minigrid = svg.selectAll('minigrid') .data([0,1,2,3,4]) .enter().append('g') .attr('class','minigrid') .attr('transform', d => `translate(${d/5 * width},0)`) const xScale = d3.scaleLinear().domain([0, 7]).range([margin, width/5 - margin]) const yScale = xScale.copy().range([width/5 - margin, margin]) const xAxis = d3.axisBottom(xScale).ticks(4) const yAxis = d3.axisLeft(yScale).ticks(4) minigrid.append("g") .attr('transform',`translate(0,${width/5 - margin})`) .call(xAxis); minigrid.append("g") .attr('transform',`translate(${margin},0)`) .call(yAxis); minigrid.append("text") .attr('transform',`translate(${width/10},${width/5 + margin + 5})`) .style('text-anchor','middle') .style('font-size', 14) .text(d => `t = ${d}`) minigrid.selectAll('.dot') .data((_,i) => iter(i, data)) .enter().append('circle') .attr('class','dot') .attr('r', 3) .attr('cx', d => xScale(d[0])) .attr('cy', d => yScale(d[1])) .attr('fill', (d,i) => color(i)) return svg.node() }32:T57c,{ const svg = d3.select(DOM.svg(width, height/2)) const data = [[1,3], [2,4], [5,2], [6,3], [3,4], [6,2], [4,5]] const margin = 20 const iter = (i, d) => i === 1 ? [6,6] : d let minigrid = svg.append('g') .attr('class','minigrid') const xScale = d3.scaleLinear().domain([0, 7]).range([margin, height/2 - margin]) const yScale = xScale.copy().range([height/2 - margin, margin]) const xAxis = d3.axisBottom(xScale).ticks(4) const yAxis = d3.axisLeft(yScale).ticks(4) minigrid.append("g") .attr('transform',`translate(0,${height/2 - margin})`) .call(xAxis); minigrid.append("g") .attr('transform',`translate(${margin},0)`) .call(yAxis); let dot = minigrid.selectAll('.dot') .data(data) .enter().append('circle') .attr('class','dot') .attr('r', 3) .attr('cx', d => xScale(d[0])) .attr('cy', d => yScale(d[1])) .attr('fill', (d,i) => color(i)) while(true){ yield Promises.tick(2000, svg.node()); dot .transition() .duration(750) .attr('cx', (d,i) => i === 0 ? xScale(iter(1,d)[0]) : xScale(d[0])) .attr('cy', (d,i) => i === 0 ? yScale(iter(1,d)[1]) : yScale(d[1])) .transition() .delay(250) .duration(750) .attr('cx', (d,i) => xScale(d[0])) .attr('cy', (d,i) => yScale(d[1])) } yield svg.node() }33:T669,{ const svg = d3.select(DOM.svg(width, height)) const data = [2,5,8,4,1,3,9,7,6]; const xRange = d3.scaleBand().domain([0,1,2,3,4,5,6,7,8,9]).rangeRound([0,width - 100]).paddingInner(.1) const yRange = d3.scaleLinear().domain([0,10]).range([0,height]) let bar = svg.selectAll('.bar') .data(data) .enter().append('g') .attr('class','bar') bar.append('rect') .attr('x', (_,i) => xRange(i) ) .attr('width', xRange.bandwidth() ) .attr('fill', d => color(d)) .attr('height', d => yRange(d)) .attr('y', d => height - yRange(d)) bar.append('text') .attr('x', (_,i) => xRange(i) + .5*xRange.bandwidth()) .attr('y', d => height - yRange(d) - 2) .style('text-anchor','middle') .style('font-size',12) .text(d => d3.format('.2f')(d)) addButton(svg, () => bar.select('rect').interrupt()) yield svg.node(); while(true){ yield Promises.tick(2000, svg.node()); bar = bar .data(data.map(d => d*Math.random())) .merge(bar) bar.select('rect') .transition() .duration(150) .style('opacity', 0.85) .transition() .duration(1200) .attr('height', d => yRange(d)) .attr('y', d => height - yRange(d)) .transition() .duration(150) .style('opacity', 1) bar.select('text') .transition() .duration(150) .style('opacity',0) .transition() .duration(1200) .attr('y', d => height - yRange(d) - 2) .text(d => d3.format('.2f')(d)) .transition() .duration(150) .style('opacity',1) } }34:T566,line = { const svg = d3.select(DOM.svg(width,height)) const timeScale = d3.scaleTime() .domain(d3.extent(dji, d => d.date)) .range([30, width - 100]) const yC = d3.scaleLinear() .domain([0, d3.max(dji, d => d.close)]) .range([height - 20, 0]) const yV = yC.copy().domain([0, d3.max(dji, d => d.volume)]) const line = d3.line() .x(d => timeScale(d.date)) .y(d => yC(d.close)) const xAxis = d3.axisBottom(timeScale).ticks(4) const yAxis = d3.axisLeft(yC).ticks(4).tickFormat(d3.format(".1s")) addButton(svg, () => { gy.interrupt() path.interrupt() }) let gx = svg.append("g") .attr('transform',`translate(0,${height - 20})`) .call(xAxis); let gy = svg.append("g") .attr('transform','translate(30,0)') .call(yAxis); let path = svg.append("path") .attr('transform','translate(0,0)') .datum(dji) .attr('d',line) .attr('stroke', color.range()[0]) .attr('fill','#fff') while (true) { gy.transition() .duration(1000) .call(yAxis.scale(yV)) .transition() .delay(500) .duration(1000) .call(yAxis.scale(yC)) path.transition() .duration(1000) .attr('d', line.y(d => yV(d.volume))) .transition() .delay(500) .duration(1000) .attr('d', line.y(d => yC(d.close))) yield Promises.tick(3000, svg.node()); } yield svg.node() }35:T676,barsort = { const svg = d3.select(DOM.svg(width, height)) const xA = d3.scaleBand().range([0, width - 100]).padding(0.1) .domain([...alphabet].map(d => d.letter)) const xF = xA.copy() .domain([...alphabet].sort((a,b) => b.frequency - a.frequency).map(d => d.letter)) const yScale = d3.scaleLinear().domain([0, d3.max(alphabet, d => d.frequency)]).range([height - 10,0]) addButton(svg, () => { bar.interrupt(); startTransition(); }) let bar = svg.selectAll('.bar') .data(alphabet, d => d.letter) .enter().append('g') .attr('class','bar') .attr('transform', d => `translate(${xA(d.letter)}, ${yScale(d.frequency)})`) bar.append('rect') .attr('fill', d => color(d.letter)) .attr('height', d => height - 10 - yScale(d.frequency)) .attr('width', xA.bandwidth()) bar.append('text') .attr('y', d => height - 2 - yScale(d.frequency)) .attr('x', .5*xA.bandwidth()) .style('font-size','8px') .style('font-family','Helvetica') .style('text-anchor','middle') .text(d => d.letter) function startTransition(){ bar.transition() .delay((d,i) => i*40) .duration(1000) .on('start', function repeat(d){ d3.active(this) .attr('transform', d => `translate(${xF(d.letter)}, ${yScale(d.frequency)})`) .transition() .duration(1000) .delay(1500) .attr('transform', d => `translate(${xA(d.letter)}, ${yScale(d.frequency)})`) .transition() .delay(1500) .on('start', repeat) }) } startTransition(); yield svg.node() }36:T867,treebar = { const size = "mpg" const svg = d3.select(DOM.svg(width,height)) const root = d3.hierarchy({ children: mtcars }) .sum(d => d[size]) .sort((a,b) => b.value - a.value) const xScale = d3.scaleLinear().domain([0,d3.max(mtcars, d => d[size])]).range([0,width - 100]) const yScale = d3.scaleBand().domain( mtcars .sort((a,b) => b[size] - a[size]) .map(d => d.name) ).rangeRound([0,height]) const treemapFn = d3.treemap() .size([width - 100, height]) .padding(1) .round(true) const t = d3.transition().duration(2000) addButton(svg, () => { node.interrupt(); startTransition(); }); let node = svg.datum(root).selectAll(".node") .data(treemapFn(root).leaves(), d => d.data.name) .enter().append("rect") .attr("class", d => "node") node .attr("fill", d => color(d.data.name)) .attr("transform", d => `translate(${d.x0},${d.y0})`) .attr("width", d => Math.max(0, d.x1 - d.x0) + "px") .attr("height", d => Math.max(0, d.y1 - d.y0) + "px") function startTransition(){ node.transition() .delay(500) .duration(1000) .on('start', function repeat(){ d3.active(this) //bars .attr("transform", d => `translate(${d.x0},${yScale(d.data.name)})`) .attr("height", yScale.bandwidth() + "px") .transition() .duration(1000) .attr("width", d => xScale(d.data[size]) + "px") .attr("transform", d => `translate(0,${yScale(d.data.name)})`) .transition() //tiles .duration(1000) .attr("transform", d => `translate(${d.x0},${yScale(d.data.name)})`) .attr("width", d => Math.max(0, d.x1 - d.x0) + "px") .transition() .duration(1000) .attr("transform", d => `translate(${d.x0},${d.y0})`) .attr("height", d => Math.max(0, d.y1 - d.y0) + "px") .transition() .delay(500) .on('start', repeat) }) } startTransition() yield svg.node() }37:T53a,md`This whimsical graphic transitions between two different *representations* of the same data. In the treemap, each data point is mapped to area of a rectangle, which are positioned from largest in the top left to smallest in the bottom right. In the bar graph, all the rectangles are the same height, value is mapped to width, and they are positioned in vertical order according to value. In between, however, none of these is consistently true. The intermediate states of the graphic are such that if we stopped the transition, it is difficult to interpret the data that each shape represents, or even the shapes' relative sizes and positions. This transition violates the Congruence Principle: "the structure and content of the external representation should correspond to the desired structure and content of the internal representation" (Tversky, Morrison, Betrancourt, 2002). It may seem trivial to say that if you change the mapping of variables to visual elements, the result no longer follows the rules of the original graphic. What makes these interesting is that the broken rules happen within the context of two rule-abiding states, at the start and end of the transition, *of a single graphic*. How numerous or complex would the changes have to be for us to consider that the two states no longer showed the same graphic?`38:T443,md`## Final Thoughts I hope this provides some helpful guidance to both creators and readers of data visualizations. Transitions should add, not detract, from the information richness, aesthetic value, clarity, and accessibility of our work. I set out to present a simple framework for thinking about our use of animated transitions in data visualization, but this cannot tell us whether or when to use them. Transitions where the space between is nonsensical can still be very compelling and beautiful - R2D3's [visual introduction to machine learning](http://www.r2d3.us/visual-intro-to-machine-learning-part-1/) is a good example - or they can be confusing - see Bostock's [Don't Transition Units](https://beta.observablehq.com/@mbostock/dont-transition-units). In future explorations, I plan to write about methods for interpolation, the path a transition takes, and how the path conveys information about the relationship between the start and end states. I also plan to write about interactivity in transitions, and the options for triggers and timing to add to a user's experience.`39:[] 2e:{"title":"The Space Between","cells":[{"id":0,"value":"md`# The Space Between\n## *Understanding animated transitions in data visualization*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Animated transitions are a popular and powerful feature of digital data visualization. They can make a visualization more fun, engaging, and memorable. By revealing information in stages rather than all at once, transitions make visualizations less overwhelming and more informative.\n\nThis visual essay is inspired by the question: What is happening conceptually between the start and end of a transition? I look at reasons for using animated transitions (besides \"it looks cool\") and at the kinds of variables that can be transitioned. I conclude that we can think of animated transitions in two categories: those where the space between the start and end states consists of real/realistic data and grammatically valid states for that visualization, and those where it does not.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Animation with and without data\n\nNot all animation is tied to data. Developers use animation to signal interactivity, create empathy, or amuse the user. The purple button transitions through different angles of rotation, while the green one changes colors and sizes. But these values don't signify anything other than that the element made contact with the mouse.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"md`This essay focuses on animation of transitions that are bound to data: the view changes because a variable in the data or metadata change. For a transition to be meaningful, it must have two states: a start and an end. (The in-between steps are *interpolated*; how we make sense of interpolation is for another time.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"md`## Why Transition?\nIn print media, a visualization might show two states side by side, or a faceted display of each state of a transition, like the pages of a flip book before they are cut and bound. Digital data visualization is **compact**: it can show all of this information in a single graphic, with information stacked on the time dimension rather than revealed all at once in 2-D space.\n\nThe following visualization uses five graphics, while below they are collapsed into a single one which uses transitions, and arguably encodes more information.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"md`An animated transition provides **object constancy**: a user can track a single element and realize that while something has changed, the element represents the same data point before and after; they \"understand the relationship between the current and previous views\" (Heer & Robertson 2007).\" Notice how much easier it is to track the point that moves in this visualization than in the five frames above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"md`A transition **draws attention** to what is different between the states. It \"helps users track where the changes occur and provides context for the change as it happens\" (Fry 2008), while they engaging them to recall the before state as they absorb the real-time changes in front of them (Wilkinson 2005).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"md`## Transition variables\nWhat can we transition between? We can vary *data*: we often see transitions between two values representing the same observation at different times, for example. We can also vary *metadata*: which variables in data are represented on each axis, the order in which the data are displayed, or the categorical variable by which data are nested or grouped. And we can vary *representation*: what type of graph is shown, or what shapes or symbols it contains.\n\nWe will see that data transitions fall into what I will call Category 1, while representation transitions are Category 2, and metadata transitions can be either. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`## Category 1: the space is sensical\n\nIn the first category, the states between the start and end of the transition exhibit two features:\n* Each state is a grammatically correct representation for the graphic\n* Each state shows a plausible, and sometimes real, value for the dataset\n\nGrammatical correctness refers to a set of rules concerning how we map data values to visual symbols in a given graphic (Wilkinson 2005). We can test these criteria by interrupting transitions partway through to see what they look like in their intermediate state.\n\n*Click the yellow button to interrupt the transitions. They will resume automatically.*\n\n### Data transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`In the above graph, we see a series of transitions that reflect changes only in the *data*. The mapping between data and graphic is the same before, after, and throughout the transitions: the heights of the bars always represent numeric values on a continuous scale.\n\nThe data shown at each step of the transition may not be part of the dataset, but they could be. They inherently fall within the range of values in the dataset. They might even reflect reality that was not captured by the data collecton: for instance, a transition between data from January 2017 and January 2018 implicitly passes through a value from July 2017 that happened but is not in this dataset.\n\n### Metadata (pan & zoom) transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"{\n \tlet k = .8;\n\tconst svg = d3.select(DOM.svg(width,height))\n const data = topojson.feature(us, us.objects.states).features\n let path = svg.append('g')\n \t\t.selectAll('path')\n \t\t.data(data)\n \t\t.enter().append('path')\n .attr('fill', (d,i) => color(i))\n .attr('d', d3.geoPath())\n .attr('transform',`translate(-5,-5)scale(.33)`)\n\taddButton(svg, () => path.interrupt())\n\n \tyield svg.node();\n\n \twhile(true){\n yield Promises.tick(2000, svg.node());\n const d = data[Math.round(Math.random()*data.length)]\n const [x,y] = d3.geoPath().centroid(d)\n const [[x0,y0],[x1,y1]] = d3.geoPath().bounds(d)\n k = .8*Math.min(height/(y1-y0), width/(x1-x0))\n path\n .transition()\n .duration(1500)\n .attr(\"transform\", `translate(165,100)scale(${k})translate(${-x},${-y})`)\n \t}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`The transitions in the map do not show changes in the data: the underlying topojson describing the borders of each State remains fixed. Rather, we see changes in *metadata*: the position and scale (i.e., pan and zoom) of the map change.\n\nIn this kind of transition, each intermediate view still shows a section of a map of the United States. Stopping midway through a transition, though it may not display the entirety of any one State, still shows a valid map that reflects underlying data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`## Category 2: the space is nonsensical\nIn the second category, the states of the graphic between the start and end exhibit one or both of the following:\n* A state does not adhere to the grammatical rules of the graphic\n* A state shows data that could not belong to this dataset, or it does not show data at all\n\nIn these cases, one or more of the rules used to define the graphic - which variable corresponds to which visual feature - is violated.\n\n*Click the yellow button to interrupt the transitions. They will resume automatically.*\n\n### Metadata (variable) transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"md`This line graph shows a transition between two different variables, points and volume, that are alternately used as the line's Y value. Both variables are continuous and numeric, so every step of the transition shows a grammatically correct graphic: a trend line over time, the X variable, which doesn't change. \n\nHowever, the transition takes the graphic through states where the data shown are out of the domain for both variables, and where neither unit describes the data.\n\n### Metadata (sort order) transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"md`This bar graph transitions between two different sort orders, another piece of *metadata*. At most steps in the transition, stopping the transition results in an ugly sight: bars overlap with each other and labels are hard to read.\n\nAt the start and end of the transition, a bar's horizontal position corresponds to its sort order according to a particular sorting rule. But many of the positions each bar passes through between the start and end not only do not correspond to any data attribute, but they are not even valid X positions according to the graphic's layout, which provides 26 equally-sized and evenly-distributed slots for each bar.\n\n### Representation (graph type) transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"md`## Works Cited\n* Fry, Ben (2008), Visualizing Data.\n* Heer, Jeffrey & George G. Robertson (2007), Animated Transitions in Statistical Data Graphs.\n* Tversky, Barbara, Julie Bauer Morrison, & Mireille Betrancourt (2002), Animation: can it facilitate?\n* Wilkinson, Leland (2005), The Grammar of Graphics.\n\n### Additional background reading\n* Bostock, Mike (2012), [Working with Transitions](https://bost.ocks.org/mike/transition/).\n* Cairo, Alberto (2013), The Functional Art.\n* Drucker, Johanna (2014), Graphesis.\n* Fisher, Danyel, \"Animation for Visualization: Opportunities and Drawbacks\" in Steele, Julie & Noah Illinsky (2010), Beautiful Visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"addButton = (parent, callback) => {\n let button = parent.append(\"g\")\n .attr('class','button')\n .style('cursor','pointer')\n .attr('transform',`translate(${width - 85},${.5*height - 10})`)\n .on('click', callback)\n button.append('rect')\n .attr('rx',2).attr('ry',2)\n .attr('width',70)\n .attr('height',20)\n .attr('fill','#fc0')\n let text = button.append('text')\n .attr('x',8)\n .attr('y',14)\n .style('font-size',12)\n .text(\"Interrupt\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"dji = require(\"@observablehq/dji\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"alphabet = require(\"@observablehq/alphabet\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"mtcars = require(\"@observablehq/mtcars\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`Created at

. Visit us online, @2nfo, and @2ngrams.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}