Learn data visualization through D3 documents

Notion of the original manuscript

preface

Echarts’ documentation is like powerpoint, and it’s exciting.

The D3 document is like a blackboard full of mathematical formulas, many people are attracted, many people are directly persuaded to quit.

This makes D3 always in the “zhong Wuyan” position.

D3 – Getting Started documentation

The official documentation

Official D3 document: D3 / D3
This is the best learning resource, you can copy and paste from here to get started with Observable/Observable quickly

Chinese translation

-d3js: Data-driven documents

The third party

Data Visualization tutorial: freeCodeCamp offers a number of interactive workshops to help people who are interested in computing learn how to program for free. FreeCodeCamp.org teaches data visualization
Awesome – D3: If you want to know something about technology, just go to Github and search for “awesome- XXX “. You’ll find lots of interesting things
To explore the d3:This is the above site for the 👆 open source project to help you search more quickly and visuallyd3-discovery.net

In the following paragraphs, I explore the “secrets” of D3 as a beginner in document-oriented development

Overview of D3-API

Highly modular

throughnpm info d3Find the version information and dependency composition of D3 in the NPM library. As you can see, version 7.0 was released last month, and 30 of the dependencies are submodules that D3 maintains itself. Personal Statistics, the core library, now has at least 550 API methods or constant values mounted in its global namespace, and is highly modular internally.

API module display

I made a D3 API visualization by referring to d3.pack. D3 modules vue (📦 codepen)

D3 – Get the data

When we do data visualization, what’s the first thing we do?

That’s right, getting the data.

There are many ways to get data on the front end

Hard-coding directly into the program, such as declaring a variable for a JSON structure, or mocking data
By calling the back-end interface, the back-end returns the processed data from the database to the front end
Direct reading data from static file (json, missing, XML, SVG, image, TXT, buffer, blob)

d3-fetch

D3-fetch is a small module that encapsulates the native FETCH function in a simple way to read data from static text files.

json

JSON (JavaScript Object Notation) is the most commonly used back-end data interchange format. It is flexible, readable, and supports nested structures. D3 – fetch JSON (📦 codepen)

Delimiter-Separated Values (DSV) Text of the Delimiter value. This text format mimics the table structure in a database. The first row of data is used to define the columns of the table, and the rest of the rows are used to represent data.

d3/d3-fetch

Common DSV format text is CSV (comma delimited value) and TSV (TAB delimited value). D3. DSV also supports specifying additional separators to load and parse data in JSON format. Based on the d3. DSV method, d3-FETCH provides separate d3. CSV and d3. TSV methods.

The parsing of DSV files, by the way, relies on another d3 module, d3-DSV. This also reflects d3’s highly modular design philosophy.

other

In addition to JSON and DSV formats, d3-FETCH provides loading methods for SVG, Image, blob, buffer, and XML. They’re simple, each about 10 lines of code, and they basically take two parameters, a URL and a configuration parameter for fetch, and return a Promise.

application

D3-fetch is small and exquisite, sufficient for simple business scenarios. Sometimes, however, the problem is that it is too small to handle situations where production requests have special requirements (such as timeout handling, interceptors, cancellation requests, etc.), and it is better to encapsulate XHR yourself or opt for a professional Ajax library.

D3 – Processing data

Now we have the first data, but often need to be processed, some deformation and screening of the data, to make a visual data structure. D3-array is one such module.

As an aside 🔕 Complex and expensive data algorithms: Expensive data processing should be done before the data is given to the front end, because it will slow down or even overwhelm the user’s browsing device. You can’t imagine how low the user’s device performance is.

d3-array

Basic mathematical statistics

The basic math here is elementary school math, and it’s easy to understand.

D3.max (), d3.min(),d3.extent(), d3.mean(), d3.median(), d3.quantile(), d3.variance(), and d3.deviation() are common mathematical treatment functions. Obtain the maximum value, minimum value, range, mean, median, quantile, variance, and deviation (the arithmetic square root of variance) in the array, respectively. D3 – array (📦 codepen)

Each of the basic mathematical statistics functions above supports an additional “accessor” function, similar to array. map, to extract values from an Array of objects.

Processing array order

D3-array also provides a number of ways to get the index of a specified element’s position in the array according to specific rules.

- Least, d3.leastIndex 🆚 d3.greatest, d3.greatestIndex
  
  These two pairs of functions complement each other, so it’s enough to understand one pair. Say d3.least, which returns the smallest element in the array, and d3.leastindex returns the index of the smallest element in the array.
- d3.bisectA series of
Bisect stands for dichotomy. The d3.bisect method takes a sorted array, along with a number, and returns the appropriate insertion of that number into the array.

d3.ascending 和 d3.descending

This is a pair of comparator functions that are passed to the array. sort method to handle sorting Array elements. They are also simple to implement

function ascending(a, b) {
  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}

function descending(a, b) {
  return a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
}
Copy the code

But at the end of the day, still need to master JS built-in array methods, these methods can handle more than 80% of the problem.

Data conversion

Array conversion goes into the mathematical realm of “linear algebra” and “determinants”. Like these:

- Specifies a key in the array to be grouped with: d3.group() returns a grouped Map element, and d3.rollup() returns the index of the Map element.
- Returns the Cartesian product of two arrays:d3.cross() ，Accept two arrays as a collection, which is easy to understand by looking at the following example of playing cards
- Rearrange: **d3.permute(), ** You can sort arrays by index, or objects by key
- Scramble the array:d3.shuffle()Follow the cross example above to implement the shuffle
- Create an arithmetic sequence: d3.range(). This is often used when making scale axes or scales
- The ranks of matrix transpose: d3. Zip (), receive multiple array parameters [[1, 2], [3, 4]] = > [[1, 3], [2, 4]] [[1, 2], [3, 4]] = > [[1, 3], [2, 4]] [[1, 2], [3, 4]] = > [[1, 3], [2, 4]]

The random number

Sometimes data visualization may require some random element – for example, if you want to generate some test data. D3-random provides many more ways to generate random factors than Math.random.

D3 – Manipulating the DOM

DOM (Document Object Model) is a tree of elements on a web page.

The D3 name is short for data-driven Documents, or data-driven Documents. D3 is a contemporary of jQuery, when the native DOM API didn’t have querySelector or querySelectorAll. If you want to select a document, you need to remember the long getXXXbyYYY API. Don’t understand them 🥱), this is a very painful thing, this time D3-Selection hero appeared.

d3-selection

The d3-Selection module provides a d3.select() method against the native document.querySelector().

The native API returns the selected element itself, whereas d3.select creates a selection object that binds helper functions to the first matched element.

Module also provides a d3. SelectAll () method, to mark the original document. The querySelectorAll (). SelectAll. It still returns a selection object, but its helper works on all the selected elements.

This is what happens when you use D3-Selection to operate on the DOM, you get rid of all the selectors, you get rid of the body of the loop, and this is the original data-driven, chained calls are cool.

import * as d3Selection from "https://cdn.skypack.dev/[email protected]";

const scope = d3Selection.select("#demo");

scope
  .select(".demo__button")
  // Supports multiple events
  .on("touch click".() = > {
    const paragraph = scope.select("p");
    const array = [1.2.3.4.5];
    paragraph
      .style("color"."cornflowerblue")
      .style("font-style"."italic")
      .style("font-weight"."bold")
      .selectAll("span")
      .data(array)
      .enter()
      .append("span")
      .text((d) = > d);

    setTimeout(() = > {
      const newArray = ["You"."Good"."The world"."World"];
      paragraph
        .style("color"."tomato")
        .selectAll("span")
        .data(newArray)
        .text((d) = > d)
        .exit()
        .remove();
    }, 2000);
  });
Copy the code

D3 selection object

A selection object that is generated after a call to select or selectAll and provides a list of methods that can be chain-called.

Handle DOM events:.on() &.dispatch() Listen for events & publish events d3.pointer() & d3.touch() Two functions can receive JS event objects and return touch event objects for mobile event compatibility
Handle dom properties:.attr() &.style() &.property()
Processing the DOM content:.text() &.html()
Handle dom sorting:.sort() &.order () &.raise () &.lower ()
Handling dom action:.transition()

Ushering in a new era

As an aside, the design of selectors in D3 and jQuery changed the rules of the game and gradually became a DOM standard. Looking at the Web Components standards, I seem to see the final destination of the THREE r-V-A frameworks at 🤔.

Now is the home of virtual DOM, d3-Selection’s use is also somewhat weak, many scenarios JSX and VUE template syntax, use will be more convenient and intuitive. It’s up to you, you use it or you don’t, it’s there, it’s there.

To be continued TODO

I still have some space left, but I’ll add to that later, since I’m still working with Notion as I look through the documents