Skip to content

Instantly share code, notes, and snippets.

@strangerze

strangerze/IrisData.txt

Last active January 25, 2016 08:08
Show Gist options
  • Save strangerze/ae4da5f7aa209a59d1a9 to your computer and use it in GitHub Desktop.
Save strangerze/ae4da5f7aa209a59d1a9 to your computer and use it in GitHub Desktop.
Download ZIP
Iris Data
Raw
README.md
Raw
index.html
<html>
<head>
<style>
.link {
fill: none;
stroke-opacity:0.3;
stroke-width: 1.5px;
}
.link:hover{
stroke-opacity:1;
stroke-width:2.7px;
}
.highlight{
stroke-opacity:1;
stroke-width:2.7px;
}
.label{
fill-opacity:.7;
}
.label:hover{
fill-opacity:1;
}
.axis {
stroke: #000;
stroke-width: 1.5px;
}
.ticks{
fill: gray;
}
.circle {
fill-opacity: .7;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<p><font size=15>Iris Flower Data Visualization</font></p>
<p><font size=5>--By Zezhen Qiu</font></p>
<script src="script.js"></script>
</body>
</html>
Raw
IrisData.txt
"Sepal Length","Sepal Width","Petal Length","Petal Width","Class"
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
script.js
var width = 960,
height = 550
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
function col_x(i){
return i*200+100;
}
var axis_g=svg.append("g");
for(var i=0;i<4;i++){
axis_g.append("line")
.attr("class", "axis")
.attr("x1", col_x(i))
.attr("x2", col_x(i))
.attr("y1",10)
.attr("y2",490);
}
var control_g=svg.append("g");
var label_g=svg.append("g");
var color = d3.scale.category10();
var linear = d3.scale.linear().range([10, 490]);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Sepal Length:</strong> <span style='color:red'>" + d["Sepal Length"] + "</span><br><strong>Sepal Width:</strong> <span style='color:red'>"+ d["Sepal Width"] + "</span></br><strong>Petal Length:</strong> <span style='color:red'>"+ d["Petal Length"] + "</span></br><strong>Petal Width:</strong> <span style='color:red'>"+ d["Petal Width"] + "</span>";
})
var data_c=svg.append("g");
svg.call(tip);
d3.select(self.frameElement).style("height", "800px");
d3.csv("IrisData.txt", function(error, data) {
if (error) throw error;
var domainByTrait = {},
traits = d3.keys(data[0]).filter(function(d) { return d !== "Class"; }),
n = traits.length;
function highlight(c){
data_c.selectAll("g").filter(function(d){return d["Class"]==c;}).attr("class","highlight");
}
function back(c){
data_c.selectAll("g").filter(function(d){return d["Class"]==c;}).attr("class","link");
}
function choose(c){
data_c.selectAll("g").filter(function(d){return d["Petal Length"]>c.Petal_Length_min && d["Petal Length"]<=c.Petal_Length_max && d["Petal Width"]>c.Petal_Width_min && d["Petal Width"]<=c.Petal_Width_max;}).attr("class","highlight");
}
function unchoose(c){
data_c.selectAll("g").filter(function(d){return d["Petal Length"]>c.Petal_Length_min && d["Petal Length"]<=c.Petal_Length_max && d["Petal Width"]>c.Petal_Width_min && d["Petal Width"]<=c.Petal_Width_max;}).attr("class","link");
}
var classes = d3.scale.ordinal().domain(data.map(function(d){return d["Class"];})).domain();
control_g.selectAll("g")
.data(classes)
.enter()
.append("text")
.attr("class","label")
.attr("x",800)
.attr("y",function(d,i){return 50+50*i;})
.attr("fill",function(d){return color(d);})
.text(function(d){return d;})
.on("mouseover",highlight)
.on("mouseout",back);
var jsonCircles = [
{ "x_axis": 850, "y_axis": 230, "radius": 10, "Petal_Length_min" : 0,"Petal_Length_max" : 7, "Petal_Width_min" : 0, "Petal_Width_max" : 3 ,"color":"white"},
{ "x_axis": 800, "y_axis": 280, "radius": 10, "Petal_Length_min" : 0,"Petal_Length_max" : 1.9, "Petal_Width_min" : 0, "Petal_Width_max" : 3,"color":"blue"},
{ "x_axis": 900, "y_axis": 280, "radius": 10, "Petal_Length_min" : 1.9,"Petal_Length_max" : 7, "Petal_Width_min" : 0, "Petal_Width_max" : 3,"color":"white"},
{ "x_axis": 850, "y_axis": 330, "radius": 10, "Petal_Length_min" : 1.9,"Petal_Length_max" : 7, "Petal_Width_min" : 0, "Petal_Width_max" : 1.7,"color":"white"},
{ "x_axis": 950, "y_axis": 330, "radius": 10, "Petal_Length_min" : 1.9,"Petal_Length_max" : 7, "Petal_Width_min" : 1.7, "Petal_Width_max" : 3,"color":"green"},
{ "x_axis": 800, "y_axis": 380, "radius": 10, "Petal_Length_min" : 1.9,"Petal_Length_max" : 4.9, "Petal_Width_min" : 0, "Petal_Width_max" : 1.7,"color":"orange"},
{ "x_axis": 900, "y_axis": 380, "radius": 10, "Petal_Length_min" : 4.9,"Petal_Length_max" : 7, "Petal_Width_min" : 0, "Petal_Width_max" : 1.7,"color":"green"},];
var circles=control_g.selectAll("circle").data(jsonCircles).enter().append("circle");
var circleAttributes = circles
.attr("cx", function (d) { return d.x_axis; })
.attr("cy", function (d) { return d.y_axis; })
.attr("r", function (d) { return d.radius; })
.attr("fill", function (d) { return d.color; })
.attr("stroke", "black")
.on("mouseover", choose)
.on("mouseout", unchoose)
;
label_g.append("text").attr("fill","black").attr("x",750).attr("y",190).text("Decision Tree:")
label_g.append("text").attr("fill","black").attr("x",750).attr("y",30).text("Class:")
label_g.append("text").attr("fill","black").attr("x",815).attr("y",215).attr("font-size","6px").text("Petal Length");
label_g.append("text").attr("fill","black").attr("x",805).attr("y",245).attr("font-size","6px").text("<=1.9");
label_g.append("text").attr("fill","black").attr("x",870).attr("y",245).attr("font-size","6px").text(">1.9");
label_g.append("text").attr("fill","black").attr("x",865).attr("y",265).attr("font-size","6px").text("Petal Width");
label_g.append("text").attr("fill","black").attr("x",855).attr("y",300).attr("font-size","6px").text("<=1.7");
label_g.append("text").attr("fill","black").attr("x",920).attr("y",300).attr("font-size","6px").text(">1.7");
label_g.append("text").attr("fill","black").attr("x",815).attr("y",315).attr("font-size","6px").text("Petal Length");
label_g.append("text").attr("fill","black").attr("x",805).attr("y",350).attr("font-size","6px").text("<=4.9");
label_g.append("text").attr("fill","black").attr("x",870).attr("y",350).attr("font-size","6px").text(">4.9");
control_g.append("line").attr("class","axis").attr("x1",855).attr("x2",890).attr("y1",235).attr("y2",275);
control_g.append("line").attr("class","axis").attr("x1",845).attr("x2",805).attr("y1",235).attr("y2",275);
control_g.append("line").attr("class","axis").attr("x1",905).attr("x2",945).attr("y1",285).attr("y2",325);
control_g.append("line").attr("class","axis").attr("x1",895).attr("x2",855).attr("y1",285).attr("y2",325);
control_g.append("line").attr("class","axis").attr("x1",855).attr("x2",895).attr("y1",335).attr("y2",375);
control_g.append("line").attr("class","axis").attr("x1",845).attr("x2",805).attr("y1",335).attr("y2",375);
traits.forEach(function(trait,i) {
domainByTrait[trait] = d3.extent(data,function(d){return d[trait];});
linear.domain(domainByTrait[trait]);
axis_g.append("text")
.attr("x",col_x(i)-30)
.attr("y",520)
.text(trait);
var ticks=axis_g.append("g")
.attr("class","ticks");
var lowest=parseFloat(domainByTrait[trait][0]),
highest=parseFloat(domainByTrait[trait][1]),
step=parseFloat(((highest-lowest)/4).toFixed(2));
var t=d3.range(lowest,(highest+step),step);
console.log(t);
ticks.selectAll("text")
.data(t)
.enter()
.append("text")
.attr("x",col_x(i)-30)
.attr("y",function(d){return 500-linear(d.toFixed(1))+5;})
.text(function(d){return d.toFixed(1);});
data_c.selectAll("g")
.data(data)
.enter()
.append("circle")
.attr("cx",col_x(i))
.attr("cy",function(d){ return 500-linear(d[trait]);})
.attr("r", 3)
.style("fill", function(d) { return color(d["Class"]); });
});
data_c.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class","link");
for(var i=0;i<3;i++){
data_c.selectAll("g")
.append("line")
.attr("y1",function(d){linear.domain(domainByTrait[traits[i]]);return 500-linear(d[traits[i]]);})
.attr("y2",function(d){linear.domain(domainByTrait[traits[i+1]]);return 500-linear(d[traits[i+1]]);})
.attr("x1",col_x(i))
.attr("x2",col_x(i+1))
.style("stroke",function(d){return color(d["Class"]);})
.on("mouseover",tip.show)
.on("mouseout",tip.hide);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment