D3.js is an HTML/SVG/CSS based data visualization library, which is a very powerful presence in the field.

The problem

  1. What is the best way to present data visualization?
  2. D3 introduction?

What is the best way to present data visualization

Data visualization has a common purpose: to deliver information and knowledge accurately and efficiently, in a concise and comprehensive way. Visualization can transform invisible data phenomena into visible graphic symbols. It can establish connections and associations between complex and seemingly unexplainable data, discover rules and features, and gain insights and values of more commercial value.

D3 use

Load D3, for example:

< script SRC = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js" > < / script >Copy the code

D3 provides a variety of layout algorithms, force layout, tree, organization, etc. We can easily build our own charts through D3

introduce

The plugin uses D3 to manipulate the SVG canvas implementation

The pie chart supports parameters

let cfg = {
    id: '',
    data: null,
    w: 300,
    h: 300,
    margin: {top: 100, right: 100, bottom: 100, left: 100},
    innerRadius:40,
    outerRadius:100,
    scaleX:1,
    scaleY:1,
};
Copy the code

Initialize the pie chart

Let pie = [{axis: "degree", value: 7}, {axis: "integrated", value: 19}, {axis: "risk", the value: 23}, {axis: "consumption", the value: 24}, {axis: "Pressure", the value: 27}, {axis: "compressive 2", the value: 9}, {axis: "compressive 3", the value: 8},]; Chart.pie({ id: '#pie', w: 200, h: 300, data:pie, });Copy the code

Render the complete

Radar map + portrait support parameters

Let CFG = {id: ", data: null, circleData: null, radius: 5, factor: 1, factorLegend: .85, levels: 6, showLevels: 6,// maxValue: 0, radians: 2 * Math.PI, opacityArea: 0.2, ToRight: 5, TranslateX: 80, TranslateY: 80, margin: {top: 100, right: 100, bottom: 100, left: 100}, topAngle: 30 }Copy the code

Supports data formats and constructs charts through chart.radar

let div = '#chart'; Let data = [[{axis: the "degree", the value: 10}, {axis: "integrated", value: 11.6}, {axis: "risk", the value: 11.8}, {axis: "compressive", value: 10}, {12} axis: "consumption", the value:, {axis: "water", the value: 12}, {axis: "vehicle", the value: 10}, {axis: "real estate", value: 12}, {axis: "The performance", the value: 10}, {12} axis: "liabilities", the value:, {axis: "income", the value: 12},]]. Let tempData = [' waner shangguan, 'female' and 'China yangzhou city in jiangsu province', 'the artist', 'hobby painting collection', 'married with children,' millions of wealth ', 'middle class', 'f', 'a son and a woman', 'self-employed', '17800966880', '24 ', '25 ',]; let width = 400, height = 400; Chart.radar({ w: width, h: height, levels: 6, showLevels: 2, data: data, circleData: tempData, id: div });Copy the code

The chart can display two sets of data at the same time, which can greatly save space position for the system of large screen business of data visualization. The parameters are dynamic, and the amount of data can be calculated automatically. The intermediate details are automatically arranged by the number of data, with the Angle =360/ number of data.

Radar diagram + portrait without screenshot

The complete code

Github address: github.com/prettydog/r…