curran · October 28, 2025 11:11 · Sep 29, 2020 · Sep 12, 2019 · Dec 7, 2015 · Dec 5, 2015
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
 This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set](https://archive.ics.uci.edu/ml/datasets/Iris), this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)). Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.
 
-The HTML page provides the basic code required to load the data and display it on the page (as JSON) using [D3.js](http://d3js.org/).
+The HTML page provides the basic code required to load the data and display it on the page (as JSON) using [D3.js](http://d3js.org/).
+
+For a more up to date code example with React & D3, see (VizHub: 
+Stylized Scatter Plot)[https://vizhub.com/curran/3d631093c2334030a6b27fa979bb4a0d?edit=files&file=index.js].
diff --git a/README.md b/README.md
@@ -1,9 +1,3 @@
 This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set](https://archive.ics.uci.edu/ml/datasets/Iris), this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)). Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.
 
-The HTML page provides the basic code required to load the data and display it on the page (as JSON) using [D3.js](http://d3js.org/).
-
-Built with [blockbuilder.org](http://blockbuilder.org)
-
-<!-- Start of SimpleHitCounter Code -->
-<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1980294&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>
-<!-- End of SimpleHitCounter Code -->
+The HTML page provides the basic code required to load the data and display it on the page (as JSON) using [D3.js](http://d3js.org/).
diff --git a/iris.json b/iris.json
@@ -4,6 +4,6 @@
     { "name": "sepal_width",  "type": "number", "label": "Sepal Width" },
     { "name": "petal_length", "type": "number", "label": "Petal Length" },
     { "name": "petal_width",  "type": "number", "label": "Petal Width" },
-    { "name": "class",        "type": "string", "label": "Species" }
+    { "name": "species",      "type": "string", "label": "Species" }
   ]
 }
diff --git a/iris.json b/iris.json
@@ -0,0 +1,9 @@
+{
+  "columns": [
+    { "name": "sepal_length", "type": "number", "label": "Sepal Length" },
+    { "name": "sepal_width",  "type": "number", "label": "Sepal Width" },
+    { "name": "petal_length", "type": "number", "label": "Petal Length" },
+    { "name": "petal_width",  "type": "number", "label": "Petal Width" },
+    { "name": "class",        "type": "string", "label": "Species" }
+  ]
+}
diff --git a/README.md b/README.md
@@ -2,4 +2,8 @@ This is the "Iris" dataset. Originally published at [UCI Machine Learning Reposi
 
 The HTML page provides the basic code required to load the data and display it on the page (as JSON) using [D3.js](http://d3js.org/).
 
-Built with [blockbuilder.org](http://blockbuilder.org)
+Built with [blockbuilder.org](http://blockbuilder.org)
+
+<!-- Start of SimpleHitCounter Code -->
+<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1980294&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>
+<!-- End of SimpleHitCounter Code -->
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
-This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set](https://archive.ics.uci.edu/ml/datasets/Iris), this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)).
+This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set](https://archive.ics.uci.edu/ml/datasets/Iris), this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)). Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.
 
-The HTML page provides the basic code required to load the data and display it on the page as JSON.
+The HTML page provides the basic code required to load the data and display it on the page (as JSON) using [D3.js](http://d3js.org/).
 
 Built with [blockbuilder.org](http://blockbuilder.org)
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set](https://archive.ics.uci.edu/ml/datasets/Iris), this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)).
 
+The HTML page provides the basic code required to load the data and display it on the page as JSON.
+
 Built with [blockbuilder.org](http://blockbuilder.org)
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
 
 <body>
   <script>
+
     function render(data){
       d3.select("body")
         .append("pre")
@@ -21,5 +22,6 @@
     }
 
     d3.csv("iris.csv", type, render);
+
   </script>
 </body>
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set], this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)).
+This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set](https://archive.ics.uci.edu/ml/datasets/Iris), this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)).
 
 Built with [blockbuilder.org](http://blockbuilder.org)
diff --git a/index.html b/index.html
@@ -1,31 +1,25 @@
 <!DOCTYPE html>
 <head>
   <meta charset="utf-8">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
-  <style>
-    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
-    svg { width: 100%; height: 100%; }
-  </style>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"></script>
 </head>
 
 <body>
   <script>
-    var margin = {top: 20, right: 10, bottom: 20, left: 10};
-    var width = 960 - margin.left - margin.right;
-    var height = 500 - margin.top - margin.bottom;
-    var svg = d3.select("body").append("svg")
-      .attr("width", width + margin.left + margin.right)
-      .attr("height", height + margin.top + margin.bottom)
-    .append("g")
-      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+    function render(data){
+      d3.select("body")
+        .append("pre")
+        .text(JSON.stringify(data, null, 2));
+    }
 
-    // Feel free to change or delete any of the code you see!
-    svg.append("rect")
-      .attr({x: 100, y: 10, width: width - 200, height: height - 20})
-      .style({ fill: "#a72d1a"})
-      .transition().duration(3000).ease("bounce")
-      .style({ fill: "#5db9e3"})
-
-    console.log("you are now rocking with d3", d3);
+    function type(d){
+      d.sepal_length = +d.sepal_length;
+      d.sepal_width  = +d.sepal_width;
+      d.petal_length = +d.petal_length;
+      d.petal_width  = +d.petal_width;
+      return d;
+    }
+
+    d3.csv("iris.csv", type, render);
   </script>
-</body>
+</body>
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set], this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)).
+
+Built with [blockbuilder.org](http://blockbuilder.org)
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+  <style>
+    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
+    svg { width: 100%; height: 100%; }
+  </style>
+</head>
+
+<body>
+  <script>
+    var margin = {top: 20, right: 10, bottom: 20, left: 10};
+    var width = 960 - margin.left - margin.right;
+    var height = 500 - margin.top - margin.bottom;
+    var svg = d3.select("body").append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    // Feel free to change or delete any of the code you see!
+    svg.append("rect")
+      .attr({x: 100, y: 10, width: width - 200, height: height - 20})
+      .style({ fill: "#a72d1a"})
+      .transition().duration(3000).ease("bounce")
+      .style({ fill: "#5db9e3"})
+
+    console.log("you are now rocking with d3", d3);
+  </script>
+</body>
diff --git a/iris.csv b/iris.csv
@@ -0,0 +1,151 @@
+sepal_length,sepal_width,petal_length,petal_width,species
+5.1,3.5,1.4,0.2,setosa
+4.9,3.0,1.4,0.2,setosa
+4.7,3.2,1.3,0.2,setosa
+4.6,3.1,1.5,0.2,setosa
+5.0,3.6,1.4,0.2,setosa
+5.4,3.9,1.7,0.4,setosa
+4.6,3.4,1.4,0.3,setosa
+5.0,3.4,1.5,0.2,setosa
+4.4,2.9,1.4,0.2,setosa
+4.9,3.1,1.5,0.1,setosa
+5.4,3.7,1.5,0.2,setosa
+4.8,3.4,1.6,0.2,setosa
+4.8,3.0,1.4,0.1,setosa
+4.3,3.0,1.1,0.1,setosa
+5.8,4.0,1.2,0.2,setosa
+5.7,4.4,1.5,0.4,setosa
+5.4,3.9,1.3,0.4,setosa
+5.1,3.5,1.4,0.3,setosa
+5.7,3.8,1.7,0.3,setosa
+5.1,3.8,1.5,0.3,setosa
+5.4,3.4,1.7,0.2,setosa
+5.1,3.7,1.5,0.4,setosa
+4.6,3.6,1.0,0.2,setosa
+5.1,3.3,1.7,0.5,setosa
+4.8,3.4,1.9,0.2,setosa
+5.0,3.0,1.6,0.2,setosa
+5.0,3.4,1.6,0.4,setosa
+5.2,3.5,1.5,0.2,setosa
+5.2,3.4,1.4,0.2,setosa
+4.7,3.2,1.6,0.2,setosa
+4.8,3.1,1.6,0.2,setosa
+5.4,3.4,1.5,0.4,setosa
+5.2,4.1,1.5,0.1,setosa
+5.5,4.2,1.4,0.2,setosa
+4.9,3.1,1.5,0.1,setosa
+5.0,3.2,1.2,0.2,setosa
+5.5,3.5,1.3,0.2,setosa
+4.9,3.1,1.5,0.1,setosa
+4.4,3.0,1.3,0.2,setosa
+5.1,3.4,1.5,0.2,setosa
+5.0,3.5,1.3,0.3,setosa
+4.5,2.3,1.3,0.3,setosa
+4.4,3.2,1.3,0.2,setosa
+5.0,3.5,1.6,0.6,setosa
+5.1,3.8,1.9,0.4,setosa
+4.8,3.0,1.4,0.3,setosa
+5.1,3.8,1.6,0.2,setosa
+4.6,3.2,1.4,0.2,setosa
+5.3,3.7,1.5,0.2,setosa
+5.0,3.3,1.4,0.2,setosa
+7.0,3.2,4.7,1.4,versicolor
+6.4,3.2,4.5,1.5,versicolor
+6.9,3.1,4.9,1.5,versicolor
+5.5,2.3,4.0,1.3,versicolor
+6.5,2.8,4.6,1.5,versicolor
+5.7,2.8,4.5,1.3,versicolor
+6.3,3.3,4.7,1.6,versicolor
+4.9,2.4,3.3,1.0,versicolor
+6.6,2.9,4.6,1.3,versicolor
+5.2,2.7,3.9,1.4,versicolor
+5.0,2.0,3.5,1.0,versicolor
+5.9,3.0,4.2,1.5,versicolor
+6.0,2.2,4.0,1.0,versicolor
+6.1,2.9,4.7,1.4,versicolor
+5.6,2.9,3.6,1.3,versicolor
+6.7,3.1,4.4,1.4,versicolor
+5.6,3.0,4.5,1.5,versicolor
+5.8,2.7,4.1,1.0,versicolor
+6.2,2.2,4.5,1.5,versicolor
+5.6,2.5,3.9,1.1,versicolor
+5.9,3.2,4.8,1.8,versicolor
+6.1,2.8,4.0,1.3,versicolor
+6.3,2.5,4.9,1.5,versicolor
+6.1,2.8,4.7,1.2,versicolor
+6.4,2.9,4.3,1.3,versicolor
+6.6,3.0,4.4,1.4,versicolor
+6.8,2.8,4.8,1.4,versicolor
+6.7,3.0,5.0,1.7,versicolor
+6.0,2.9,4.5,1.5,versicolor
+5.7,2.6,3.5,1.0,versicolor
+5.5,2.4,3.8,1.1,versicolor
+5.5,2.4,3.7,1.0,versicolor
+5.8,2.7,3.9,1.2,versicolor
+6.0,2.7,5.1,1.6,versicolor
+5.4,3.0,4.5,1.5,versicolor
+6.0,3.4,4.5,1.6,versicolor
+6.7,3.1,4.7,1.5,versicolor
+6.3,2.3,4.4,1.3,versicolor
+5.6,3.0,4.1,1.3,versicolor
+5.5,2.5,4.0,1.3,versicolor
+5.5,2.6,4.4,1.2,versicolor
+6.1,3.0,4.6,1.4,versicolor
+5.8,2.6,4.0,1.2,versicolor
+5.0,2.3,3.3,1.0,versicolor
+5.6,2.7,4.2,1.3,versicolor
+5.7,3.0,4.2,1.2,versicolor
+5.7,2.9,4.2,1.3,versicolor
+6.2,2.9,4.3,1.3,versicolor
+5.1,2.5,3.0,1.1,versicolor
+5.7,2.8,4.1,1.3,versicolor
+6.3,3.3,6.0,2.5,virginica
+5.8,2.7,5.1,1.9,virginica
+7.1,3.0,5.9,2.1,virginica
+6.3,2.9,5.6,1.8,virginica
+6.5,3.0,5.8,2.2,virginica
+7.6,3.0,6.6,2.1,virginica
+4.9,2.5,4.5,1.7,virginica
+7.3,2.9,6.3,1.8,virginica
+6.7,2.5,5.8,1.8,virginica
+7.2,3.6,6.1,2.5,virginica
+6.5,3.2,5.1,2.0,virginica
+6.4,2.7,5.3,1.9,virginica
+6.8,3.0,5.5,2.1,virginica
+5.7,2.5,5.0,2.0,virginica
+5.8,2.8,5.1,2.4,virginica
+6.4,3.2,5.3,2.3,virginica
+6.5,3.0,5.5,1.8,virginica
+7.7,3.8,6.7,2.2,virginica
+7.7,2.6,6.9,2.3,virginica
+6.0,2.2,5.0,1.5,virginica
+6.9,3.2,5.7,2.3,virginica
+5.6,2.8,4.9,2.0,virginica
+7.7,2.8,6.7,2.0,virginica
+6.3,2.7,4.9,1.8,virginica
+6.7,3.3,5.7,2.1,virginica
+7.2,3.2,6.0,1.8,virginica
+6.2,2.8,4.8,1.8,virginica
+6.1,3.0,4.9,1.8,virginica
+6.4,2.8,5.6,2.1,virginica
+7.2,3.0,5.8,1.6,virginica
+7.4,2.8,6.1,1.9,virginica
+7.9,3.8,6.4,2.0,virginica
+6.4,2.8,5.6,2.2,virginica
+6.3,2.8,5.1,1.5,virginica
+6.1,2.6,5.6,1.4,virginica
+7.7,3.0,6.1,2.3,virginica
+6.3,3.4,5.6,2.4,virginica
+6.4,3.1,5.5,1.8,virginica
+6.0,3.0,4.8,1.8,virginica
+6.9,3.1,5.4,2.1,virginica
+6.7,3.1,5.6,2.4,virginica
+6.9,3.1,5.1,2.3,virginica
+5.8,2.7,5.1,1.9,virginica
+6.8,3.2,5.9,2.3,virginica
+6.7,3.3,5.7,2.5,virginica
+6.7,3.0,5.2,2.3,virginica
+6.3,2.5,5.0,1.9,virginica
+6.5,3.0,5.2,2.0,virginica
+6.2,3.4,5.4,2.3,virginica
+5.9,3.0,5.1,1.8,virginica
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This is the "Iris" dataset. Originally published at [UCI Machine Learning Repository: Iris Data Set], this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations (for example, [Scatter Plot](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)).

		Built with [blockbuilder.org](http://blockbuilder.org)