概要 实例 介绍 源码

鸢尾花数据

源文件:index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  5. <link type="text/css" rel="stylesheet" href="style.css"/>
  6. <style type="text/css">
  7. svg {
  8. font-size: 14px;
  9. }
  10. .axis {
  11. shape-rendering: crispEdges;
  12. }
  13. .axis line {
  14. stroke: #ddd;
  15. stroke-width: .5px;
  16. }
  17. .axis path {
  18. display: none;
  19. }
  20. rect.extent {
  21. fill: #000;
  22. fill-opacity: .125;
  23. stroke: #fff;
  24. }
  25. rect.frame {
  26. fill: #fff;
  27. fill-opacity: .7;
  28. stroke: #aaa;
  29. }
  30. circle {
  31. fill: #ccc;
  32. fill-opacity: .5;
  33. }
  34. .legend circle {
  35. fill-opacity: 1;
  36. }
  37. .legend text {
  38. font-size: 18px;
  39. font-style: oblique;
  40. }
  41. .cell text {
  42. pointer-events: none;
  43. }
  44. .setosa {
  45. fill: #800;
  46. }
  47. .versicolor {
  48. fill: #080;
  49. }
  50. .virginica {
  51. fill: #008;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <h2 style="font-size:24px;">
  57. Edgar Anderson’s <i>Iris</i> data set<br>
  58. scatterplot matrix
  59. </h2>
  60. <script type="text/javascript" src="/d3/d3.js"></script>
  61. <script type="text/javascript" src="/d3/d3.csv.js"></script>
  62. <script type="text/javascript">
  63. d3.csv("iris.csv", function(flowers) {
  64. // Size parameters.
  65. var size = 140,
  66. padding = 10,
  67. n = 4,
  68. traits = ["sepal length", "sepal width", "petal length", "petal width"];
  69. // Position scales.
  70. var x = {}, y = {};
  71. traits.forEach(function(trait) {
  72. // Coerce values to numbers.
  73. flowers.forEach(function(d) { d[trait] = +d[trait]; });
  74. var value = function(d) { return d[trait]; },
  75. domain = [d3.min(flowers, value), d3.max(flowers, value)],
  76. range = [padding / 2, size - padding / 2];
  77. x[trait] = d3.scale.linear().domain(domain).range(range);
  78. y[trait] = d3.scale.linear().domain(domain).range(range.reverse());
  79. });
  80. // Axes.
  81. var axis = d3.svg.axis()
  82. .ticks(5)
  83. .tickSize(size * n);
  84. // Brush.
  85. var brush = d3.svg.brush()
  86. .on("brushstart", brushstart)
  87. .on("brush", brush)
  88. .on("brushend", brushend);
  89. // Root panel.
  90. var svg = d3.select("body").append("svg:svg")
  91. .attr("width", 1280)
  92. .attr("height", 800)
  93. .append("svg:g")
  94. .attr("transform", "translate(359.5,69.5)");
  95. // Legend.
  96. var legend = svg.selectAll("g.legend")
  97. .data(["setosa", "versicolor", "virginica"])
  98. .enter().append("svg:g")
  99. .attr("class", "legend")
  100. .attr("transform", function(d, i) { return "translate(-179," + (i * 20 + 594) + ")"; });
  101. legend.append("svg:circle")
  102. .attr("class", String)
  103. .attr("r", 3);
  104. legend.append("svg:text")
  105. .attr("x", 12)
  106. .attr("dy", ".31em")
  107. .text(function(d) { return "Iris " + d; });
  108. // X-axis.
  109. svg.selectAll("g.x.axis")
  110. .data(traits)
  111. .enter().append("svg:g")
  112. .attr("class", "x axis")
  113. .attr("transform", function(d, i) { return "translate(" + i * size + ",0)"; })
  114. .each(function(d) { d3.select(this).call(axis.scale(x[d]).orient("bottom")); });
  115. // Y-axis.
  116. svg.selectAll("g.y.axis")
  117. .data(traits)
  118. .enter().append("svg:g")
  119. .attr("class", "y axis")
  120. .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
  121. .each(function(d) { d3.select(this).call(axis.scale(y[d]).orient("right")); });
  122. // Cell and plot.
  123. var cell = svg.selectAll("g.cell")
  124. .data(cross(traits, traits))
  125. .enter().append("svg:g")
  126. .attr("class", "cell")
  127. .attr("transform", function(d) { return "translate(" + d.i * size + "," + d.j * size + ")"; })
  128. .each(plot);
  129. // Titles for the diagonal.
  130. cell.filter(function(d) { return d.i == d.j; }).append("svg:text")
  131. .attr("x", padding)
  132. .attr("y", padding)
  133. .attr("dy", ".71em")
  134. .text(function(d) { return d.x; });
  135. function plot(p) {
  136. var cell = d3.select(this);
  137. // Plot frame.
  138. cell.append("svg:rect")
  139. .attr("class", "frame")
  140. .attr("x", padding / 2)
  141. .attr("y", padding / 2)
  142. .attr("width", size - padding)
  143. .attr("height", size - padding);
  144. // Plot dots.
  145. cell.selectAll("circle")
  146. .data(flowers)
  147. .enter().append("svg:circle")
  148. .attr("class", function(d) { return d.species; })
  149. .attr("cx", function(d) { return x[p.x](d[p.x]); })
  150. .attr("cy", function(d) { return y[p.y](d[p.y]); })
  151. .attr("r", 3);
  152. // Plot brush.
  153. cell.call(brush.x(x[p.x]).y(y[p.y]));
  154. }
  155. // Clear the previously-active brush, if any.
  156. function brushstart(p) {
  157. if (brush.data !== p) {
  158. cell.call(brush.clear());
  159. brush.x(x[p.x]).y(y[p.y]).data = p;
  160. }
  161. }
  162. // Highlight the selected circles.
  163. function brush(p) {
  164. var e = brush.extent();
  165. svg.selectAll(".cell circle").attr("class", function(d) {
  166. return e[0][0] <= d[p.x] && d[p.x] <= e[1][0]
  167. && e[0][1] <= d[p.y] && d[p.y] <= e[1][1]
  168. ? d.species : null;
  169. });
  170. }
  171. // If the brush is empty, select all circles.
  172. function brushend() {
  173. if (brush.empty()) svg.selectAll(".cell circle").attr("class", function(d) {
  174. return d.species;
  175. });
  176. }
  177. function cross(a, b) {
  178. var c = [], n = a.length, m = b.length, i, j;
  179. for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
  180. return c;
  181. }
  182. });
  183. </script>
  184. </body>
  185. </html>

源文件:style.css

  1. body {
  2. font: 300 36px "Helvetica Neue";
  3. height: 640px;
  4. margin: 80px 160px 80px 160px;
  5. overflow: hidden;
  6. position: relative;
  7. width: 960px;
  8. }
  9. a:link, a:visited {
  10. color: #777;
  11. text-decoration: none;
  12. }
  13. a:hover {
  14. color: #666;
  15. }
  16. blockquote {
  17. margin: 0;
  18. }
  19. blockquote:before {
  20. content: "“";
  21. position: absolute;
  22. left: -.4em;
  23. }
  24. blockquote:after {
  25. content: "”";
  26. position: absolute;
  27. }
  28. body > ul {
  29. margin: 0;
  30. padding: 0;
  31. }
  32. h1 {
  33. font-size: 64px;
  34. }
  35. h1, h2, h3 {
  36. font-weight: inherit;
  37. margin: 0;
  38. }
  39. h2, h3 {
  40. text-align: right;
  41. font-size: inherit;
  42. position: absolute;
  43. bottom: 0;
  44. right: 0;
  45. }
  46. h2 {
  47. font-size: 24px;
  48. position: absolute;
  49. }
  50. h3 {
  51. bottom: -20px;
  52. font-size: 18px;
  53. }
  54. .invert {
  55. background: #1f1f1f;
  56. color: #dcdccc;
  57. }
  58. .invert h2, .invert h3 {
  59. color: #7f9f7f;
  60. }
  61. .string, .regexp {
  62. color: #f39;
  63. }
  64. .keyword {
  65. color: #00c;
  66. }
  67. .comment {
  68. color: #777;
  69. font-style: oblique;
  70. }
  71. .number {
  72. color: #369;
  73. }
  74. .class, .special {
  75. color: #1181B8;
  76. }
  77. body > svg {
  78. position: absolute;
  79. top: -80px;
  80. left: -160px;
  81. }

源文件:iris.csv

  1. species,sepal length,sepal width,petal length,petal width
  2. setosa,5.1,3.5,1.4,0.2
  3. setosa,4.9,3,1.4,0.2
  4. setosa,4.7,3.2,1.3,0.2
  5. setosa,4.6,3.1,1.5,0.2
  6. setosa,5,3.6,1.4,0.2
  7. setosa,5.4,3.9,1.7,0.4
  8. setosa,4.6,3.4,1.4,0.3
  9. setosa,5,3.4,1.5,0.2
  10. setosa,4.4,2.9,1.4,0.2
  11. setosa,4.9,3.1,1.5,0.1
  12. setosa,5.4,3.7,1.5,0.2
  13. setosa,4.8,3.4,1.6,0.2
  14. setosa,4.8,3,1.4,0.1
  15. setosa,4.3,3,1.1,0.1
  16. setosa,5.8,4,1.2,0.2
  17. setosa,5.7,4.4,1.5,0.4
  18. setosa,5.4,3.9,1.3,0.4
  19. setosa,5.1,3.5,1.4,0.3
  20. setosa,5.7,3.8,1.7,0.3
  21. setosa,5.1,3.8,1.5,0.3
  22. setosa,5.4,3.4,1.7,0.2
  23. setosa,5.1,3.7,1.5,0.4
  24. setosa,4.6,3.6,1,0.2
  25. setosa,5.1,3.3,1.7,0.5
  26. setosa,4.8,3.4,1.9,0.2
  27. setosa,5,3,1.6,0.2
  28. setosa,5,3.4,1.6,0.4
  29. setosa,5.2,3.5,1.5,0.2
  30. setosa,5.2,3.4,1.4,0.2
  31. setosa,4.7,3.2,1.6,0.2
  32. setosa,4.8,3.1,1.6,0.2
  33. setosa,5.4,3.4,1.5,0.4
  34. setosa,5.2,4.1,1.5,0.1
  35. setosa,5.5,4.2,1.4,0.2
  36. setosa,4.9,3.1,1.5,0.2
  37. setosa,5,3.2,1.2,0.2
  38. setosa,5.5,3.5,1.3,0.2
  39. setosa,4.9,3.6,1.4,0.1
  40. setosa,4.4,3,1.3,0.2
  41. setosa,5.1,3.4,1.5,0.2
  42. setosa,5,3.5,1.3,0.3
  43. setosa,4.5,2.3,1.3,0.3
  44. setosa,4.4,3.2,1.3,0.2
  45. setosa,5,3.5,1.6,0.6
  46. setosa,5.1,3.8,1.9,0.4
  47. setosa,4.8,3,1.4,0.3
  48. setosa,5.1,3.8,1.6,0.2
  49. setosa,4.6,3.2,1.4,0.2
  50. setosa,5.3,3.7,1.5,0.2
  51. setosa,5,3.3,1.4,0.2
  52. versicolor,7,3.2,4.7,1.4
  53. versicolor,6.4,3.2,4.5,1.5
  54. versicolor,6.9,3.1,4.9,1.5
  55. versicolor,5.5,2.3,4,1.3
  56. versicolor,6.5,2.8,4.6,1.5
  57. versicolor,5.7,2.8,4.5,1.3
  58. versicolor,6.3,3.3,4.7,1.6
  59. versicolor,4.9,2.4,3.3,1
  60. versicolor,6.6,2.9,4.6,1.3
  61. versicolor,5.2,2.7,3.9,1.4
  62. versicolor,5,2,3.5,1
  63. versicolor,5.9,3,4.2,1.5
  64. versicolor,6,2.2,4,1
  65. versicolor,6.1,2.9,4.7,1.4
  66. versicolor,5.6,2.9,3.6,1.3
  67. versicolor,6.7,3.1,4.4,1.4
  68. versicolor,5.6,3,4.5,1.5
  69. versicolor,5.8,2.7,4.1,1
  70. versicolor,6.2,2.2,4.5,1.5
  71. versicolor,5.6,2.5,3.9,1.1
  72. versicolor,5.9,3.2,4.8,1.8
  73. versicolor,6.1,2.8,4,1.3
  74. versicolor,6.3,2.5,4.9,1.5
  75. versicolor,6.1,2.8,4.7,1.2
  76. versicolor,6.4,2.9,4.3,1.3
  77. versicolor,6.6,3,4.4,1.4
  78. versicolor,6.8,2.8,4.8,1.4
  79. versicolor,6.7,3,5,1.7
  80. versicolor,6,2.9,4.5,1.5
  81. versicolor,5.7,2.6,3.5,1
  82. versicolor,5.5,2.4,3.8,1.1
  83. versicolor,5.5,2.4,3.7,1
  84. versicolor,5.8,2.7,3.9,1.2
  85. versicolor,6,2.7,5.1,1.6
  86. versicolor,5.4,3,4.5,1.5
  87. versicolor,6,3.4,4.5,1.6
  88. versicolor,6.7,3.1,4.7,1.5
  89. versicolor,6.3,2.3,4.4,1.3
  90. versicolor,5.6,3,4.1,1.3
  91. versicolor,5.5,2.5,4,1.3
  92. versicolor,5.5,2.6,4.4,1.2
  93. versicolor,6.1,3,4.6,1.4
  94. versicolor,5.8,2.6,4,1.2
  95. versicolor,5,2.3,3.3,1
  96. versicolor,5.6,2.7,4.2,1.3
  97. versicolor,5.7,3,4.2,1.2
  98. versicolor,5.7,2.9,4.2,1.3
  99. versicolor,6.2,2.9,4.3,1.3
  100. versicolor,5.1,2.5,3,1.1
  101. versicolor,5.7,2.8,4.1,1.3
  102. virginica,6.3,3.3,6,2.5
  103. virginica,5.8,2.7,5.1,1.9
  104. virginica,7.1,3,5.9,2.1
  105. virginica,6.3,2.9,5.6,1.8
  106. virginica,6.5,3,5.8,2.2
  107. virginica,7.6,3,6.6,2.1
  108. virginica,4.9,2.5,4.5,1.7
  109. virginica,7.3,2.9,6.3,1.8
  110. virginica,6.7,2.5,5.8,1.8
  111. virginica,7.2,3.6,6.1,2.5
  112. virginica,6.5,3.2,5.1,2
  113. virginica,6.4,2.7,5.3,1.9
  114. virginica,6.8,3,5.5,2.1
  115. virginica,5.7,2.5,5,2
  116. virginica,5.8,2.8,5.1,2.4
  117. virginica,6.4,3.2,5.3,2.3
  118. virginica,6.5,3,5.5,1.8
  119. virginica,7.7,3.8,6.7,2.2
  120. virginica,7.7,2.6,6.9,2.3
  121. virginica,6,2.2,5,1.5
  122. virginica,6.9,3.2,5.7,2.3
  123. virginica,5.6,2.8,4.9,2
  124. virginica,7.7,2.8,6.7,2
  125. virginica,6.3,2.7,4.9,1.8
  126. virginica,6.7,3.3,5.7,2.1
  127. virginica,7.2,3.2,6,1.8
  128. virginica,6.2,2.8,4.8,1.8
  129. virginica,6.1,3,4.9,1.8
  130. virginica,6.4,2.8,5.6,2.1
  131. virginica,7.2,3,5.8,1.6
  132. virginica,7.4,2.8,6.1,1.9
  133. virginica,7.9,3.8,6.4,2
  134. virginica,6.4,2.8,5.6,2.2
  135. virginica,6.3,2.8,5.1,1.5
  136. virginica,6.1,2.6,5.6,1.4
  137. virginica,7.7,3,6.1,2.3
  138. virginica,6.3,3.4,5.6,2.4
  139. virginica,6.4,3.1,5.5,1.8
  140. virginica,6,3,4.8,1.8
  141. virginica,6.9,3.1,5.4,2.1
  142. virginica,6.7,3.1,5.6,2.4
  143. virginica,6.9,3.1,5.1,2.3
  144. virginica,5.8,2.7,5.1,1.9
  145. virginica,6.8,3.2,5.9,2.3
  146. virginica,6.7,3.3,5.7,2.5
  147. virginica,6.7,3,5.2,2.3
  148. virginica,6.3,2.5,5,1.9
  149. virginica,6.5,3,5.2,2
  150. virginica,6.2,3.4,5.4,2.3
  151. virginica,5.9,3,5.1,1.8