[Translation] Learn D3 introductory document: Interaction

Introduction

Following the Learn D3: Joins , it is only an English translation. The part of the code that can be modified is replaced with a static picture. If you want to interact in real time, please read the original text.

• Original: Learn D3: Interaction
• Version: Published Mar 24, 2020
• Origin
• My GitHub

text

There is almost always too much information that cannot be reasonably "accommodated" in the chart. Therefore, design is not just how show something on 161579a0a8c05c, but based on what we think is important to the imaginary reader, we decide what and what not to show.

Thanks to the computer, real readers now have a say: charts can be customized according to the reader's interest.

However, this power is a double-edged sword. Interactivity allows readers to discover more information, but forces readers to participate in interaction. If we are not careful, we may hide important insights behind controls that readers never click.

If our purpose is to convey known information, we should design an effective static chart before considering interaction. On the other hand, if we try to explore the unknown, the interaction can be faster than coding a new chart (but also consider visual syntax exploration, such as Vega Lite )!

For a better interactive guide, please refer to Ben Shneiderman's information-seeking mantra :

Overview first,zoom and filter,then details on demand.

overview is the initial form of the chart. Its purpose is not to display all the data (which is impossible), but to provide a "macro" view of all the data. Overview is to guide readers to explore.

zooming and filtering is a method of selecting the content of the subject of interest. We have seen the control to crop the chart to each year before; there are freely zoomed forms , translation and focus + context . If we compare multiple time series, we may need to filter multi-line chart example See also dot matrix .

details on demand allows readers to extract precise values from graphs, not limited to visual approximations. This can be as simple as a mouse prompt.

One method of mouse hints is to add title elements in SVG without restriction. Hover the mouse (and wait for a while) to see the Apple stock price for a certain day below.

In the figure above, 1260 invisible rectangular elements run through the chart vertically and horizontally across adjacent data points ( d3.pairs ). When the mouse hovers over the rectangle, the text of the subtitle element will be displayed. Therefore, the prompt information is displayed as a function of the position of the x y as the dependent variable.

A more general approach is to Voronoi over , where the data point closest to the mouse is determined to be an information prompt (for clarity, the Voronoi diagram is drawn below... and because it looks cool. You usually don't show it.)

Local mouse prompts have several disadvantages: their display speed is slow; mobile browsers do not support them; and it is not always obvious which data point is associated with the prompt information, especially when using Voronoi diagrams.

However, with a little more work, we can customize the mouse prompts.

The order of the elements here is important: SVG does not support the z order, so if you want to draw the information prompt on the line and axis, it must be the last one.

Although local mouse prompts are automatically displayed, custom information prompts usually require event monitoring. When the user performs an operation (such as moving the mouse over an element), the browser will call these functions. The listener above captures the data in the closure ( a and b ) to understand what is displayed when the event is triggered.

(We use Object.assign because the HTML template text of Observable does not currently support event listeners as attributes. Our updated hyperscript literal does support event listeners, so please consider using it. We plan to upgrade in the near future Standard library.)

The custom information prompt is implemented in the following class. It provides the tooltip .node attribute (SVG g element) tooltip .show and tooltip .hide methods to update the tooltip as needed. This provides a certain degree of flexibility for the triggering of information prompts.

The above chart uses Observable HTML template text, but we can implement the same chart in D3 style. Use what you like!

mouseover event triggered information prompts can be costly: they require a separate element for each hoverable area of the chart. For complex charts, you can improve performance by calculating the content hovering on demand.

For one-dimensional sorted data (such as our time series data here), a particularly efficient method is binary search mousemove event is triggered.

Binary search method will return the mouse to the left of the data points immediately, but for the purpose of interaction, from mouse to find the best nearest data points (along the X- ). Therefore, the following function first bisects the specified date, and then checks whether the following data points are closer.

All the above examples demonstrate the local interaction: interaction with the chart only affects the chart itself. One of the most exciting aspects of Observable is that the responsiveness of the language level makes it easy for the interaction in one unit to spread to any other unit in the notebook, thereby achieving global interaction!

Most of the interactive controls in Observable are implemented view To create a view, define the viewof unit that returns the HTML input element. Then, the real-time value of the input will be provided to the rest of the notebook.

For example, here is a number controlled by a range input.

Similarly, there is a text input that displays its value as you type, and a drop-down menu to select one of multiple fixed options.

(Remember when we saw the animation generator? These views also involve the generator: when you use the viewof operator, Observable implicitly creates a asynchronous input generator , whenever you interact with the view Time, it will generate a new value.)

But views are not limited to HTML input, they can be anything! The only requirement is that the view provides a value attribute and triggers the input event when the value changes.

Even charts can be views. The following chart triggers synthetic input event when the mouse moves.

Thanks to the Observable community, there are many customized inputs that can be reused. For various useful options, see Jeremy's inputs bazaar . Or for animation, consider a scrubber .

In this tutorial, we took a quick look at various interactive technologies, including mouse prompts, event listeners, Voronoi overlays, and views, but there are still many things we haven't covered! First of all, we didn't even mention the reusable behavior of D3: brushing , zooming , dragging . (For self-directed learning, please find examples Gallery and Collection

In fact, now that we have covered the basics, it is time to go back and think about how to go next.

Next

appendix

For more information about interaction, read Gregor Aisch's defense of interactive graphics .

Attached

According to the source code, the platform dependency is removed, and the main code is extracted. The following examples are shown:

• Example 1
• example 2
• example 3
• Example 4

Reference

• Learn D3: Interaction