background

This article is featured in data Visualization and Graphics

Above, texture related content and 3D implementation using WebGL, emM….. This article is a new direction, but also a way to explore writing ideas. (According to the needs of the group, the daily use of the framework will be discussed.) Of course, theoretical knowledge will still be inserted.

The writing style will be from study (research), use, in-depth mixing. In fact, IT is my daily use of a (framework) library of the basic process of sharing hope to help you.

Before we begin, a quick introduction to today’s main character D3JS(D3 for short)

  • D3 data-driven Documents 3 words beginning with D are also the origin of its D3 shorthand (don’t use some people for a long time don’t know how the name came from)

  • Advantages of D3:

    1. There’s no denying that Github’s Star is close to 98K. It is conceivable that the user community must be complete.
    2. D3 is flexible, each module can be split and combined.
    3. Excellent design in rendering, focusing on shape,scale and basic primibles. Is not a configuration of a specific chart. It’s more flexible
    4. The animation, the interaction is excellent.
    5. Supports multiple rendering modes, SVG,canvas, many…
  • Chart types, chart examples are so comprehensive that everyday development may not require a combination of sample tutorials on the underlying modules in Observable.

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

This outline

  1. Learning Library Stage (Research stage)
  2. Use the library phase (daily development phase)
  3. Deep library phase (learning the framework or customizing new requirements on the framework source code)

Learning Library (Research Library)

From several aspects of the investigation

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

Follow the steps above to seeD3How do you say

1. First see whether the library meets the business development and business expansion

D3 supports SVG(HTML)/Canvas rendering mode, simply for some abstract business scenarios

  • Daily chart development variety is rich, has the relation class, the statistics class, the simple map class…
  • SVG rendering is an option for data that is large but belongs to static class analysis (only loaded once)
  • Large amount of data and high-frequency interaction can choose Canvas rendering (if the amount of data is huge. From the interaction, rendering and other aspects of optimization and even need to change the rendering method)
  • Graphics need cool animation before, during, and after rendering.
  • .

Question 2 and 3, please post some pictures


A case of commit and issues feedback

From the perspective of the members and the submission curve (the screenshot is not all can go to Github to check and this is nearly a year, may not be correct, there are too few bugs haha)

Use the library phase (daily development phase)

There are several cases

  1. Examples are available and fully meet development requirements
  2. There are no examples available but you can mix and match several examples
  3. Take advantage of your own API usage and research, customizing development when the library does not meet your needs.

First of all, a lot of people are stuck in situations 1 and 2. This reason is to put it bluntly or code haulers level. Of course, this is more of an in-depth module and only knowing what it is can you play to the greater advantage. There may be less sharing of this at the moment

Take a diagram for example.



Just a few steps are needed to implement the figure above

  • You need to limit some properties of the canvas, width and height
  • Two scales need to be drawn to calculate min and Max through data
  • You need to draw a bar graph, 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");

Two scales need to be drawn. 

Var x = 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(${margin-.left},0)').call(d3.axisleft (y)) //

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))

The simple example above reflects the basic process you need to use with D3 first you need to understand how your canvas is limited. And then what do you want to draw. The second is to add the corresponding data.


Of course it’s important to learn the grammar of it and change your coding thinking. Unstructured programming process.

Deep library phase (learning the framework or customizing new requirements on the framework source code)

Instead of thinking about customization first, let’s take a look at its internal implementation.

Open the D3 repository and read the source code

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

Actually, it has something to do with the design. The advantage 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 is not intended to unpack specific modules. Basically, I’m using drag, quadtree, and some layout algorithms… Not a lot. If you are interested, please leave a few posts to write about this “Discussing how to customize at the bottom level”.

link

  • D3 Warehouse Address
  • MDN document
  • Sample code repository

The last

As for graphics/data visualization, how to learn the direction of the problem, I also belong to groping. Maybe I’ll have a better answer when I finish this series.

Please give more advice, not stingy comment. Anything I want to share that I know or that I can learn to share. (Of course, you won’t make a fool of yourself.)