Skip to content

Instantly share code, notes, and snippets.

@alecrajeev

alecrajeev/index.html

Last active January 30, 2016 06:26
Show Gist options
  • Save alecrajeev/33f88e5d1423b47ff30f to your computer and use it in GitHub Desktop.
Save alecrajeev/33f88e5d1423b47ff30f to your computer and use it in GitHub Desktop.
Download ZIP
Iris Data
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Iris Data </title>
<link rel="stylesheet", type="text/css", href="style.css">
</head>
<body>
<div class="top">
<div class="header">Iris Setosa: Sepal Length</div>
</div>
<div class="left">
<div class="leftButtons">
<div>
<input class = "selectorButtons" type="button" name="data-selector" onclick="displayHist(0)" value ="Iris Setosa">
</div>
<!-- &nbsp;
--> <div>
<input class = "selectorButtons" type="button" name="data-selector" onclick="displayHist(1)" value="Iris Versicolor">
</div>
<!-- &nbsp;
--> <div>
<input class = "selectorButtons" type="button" name="data-selector" onclick="displayHist(2)" value="Iris Virginica">
</div>
</div>
<div class="rightButtons">
<div class="dataSelector">
<input type="radio" name="data-selector" checked onclick="changeAttribute(0)">Sepal Length
</div>
<div class="dataSelector">
<input type="radio" name="data-selector" onclick="changeAttribute(1)">Sepal Width
</div>
<div class="dataSelector">
<input type="radio" name="data-selector" onclick="changeAttribute(2)">Petal Length
</div>
<div class="dataSelector">
<input type="radio" name="data-selector" onclick="changeAttribute(3)">Petal Width
</div>
</div>
</div>
<div class="main">
<div class="chart"></div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="iris_script.js"></script>
Raw
iris.csv
sepal_length sepal_width petal_length petal_width type
5.1 3.5 1.4 0.2 Iris-setosa
4.9 3.0 1.4 0.2 Iris-setosa
4.7 3.2 1.3 0.2 Iris-setosa
4.6 3.1 1.5 0.2 Iris-setosa
5.0 3.6 1.4 0.2 Iris-setosa
5.4 3.9 1.7 0.4 Iris-setosa
4.6 3.4 1.4 0.3 Iris-setosa
5.0 3.4 1.5 0.2 Iris-setosa
4.4 2.9 1.4 0.2 Iris-setosa
4.9 3.1 1.5 0.1 Iris-setosa
5.4 3.7 1.5 0.2 Iris-setosa
4.8 3.4 1.6 0.2 Iris-setosa
4.8 3.0 1.4 0.1 Iris-setosa
4.3 3.0 1.1 0.1 Iris-setosa
5.8 4.0 1.2 0.2 Iris-setosa
5.7 4.4 1.5 0.4 Iris-setosa
5.4 3.9 1.3 0.4 Iris-setosa
5.1 3.5 1.4 0.3 Iris-setosa
5.7 3.8 1.7 0.3 Iris-setosa
5.1 3.8 1.5 0.3 Iris-setosa
5.4 3.4 1.7 0.2 Iris-setosa
5.1 3.7 1.5 0.4 Iris-setosa
4.6 3.6 1.0 0.2 Iris-setosa
5.1 3.3 1.7 0.5 Iris-setosa
4.8 3.4 1.9 0.2 Iris-setosa
5.0 3.0 1.6 0.2 Iris-setosa
5.0 3.4 1.6 0.4 Iris-setosa
5.2 3.5 1.5 0.2 Iris-setosa
5.2 3.4 1.4 0.2 Iris-setosa
4.7 3.2 1.6 0.2 Iris-setosa
4.8 3.1 1.6 0.2 Iris-setosa
5.4 3.4 1.5 0.4 Iris-setosa
5.2 4.1 1.5 0.1 Iris-setosa
5.5 4.2 1.4 0.2 Iris-setosa
4.9 3.1 1.5 0.1 Iris-setosa
5.0 3.2 1.2 0.2 Iris-setosa
5.5 3.5 1.3 0.2 Iris-setosa
4.9 3.1 1.5 0.1 Iris-setosa
4.4 3.0 1.3 0.2 Iris-setosa
5.1 3.4 1.5 0.2 Iris-setosa
5.0 3.5 1.3 0.3 Iris-setosa
4.5 2.3 1.3 0.3 Iris-setosa
4.4 3.2 1.3 0.2 Iris-setosa
5.0 3.5 1.6 0.6 Iris-setosa
5.1 3.8 1.9 0.4 Iris-setosa
4.8 3.0 1.4 0.3 Iris-setosa
5.1 3.8 1.6 0.2 Iris-setosa
4.6 3.2 1.4 0.2 Iris-setosa
5.3 3.7 1.5 0.2 Iris-setosa
5.0 3.3 1.4 0.2 Iris-setosa
7.0 3.2 4.7 1.4 Iris-versicolor
6.4 3.2 4.5 1.5 Iris-versicolor
6.9 3.1 4.9 1.5 Iris-versicolor
5.5 2.3 4.0 1.3 Iris-versicolor
6.5 2.8 4.6 1.5 Iris-versicolor
5.7 2.8 4.5 1.3 Iris-versicolor
6.3 3.3 4.7 1.6 Iris-versicolor
4.9 2.4 3.3 1.0 Iris-versicolor
6.6 2.9 4.6 1.3 Iris-versicolor
5.2 2.7 3.9 1.4 Iris-versicolor
5.0 2.0 3.5 1.0 Iris-versicolor
5.9 3.0 4.2 1.5 Iris-versicolor
6.0 2.2 4.0 1.0 Iris-versicolor
6.1 2.9 4.7 1.4 Iris-versicolor
5.6 2.9 3.6 1.3 Iris-versicolor
6.7 3.1 4.4 1.4 Iris-versicolor
5.6 3.0 4.5 1.5 Iris-versicolor
5.8 2.7 4.1 1.0 Iris-versicolor
6.2 2.2 4.5 1.5 Iris-versicolor
5.6 2.5 3.9 1.1 Iris-versicolor
5.9 3.2 4.8 1.8 Iris-versicolor
6.1 2.8 4.0 1.3 Iris-versicolor
6.3 2.5 4.9 1.5 Iris-versicolor
6.1 2.8 4.7 1.2 Iris-versicolor
6.4 2.9 4.3 1.3 Iris-versicolor
6.6 3.0 4.4 1.4 Iris-versicolor
6.8 2.8 4.8 1.4 Iris-versicolor
6.7 3.0 5.0 1.7 Iris-versicolor
6.0 2.9 4.5 1.5 Iris-versicolor
5.7 2.6 3.5 1.0 Iris-versicolor
5.5 2.4 3.8 1.1 Iris-versicolor
5.5 2.4 3.7 1.0 Iris-versicolor
5.8 2.7 3.9 1.2 Iris-versicolor
6.0 2.7 5.1 1.6 Iris-versicolor
5.4 3.0 4.5 1.5 Iris-versicolor
6.0 3.4 4.5 1.6 Iris-versicolor
6.7 3.1 4.7 1.5 Iris-versicolor
6.3 2.3 4.4 1.3 Iris-versicolor
5.6 3.0 4.1 1.3 Iris-versicolor
5.5 2.5 4.0 1.3 Iris-versicolor
5.5 2.6 4.4 1.2 Iris-versicolor
6.1 3.0 4.6 1.4 Iris-versicolor
5.8 2.6 4.0 1.2 Iris-versicolor
5.0 2.3 3.3 1.0 Iris-versicolor
5.6 2.7 4.2 1.3 Iris-versicolor
5.7 3.0 4.2 1.2 Iris-versicolor
5.7 2.9 4.2 1.3 Iris-versicolor
6.2 2.9 4.3 1.3 Iris-versicolor
5.1 2.5 3.0 1.1 Iris-versicolor
5.7 2.8 4.1 1.3 Iris-versicolor
6.3 3.3 6.0 2.5 Iris-virginica
5.8 2.7 5.1 1.9 Iris-virginica
7.1 3.0 5.9 2.1 Iris-virginica
6.3 2.9 5.6 1.8 Iris-virginica
6.5 3.0 5.8 2.2 Iris-virginica
7.6 3.0 6.6 2.1 Iris-virginica
4.9 2.5 4.5 1.7 Iris-virginica
7.3 2.9 6.3 1.8 Iris-virginica
6.7 2.5 5.8 1.8 Iris-virginica
7.2 3.6 6.1 2.5 Iris-virginica
6.5 3.2 5.1 2.0 Iris-virginica
6.4 2.7 5.3 1.9 Iris-virginica
6.8 3.0 5.5 2.1 Iris-virginica
5.7 2.5 5.0 2.0 Iris-virginica
5.8 2.8 5.1 2.4 Iris-virginica
6.4 3.2 5.3 2.3 Iris-virginica
6.5 3.0 5.5 1.8 Iris-virginica
7.7 3.8 6.7 2.2 Iris-virginica
7.7 2.6 6.9 2.3 Iris-virginica
6.0 2.2 5.0 1.5 Iris-virginica
6.9 3.2 5.7 2.3 Iris-virginica
5.6 2.8 4.9 2.0 Iris-virginica
7.7 2.8 6.7 2.0 Iris-virginica
6.3 2.7 4.9 1.8 Iris-virginica
6.7 3.3 5.7 2.1 Iris-virginica
7.2 3.2 6.0 1.8 Iris-virginica
6.2 2.8 4.8 1.8 Iris-virginica
6.1 3.0 4.9 1.8 Iris-virginica
6.4 2.8 5.6 2.1 Iris-virginica
7.2 3.0 5.8 1.6 Iris-virginica
7.4 2.8 6.1 1.9 Iris-virginica
7.9 3.8 6.4 2.0 Iris-virginica
6.4 2.8 5.6 2.2 Iris-virginica
6.3 2.8 5.1 1.5 Iris-virginica
6.1 2.6 5.6 1.4 Iris-virginica
7.7 3.0 6.1 2.3 Iris-virginica
6.3 3.4 5.6 2.4 Iris-virginica
6.4 3.1 5.5 1.8 Iris-virginica
6.0 3.0 4.8 1.8 Iris-virginica
6.9 3.1 5.4 2.1 Iris-virginica
6.7 3.1 5.6 2.4 Iris-virginica
6.9 3.1 5.1 2.3 Iris-virginica
5.8 2.7 5.1 1.9 Iris-virginica
6.8 3.2 5.9 2.3 Iris-virginica
6.7 3.3 5.7 2.5 Iris-virginica
6.7 3.0 5.2 2.3 Iris-virginica
6.3 2.5 5.0 1.9 Iris-virginica
6.5 3.0 5.2 2.0 Iris-virginica
6.2 3.4 5.4 2.3 Iris-virginica
5.9 3.0 5.1 1.8 Iris-virginica
Raw
iris_script.js
// the outline for the histogram code comes from mike bostock, the creator of d3
// http://bl.ocks.org/mbostock/3048450
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select(".chart").append("svg") // data join
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xScale = d3.scale.linear()
.range([0, width]);
var xAxis;
var yScale = d3.scale.linear()
.range([height, 0]);
var attribute_selector = 0; // to select sepal width, petal length etc.
var headerText = "Iris Setosa: Sepal Length";
drawHist = function (i) {}
d3.csv("iris.csv", start)
function start (err, data) {
if (err)
console.error(err);
var nested = d3.nest()
.key(function (d) {return d.type})
.entries(data);
for (j = 0; j < 3; j++) {
nested[j].sepal_length_array = [];
nested[j].sepal_width_array = [];
nested[j].petal_length_array = [];
nested[j].petal_width_array = [];
for (i = 0; i < nested[j].values.length; i++) {
nested[j].sepal_length_array.push(+nested[j].values[i].sepal_length)
nested[j].sepal_width_array.push(+nested[j].values[i].sepal_length)
nested[j].petal_length_array.push(+nested[j].values[i].petal_length)
nested[j].petal_width_array.push(+nested[j].values[i].sepal_length)
}
}
drawHist = function (i) {
headerText = "";
switch (i) {
case 0:
headerText = "Iris Setosa: ";
break;
case 1:
headerText = "Iris Veriscolor: ";
break;
case 2:
headerText = "Iris Virginica: ";
break;
}
var binsData;
switch (attribute_selector) {
case 0:
headerText += "Sepal Length";
xScale.domain(d3.extent(nested[i].sepal_length_array));
binsData = d3.layout.histogram().bins(xScale.ticks(10))(nested[i].sepal_length_array);
break;
case 1:
headerText += "Sepal Width";
xScale.domain(d3.extent(nested[i].sepal_width_array));
binsData = d3.layout.histogram().bins(xScale.ticks(10))(nested[i].sepal_width_array);
break;
case 2:
headerText += "Petal Length";
xScale.domain(d3.extent(nested[i].petal_length_array));
binsData = d3.layout.histogram().bins(xScale.ticks(10))(nested[i].petal_length_array);
break;
case 3:
headerText += "Petal Width";
xScale.domain(d3.extent(nested[i].petal_width_array));
binsData = d3.layout.histogram().bins(xScale.ticks(10))(nested[i].petal_width_array);
break;
}
yScale.domain([0, d3.max(binsData, function(d) { return d.y; })])
var barContent = svg.selectAll(".bar")
.data(binsData)
var barEnter = barContent.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });
barEnter.append("rect")
.attr("x", 1)
.attr("width", 110)
.attr("height", function(d) { return height - yScale(d.y); });
barEnter.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", 50)
.attr("text-anchor", "middle")
.text(function(d) { return d.y; });
var updateSelection = svg.selectAll(".bar")
.transition()
.duration(500)
.attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });
updateSelection.select("rect")
.attr("x", 1)
.attr("width", 110)
.attr("height", function(d) { return height - yScale(d.y); });
barContent.exit()
.transition()
.duration(500)
.style("opacity", "0")
.remove();
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(-height)
.tickPadding(10);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
}
drawHist(0);
}
function changeAttribute(i) {
attribute_selector = i;
}
function displayHist (i) {
switch (i) {
case 0:
drawHist(0);
d3.select(".header").text(headerText);
svg.select(".axis")
.remove()
svg.select(".axis")
.transition()
.duration(250)
.call(xAxis);
break;
case 1:
drawHist(1);
d3.select(".header").text(headerText);
svg.select(".axis")
.remove()
svg.select(".axis")
.transition()
.duration(250)
.call(xAxis);
break;
case 2:
drawHist(2);
d3.select(".header").text(headerText);
svg.select(".axis")
.remove()
svg.select(".axis")
.transition()
.duration(250)
.call(xAxis);
break;
}
}
Raw
style.css
.top {
position: absolute;
left:0; right:0;
height: 40px;
margin-left: 15px;
font-family: 'Helvetica Neue';
font-weight: bold;
}
.left {
position: relative;
left:0; top: 60px; bottom: 0;
width: 150px;
margin-left: 15px;
height: 80px
}
.main {
position: relative;
left: 0px; top:92px; right:0; bottom:0;
}
.leftButtons {
width: 120px;
height: 70px;
display: inline-block;
}
.selectorButtons {
background-color: steelblue;
border-radius: 3px;
border:1px solid black;
font-size:17px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
padding: 3px
}
.rightButtons {
position: relative;
left: 130px;
top: -80px;
}
.header {
font: 30px sans-serif;
font-weight: bold;
}
.chart {
font: 12px sans-serif;
}
.bar rect {
fill: steelblue;
shape-rendering: crispEdges;
}
.bar text {
fill: #fff;
}
.axis path, .axis line {
fill: none;
stroke: 3px #f0f;
shape-rendering: crispEdges;
}
.tick {
stroke: 1px #fff solid;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment