background

This article appears in Data Visualization and Graphics

Texture related content was introduced above, and 3D implementation was carried out using WebGL, EMM….. This article can be regarded as a new direction, but also an idea of exploring writing. (According to the needs of the group partners to talk about the daily use of the framework) of course, theoretical knowledge will still be interspersed.

The writing style will be mixed from study (research), use, and in-depth. It’s basically a basic process that I use every day in a library in the hope of helping you.

Before we begin, a brief introduction to today’s protagonist D3JS(D3 for short)

  • D3 full name of data-driven Documents 3 D words are also the origin of its D3 abbreviation (don’t some people use for a long time do not know how this name comes from don’t be a fake powder to sing ~)
  • Advantages of D3:
    1. There is no doubt that Github’s star is close to 98K. So you can imagine that the user community must be complete.
    2. D3 is flexible and the modules can be split and combined.
    3. Excellent design in rendering, focusing on shape and scale primitives. Not the configuration of a specific chart. It’s more flexible
    4. The effects of animation and interaction are excellent.
    5. Support a variety of render modes, SVG,canvas many…
  • The types of charts and chart examples are so comprehensive that daily development probably doesn’t require a composite sample tutorial of the base module in Observable.

Today for how to learn D3, using D3, in-depth D3 to do a shallow discussion. follow me!

This outline

  1. Learning Base stage (Research stage)
  2. Use library phase (daily development phase)
  3. Dive into the library stage (learn about the framework, or new requirements are customized on the framework source code.)

Learning Library (Research Library)

Carry on the investigation from several aspects

  1. First look at whether the library meets the needs of business development and business development
  2. Let’s take a look at the frequency of updates to the library, the stability problem. (Of course, the competent team can also clone a copy of the current version, convenient for subsequent maintenance.)
  3. Is the library community active for follow-up questions (if the team has enough examples, they don’t care about this)
  4. For compatibility with the existing main framework (the main technology stack), this library meets the above points. Should not be a problem (can also be included in the investigation)

Follow the steps aboveD3How do you say

1. First, see whether the library meets the requirements of business development and business development

D3 supports SVG(HTML)/Canvas rendering mode, briefly speaking, some suitable abstract business scenarios

  • Daily chart development rich variety, there are relational classes, statistics, simple map class…
  • SVG rendering is an option for large data volumes but for static class analysis (only loaded once)
  • Canvas rendering can be selected for large amount of data and high-frequency interaction (if there is a large amount of data. Optimizing for interaction, rendering, and even changing rendering methods)
  • Graphics need cool animations before, during, and after rendering.
  • .

Question number two and three, let’s put up some pictures

Commit a situation and issues feedback situation

From the perspective of members and submission curve (you can go to Github to check all the screenshots, and this one is nearly one year old, so there are too few bugs.)

Use library phase (daily development phase)

There are several cases

  1. Examples are readily available and fully meet development requirements
  2. There are no examples available, but you can mix several examples to achieve this effect
  3. Do it yourself using the API and digging into it, and customize it if the library doesn’t meet your needs.

First of all, many people are stuck in condition 1 and condition 2. The reason for this is to put it bluntly at the level of the code porter. Of course, this is more of an in-depth module and knowing what it is is a great advantage. There may be less sharing in this area right now

Take a graph as an example.

There are only a few steps required to achieve the above

  • You need to limit some properties of the canvas, width and height
  • Need to draw two scale, through the data calculation min, Max
  • Need to draw bar graphs, data binding

You need to limit some properties of the canvas, width and height

var  width = 1000;
var  height = 500;
var  margin = ({
	top:20,
	right:0,
	bottom:30,
	left:40
})
const  svg = d3.select("body").append("svg");
Copy the code

Two scale drawings are required.

Var x = d3.scaleband ().domain(data.map(d=>d.name)).range([margin-left, width-margin-right]).padding(0.2) var y = d3.scaleband ().domain(data.map(d=>d.name)).range([margin-left, width-margin-right]).padding(0.2 d3.scaleLinear() .domain([0,d3.max(data,d=>d.value)]).nice() .range([height - margin.bottom,margin.top]) svg.append("g")  .attr("class","x-axis") .attr("transform",`translate(0,${height- margin.bottom})`) .call(d3.axisBottom(x).ticksizeOuter (0)) // Set the X-axis scale svG.append ("g").attr("class"," Y-axis ") .attr("transform", 'translate(${margine.left},0)').call(d3.axisLeft(y)) //y coordinate scaleCopy the code

You need to draw a bar graph

svg.append("g")
	.attr("class","bars")
	.attr("fill","skyblue")
	.selectAll("rect")
	.data(data)
	.join("rect")
	.attr("x",d=>x(d.name))
	.attr("y",d=>y(d.value))
	.attr("width",x.bandwidth())
	.attr("height",d=>y(0) - y(d.value))
Copy the code

The simple example above illustrates your basic flow with D3. First you need to understand how your canvas is limited. And then what do you want you to draw. The second thing is to add the corresponding delta to the data. ** Of course it’s important to learn its syntax to shift your coding thinking. An unstructured programming process. 天安门事件

Dive into the library stage (learn about the framework, or new requirements are customized on the framework source code.)

First of all, without considering customization development, this article will first look at its internal implementation.

Open the D3 repository and read the source code and you will find this situation

  1. D3 – array array
  2. D3 – axis coordinate axis
  3. d3-brush
  4. D3 – color color
  5. .

Actually, this has something to do with its design. The advantage of this is that if you want to do some integration with existing libraries, it’s very easy. This is also the reason for the D3 fire. This article will not break down specific modules to expand. Basically I’m using drag, quadtree and some layout algorithms… Well, not a lot. If you are interested, please leave a comment and write a few articles to discuss how to customize at the bottom.

link

  • D3 Warehouse Address
  • MDN document
  • Sample code repository

The last

About graphics/data visualization, how to learn the direction of the problem, I also belong to groping. Maybe WHEN I finish this series I’ll be able to answer you better.

Please give your comments and comments freely. There is anything I want to share as long as I know or I can learn to share. (Of course, I can’t learn it. I won’t make a fool of myself.)