概要 实例 介绍 源码

虹膜并行

源文件: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. .foreground path {
  11. fill: none;
  12. stroke-opacity: .5;
  13. stroke-width: 1.5px;
  14. }
  15. .foreground path.fade {
  16. stroke: #000;
  17. stroke-opacity: .05;
  18. }
  19. .legend {
  20. font-size: 18px;
  21. font-style: oblique;
  22. }
  23. .legend line {
  24. stroke-width: 2px;
  25. }
  26. .setosa {
  27. stroke: #800;
  28. }
  29. .versicolor {
  30. stroke: #080;
  31. }
  32. .virginica {
  33. stroke: #008;
  34. }
  35. .brush .extent {
  36. fill-opacity: .3;
  37. stroke: #fff;
  38. shape-rendering: crispEdges;
  39. }
  40. .axis line, .axis path {
  41. fill: none;
  42. stroke: #000;
  43. shape-rendering: crispEdges;
  44. }
  45. .axis text {
  46. text-shadow: 0 1px 0 #fff;
  47. cursor: move;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <h2>
  53. Edgar Anderson’s <i>Iris</i> data set<br>
  54. parallel coordinates
  55. </h2>
  56. <script type="text/javascript" src="/d3/d3.js"></script>
  57. <script type="text/javascript" src="/d3/d3.csv.js"></script>
  58. <script type="text/javascript">
  59. var species = ["setosa", "versicolor", "virginica"],
  60. traits = ["sepal length", "petal length", "sepal width", "petal width"];
  61. var m = [80, 160, 200, 160],
  62. w = 1280 - m[1] - m[3],
  63. h = 800 - m[0] - m[2];
  64. var x = d3.scale.ordinal().domain(traits).rangePoints([0, w]),
  65. y = {};
  66. var line = d3.svg.line(),
  67. axis = d3.svg.axis().orient("left"),
  68. foreground;
  69. var svg = d3.select("body").append("svg:svg")
  70. .attr("width", w + m[1] + m[3])
  71. .attr("height", h + m[0] + m[2])
  72. .append("svg:g")
  73. .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  74. d3.csv("iris.csv", function(flowers) {
  75. // Create a scale and brush for each trait.
  76. traits.forEach(function(d) {
  77. // Coerce values to numbers.
  78. flowers.forEach(function(p) { p[d] = +p[d]; });
  79. y[d] = d3.scale.linear()
  80. .domain(d3.extent(flowers, function(p) { return p[d]; }))
  81. .range([h, 0]);
  82. y[d].brush = d3.svg.brush()
  83. .y(y[d])
  84. .on("brush", brush);
  85. });
  86. // Add a legend.
  87. var legend = svg.selectAll("g.legend")
  88. .data(species)
  89. .enter().append("svg:g")
  90. .attr("class", "legend")
  91. .attr("transform", function(d, i) { return "translate(0," + (i * 20 + 584) + ")"; });
  92. legend.append("svg:line")
  93. .attr("class", String)
  94. .attr("x2", 8);
  95. legend.append("svg:text")
  96. .attr("x", 12)
  97. .attr("dy", ".31em")
  98. .text(function(d) { return "Iris " + d; });
  99. // Add foreground lines.
  100. foreground = svg.append("svg:g")
  101. .attr("class", "foreground")
  102. .selectAll("path")
  103. .data(flowers)
  104. .enter().append("svg:path")
  105. .attr("d", path)
  106. .attr("class", function(d) { return d.species; });
  107. // Add a group element for each trait.
  108. var g = svg.selectAll(".trait")
  109. .data(traits)
  110. .enter().append("svg:g")
  111. .attr("class", "trait")
  112. .attr("transform", function(d) { return "translate(" + x(d) + ")"; })
  113. .call(d3.behavior.drag()
  114. .origin(function(d) { return {x: x(d)}; })
  115. .on("dragstart", dragstart)
  116. .on("drag", drag)
  117. .on("dragend", dragend));
  118. // Add an axis and title.
  119. g.append("svg:g")
  120. .attr("class", "axis")
  121. .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
  122. .append("svg:text")
  123. .attr("text-anchor", "middle")
  124. .attr("y", -9)
  125. .text(String);
  126. // Add a brush for each axis.
  127. g.append("svg:g")
  128. .attr("class", "brush")
  129. .each(function(d) { d3.select(this).call(y[d].brush); })
  130. .selectAll("rect")
  131. .attr("x", -8)
  132. .attr("width", 16);
  133. function dragstart(d) {
  134. i = traits.indexOf(d);
  135. }
  136. function drag(d) {
  137. x.range()[i] = d3.event.x;
  138. traits.sort(function(a, b) { return x(a) - x(b); });
  139. g.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
  140. foreground.attr("d", path);
  141. }
  142. function dragend(d) {
  143. x.domain(traits).rangePoints([0, w]);
  144. var t = d3.transition().duration(500);
  145. t.selectAll(".trait").attr("transform", function(d) { return "translate(" + x(d) + ")"; });
  146. t.selectAll(".foreground path").attr("d", path);
  147. }
  148. });
  149. // Returns the path for a given data point.
  150. function path(d) {
  151. return line(traits.map(function(p) { return [x(p), y[p](d[p])]; }));
  152. }
  153. // Handles a brush event, toggling the display of foreground lines.
  154. function brush() {
  155. var actives = traits.filter(function(p) { return !y[p].brush.empty(); }),
  156. extents = actives.map(function(p) { return y[p].brush.extent(); });
  157. foreground.classed("fade", function(d) {
  158. return !actives.every(function(p, i) {
  159. return extents[i][0] <= d[p] && d[p] <= extents[i][1];
  160. });
  161. });
  162. }
  163. </script>
  164. </body>
  165. </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