[Translation] Learn D3 introductory document: Further Topics

Introduction

Following the last one of Learn D3: Interaction

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

text

If you stick to this tutorial from the beginning, take a deep breath and encourage yourself! 🙌 You have covered many areas and have an important understanding of typical visualizations.

But we have not reached the top yet! No, this is just the base camp.

It's time to look up and see what will happen in the future. 🏔

Clean data is a prerequisite for effective data visualization. To experience data collection and cleaning, please read on Wikipedia data tutorial . method for d3 array conversion and aggregation data, including basic summary statistics and the powerful d3.group and d3.rollup . See also Harry Steven's analysis of trend and correlation d3 regression For data aggregation, consider one-dimensional grouping (such as a histogram), two-dimensional hexagons , density contour estimation .

We mentioned the scale before, but the d3 scale also provides many transformations that we did not cover, such as logarithmic scale, power scale, symbolic scale, quantization scale and quantile scale (this is a concise logarithm to Linear scale conversion .) If you choose the conversion that suits your data and problems at hand, your visualization will be more effective! Check out this article on comparison .

We are limited to abstract tabular data, but D3 is also applicable to other types of data. For mesh data, consider the chord diagram or force directed diagram . For hierarchical data, d3-hierarchy implements several popular algorithms, including treemaps and tidy trees . For maps and geospatial visualization, see d3-geo . For time series data, see d3-time .

In order to better control the display of data, D3 provides formatting digital and date basic method (in a desired locale). D3 realizes many color space and scheme .

For animation, explore D3's easing method , interpolator and transition . For interaction, please refer to D3's reusable behavior: drawing , zoom and drag .

You can also embark on various specific topics of Observable. Through promises , generators , views Observable data flow upgraded to the next level. Use invalidate promise to release resources when re-running the unit, or use visibility promise to postpone the calculation of the unit until it is visible.

Don't forget to communicate! When targeting Vega-Lite, this graphic markers and visual coding channel is an excellent introduction to the basics of visualization. Thinking about visualization variables will also help you design better visualization effects in D3. To label the density map, consider Voronoi heuristic or iterative optimization . To display the color coding, use the color legend .

Finally, don't fight alone.

We hope you can share your work on Observable. Practitioners tend to share work only after the work is completed and polished, which makes the practice look more scary than necessary: mistakes, drafts discarded along the way, are invisible. If you are happy to share, Observable is a great way to get feedback and help comments and suggestions (and our forum

As always, thank you for reading. Please 16160d485173fa follow our updates on Twitter and send us your feedback. We also welcome suggestions for future additions to this series.

start now!

Reference

• Learn D3: Further Topics