D3.js the method of realizing scatter chart and bubble chart _javascript skills

Objective

Small make up has already shared with everybody before "D3.js realizes the method of the histogram to explain" and "D3.js realizes the method of line chart to explain" these two articles, have already introduced the columnar chart and line chart. Here's a say and of these two very similar graphs--scatter and bubble graphs. Friends who are in need can refer to learning.

The realization of scatter plot and bubble chart

Or as before, we first put together a simple drawing frame and added an SVG canvas:

<! DOCTYPE html>
 
 

Scatter charts and bubble charts are different in their presentation, but they are very similar in terms of technology implementation, and are made up of axes and circles.

Scatter chart

The implementation of the axes

To achieve real results, we use different analog data for scatter and bubble charts. As with line charts, the relationship of the coordinates of the points of the scatter graph is continuous in relation to the axes, so both its x and Y axes use linear scales (the difference between the linear scale and the ordinal scale) (see the D3.js method of realizing the histogram).

Analog data var dataset = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6], [170.0, 59.0], [159.1 , 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0 , 50.0], [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8], [159.5, 50.6], [175.0, 82.5], [166 .8, 57.2], [176.5, 87.8], [170.2, 72.8], [174.0, 54.5], [173.0, 59.8], [179.9,], [67.3, 170.5], [67.8, 160.0], [47.0 54.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8], [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [1 61.3, 67.9], [166.4, 56.6], [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3], [167.6-58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8], [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4-46.5], [157.5, 54.3], [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3], [156.0, 52.7], [160.0-74.3] , [163.0, 62.0], [165.7, 73.1], [161.0, 80.0], [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7], [151.1, 48.7], [164. 5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5], [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176]. 2, 67.2], [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8], [163.2, 59.8], [154.5, 49.0], [15 9.8, 50.0], [173.2, 69.2], [170.0, 55.9], [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2], [ 159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4], [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [  168.9, 69.0], [173.2, 58.4], [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2], [166.8-56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0], [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0-45.0] , [163.2, 54.0], [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4], [172.7, 62.0], [155.0-49]. 2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4], [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5], [158.2, 46.4], [15 6.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5], [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [15 9.8, 53.2], [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2], [160.0, 59.5], [168.9, 56.8], [
  165.1, 64.1], [162.6, 50.0], [165.1, 72.3], [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6-84.5],  [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4], [167.6, 65.9], [156.2, 58.6], [175.2-66.8], [172.1, 56.6], [162.6, 58.6], [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8], [177.8-60.0]; ", [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1], [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6], 55.0 ", [165.1, 65.5], [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2], [165.1, 62.7], [168.9], 56 .6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6], [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0,], [53.4, 170.2], [55.0, 162.6], [70.5 67.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0], [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [1 65.1, 80.9], [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1], [161.3, 70.5], [167.6-52.7],
  [167.6, 62.7], [165.1, 86.3], [162.6, 66.4], [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2-57.7], [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5], [167.6, 64.5], [167.6, 72.3], [167.6-61.4]; ", [154.9, 58.2], [162.6, 81.8], [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0], [174.0], 73 .6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9], [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64] .1], [175.3, 63.6], [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8], [176.5, 71.8], [164.4; 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]];
Create an X-axis scale var XScale = d3.scale.linear (). Domain ([140, 190]). Range ([0, Width-padding.left-padding.right]);
Create a Y-axis scale var Yscale = d3.scale.linear (). domain ([n. 0]).
Create x-axis var xaxis = D3.svg.axis (). Scale (XScale). Orient (' bottom ');
Create y-axis var yaxis = D3.svg.axis (). Scale (Yscale). Orient (' left '); Apply the x axis to the corresponding SVG element main.append (' G '). attr (' class ', ' axis '). attr (' transform ', ' translate (0, ' + (height-padding.top-p
Adding.bottom) + '). Call (Xaxis); Apply the y-axis to the corresponding SVG element main.append (' G '). attr (' class ', ' axis '). Call (YAxis);

The same is true for the axes of the line chart, first by d3.scale.linear() creating the scale, then by d3.svg.axis() creating the axis and setting the corresponding scale, and then adding the SVG element and "binding" the axis to it, you can see the finished axis. Note that there is a need for mobile SVG elements to be visually assembled into a coordinate system (but in fact they are fragmented in position and not strongly related).

The realization of the scatter point

The general point in the chart is achieved by drawing a circle, when the radius of the circle is small enough, it is the point.

Add a scatter
main.selectall ('. Point ')
 . Data (DataSet).
 Enter ()
 . Append (' Circle ').
 attr (' class ', ' Point ')
 . attr (' CX ', function (d) {return
  XScale (d[0]);
 })
 . attr (' Cy ', function (d) {return
  Yscale (d[1]);
 attr (' R ', 5);

The same way you add points to a line chart. Select all circles in the main element first "placeholder" (because this is an empty set, except that the collection represents all the circles in main), and then bind the dataset to the collection by enter() and append() Use to add a new circle element until the number of collection elements is the same as the number of dataset child elements. By using scale to calculate the coordinates of each circle and assign values to its related properties, the point of addition is completed. Because the point of scatter plot is a bit more, for the chart is more beautiful, set the circle style.

. Point {
 fill: #2ec7c9;
 fill-opacity:0.5;
}

Finally, the scatter chart grows like this.

Bubble chart

The implementation of the axes

Because only the data structure of the simulation is different, the implementation principle is similar, here will no longer repeat, directly on the code.

Analog Data
var dataset = [
 {x:69, y:45, Weight:5},{x:30, y:37, weight:10},
 {x:43, y:10, weight:23} , {x:54, y:48, weight:41},
 {x:18, y:18, weight:41},{x:88, y:21, weight:32},
 {x:45, y:48, Weight: },{x:14, y:32, Weight:9}, {x:78, y:18, weight:16},{x:13
 , y:45, weight:32}
];
Add x-axis and y-axis
var XScale = d3.scale.linear ()
 . Domain ([0, M])
 . Range ([0, Width-padding.left- Padding.right]);
var Yscale = D3.scale.linear ()
 . Domain ([0, M])
 . Range ([Height-padding.top-padding.bottom, 0]);
var Xaxis = D3.svg.axis ()
 . Scale (XScale)
 . Orient (' bottom ');
var yaxis = D3.svg.axis ()
 . Scale (Yscale)
 

The realization of bubbles

Add Bubble
main.selectall ('. Bubble ')
 . Data (DataSet).
 Enter ()
 . Append (' Circle ').
 attr (' class ', ' Bubble ')
 . attr (' CX ', function (d) {return
  XScale (d.x);
 })
 . attr (' Cy ', function (d) {return
  Yscale (D.Y);
 })
 . attr (' R ', function (d) {return
  d.weight;
 });

The final bubble chart is long like this.

Summarize

The above is the use of d3.js to achieve scatter and bubble map of the entire content, I hope this article for everyone's study and work can help. Small series will be updated on the D3.js article, please continue to pay attention to the cloud habitat community, if there are questions you can message exchange.