Skip to content

Commit

Permalink
day two
Browse files Browse the repository at this point in the history
  • Loading branch information
Zipfian Academy authored and Zipfian Academy committed Jun 9, 2014
1 parent 068bac6 commit 0611b04
Show file tree
Hide file tree
Showing 12 changed files with 269 additions and 38 deletions.
39 changes: 27 additions & 12 deletions Exercise 2/exercise2_0.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,15 @@

d3.json("states.json",function(json){
svg.append("g").attr("class","mapGroup");
var states = svg.select(".mapGroup").selectAll(".stateLine").data(json.features);
states.enter().append("path").attr("class","stateLine")
var states = svg.select(".mapGroup")
.selectAll(".stateLine")
.data(json.features);

states.enter()
.append("path")
.attr("class","stateLine")
.attr("d", d3.geo.path());
// .attr("projection", d3.geo.orthographic);

function getCentroid(stateName) {
var stateData;
Expand Down Expand Up @@ -113,19 +119,28 @@
}

function displayData() {
var extent = d3.extent(csv, function(d){ return parseFloat(d[dataPoint]); });
var radius = d3.scale.sqrt()
.domain(extent)
.range([5, 50]);

svg.select(".title").text(dataPoint);

var extent = d3.extent(csv,function(d){
return parseFloat(d[dataPoint]);
});
// console.log(extent);
var radiusScale = d3.scale
.sqrt()
.domain(extent)
.range([3,30]);
var circlePath = d3.geo.path()
.pointRadius(function(d) { return radius(d.radius); });
.pointRadius(function(d){
return radiusScale(d.radius);
})
svg.select(".dotGroup")
.selectAll("path")
.each(function(d){
d.radius = parseFloat(d.dataset[dataPoint])
})
.attr("d",circlePath);
svg.select(".title")
.text(dataPoint);

svg.select(".dotGroup").selectAll("path")
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
.attr("d", circlePath);
}

setupData();
Expand Down
4 changes: 2 additions & 2 deletions Exercise 2/exercise2_1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,15 +108,15 @@
var extent = d3.extent(csv, function(d){ return parseFloat(d[dataPoint]); });
var radius = d3.scale.sqrt()
.domain(extent)
.range([5, 50]);
.range([3, 30]);

svg.select(".title").text(dataPoint);

var circlePath = d3.geo.path()
.pointRadius(function(d) { return radius(d.radius); });

svg.select(".dotGroup").selectAll("path")
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
.attr("d", circlePath);
}

Expand Down
2 changes: 1 addition & 1 deletion Exercise 2/exercise2_2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@

var dotGroup = svg.select(".dotGroup");
dotGroup.selectAll("path")
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
.attr("d", circlePath)
.attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); });

Expand Down
54 changes: 48 additions & 6 deletions Exercise 2/exercise2_3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,20 @@
.stateName {
text-anchor: end;
font-size: 12px;
baseline-shift: -12px;
baseline-shift: -6px;
}
.label {
text-anchor: middle;
font-size: 12px;
display: none;
}
.state:hover .label {
.state:hover .label,
.state.selected .label,
.stateBar:hover .label {
display: block;
}
.stateBar:hover .stateName,
.stateBar.selected .stateName {
display: block;
}
.state path {
Expand Down Expand Up @@ -103,7 +109,10 @@
.text(dataPoint);
var states = svg.append("g").attr("class","dotGroup")
.selectAll(".state").data(csv);
var entering = states.enter().append("g").attr("class","state");
var entering = states.enter().append("g").attr("class","state")
.attr("class",function(d){
return "state " + getClassName(d.State);
});

var centroid;
entering.append("path").datum(function(d) {
Expand Down Expand Up @@ -149,9 +158,19 @@

var dotGroup = svg.select(".dotGroup");
dotGroup.selectAll("path")
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
.attr("d", circlePath)
.attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); });
.attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })
.on("mouseover",function(d){
d3.select(".dotGroup")
.select("."+d3.select(this).attr("class"))
.classed("selected",true);
})
.on("mouseout",function(d){
d3.select(".dotGroup")
.select("."+d3.select(this).attr("class"))
.classed("selected",false);
});

dotGroup.selectAll("text")
.text(function(d){ return d.dataset[dataPoint]; })
Expand All @@ -174,10 +193,23 @@
svg.select(".yAxis").call(yAxis);

var states = svg.select(".barGroup").selectAll(".stateBar").data(csv);
var entering = states.enter().append("g").attr("class","stateBar");
var entering = states.enter().append("g").attr("class","stateBar")
.attr("class",function(d){
return "state " + getClassName(d.State);
});

states.attr("transform",function(d,i){
return "translate("+xPos(i)+","+(scaleHeight(d[dataPoint])+padding)+")";
})
.on("mouseover",function(d){
d3.select(".dotGroup")
.select("."+d3.select(this).attr("class"))
.classed("selected",true);
})
.on("mouseout",function(d){
d3.select(".dotGroup")
.select("."+d3.select(this).attr("class"))
.classed("selected",false);
});

entering.append("rect").attr("width",6);
Expand Down Expand Up @@ -206,6 +238,16 @@
});
}

// regex:
// "South Dakota "
// "south dakota "
// "south dakota"
// "south-dakota"

function getClassName(name){
return name.toLowerCase().replace(/^\s+|\s+$/g, '').replace(/\s+/g, '-');
}

setupData();
displayData();
});
Expand Down
2 changes: 1 addition & 1 deletion Exercise 2/exercise2_4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@

var dotGroup = svg.select(".dotGroup");
dotGroup.selectAll("path")
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
.attr("d", circlePath)
.attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })
.on("mouseenter",function(d){
Expand Down
2 changes: 1 addition & 1 deletion Exercise 2/exercise2_5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@

var dotGroup = svg.select(".dotGroup");
dotGroup.selectAll("path")
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
.transition().duration(1000)
.attr("d", circlePath)
.attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })
Expand Down
33 changes: 28 additions & 5 deletions Exercise 2/exercise2_6.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
.stateName {
text-anchor: end;
font-size: 12px;
baseline-shift: -4px;
baseline-shift: -6px;
display: none;
}
.label {
Expand Down Expand Up @@ -113,7 +113,8 @@
radius: parseFloat(d[dataPoint]),
dataset: d
};
}).attr("fill","#eee");;
}).attr("fill","#eee");

entering.append("text").datum(function(d){
var stateName = d.State.replace(/^\s+|\s+$/g, '');
return {
Expand Down Expand Up @@ -148,16 +149,20 @@

var dotGroup = svg.select(".dotGroup");
dotGroup.selectAll("path")
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
.each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
.transition().duration(1000)
.attr("d", circlePath)
.attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })

dotGroup.selectAll("path")
.on("mouseenter",function(d){
// console.log('hello');
d3.select(".barGroup").select("."+getClassName(d.dataset.State))
.classed("selected",true);
}).on("mouseleave",function(d){
d3.select(this).call(animate);
})
// .on("mouseenter",animate);
.on("mouseleave",function(d){
d3.select(".barGroup").select("."+getClassName(d.dataset.State))
.classed("selected",false);
});
Expand All @@ -171,6 +176,22 @@
updateBarChart();
}

function animate(){
// console.log('hello');
d3.select(this).transition()
.ease("bounce")
.duration(1000)
.("fill",'red')
// .attr("opacity",1.0)
// .each("end",secondanimate);
}
// function secondanimate(){
// d3.select(this).transition()
// .ease("bounce")
// .duration(1000)
// .attr("opacity",0.5);
// }

function updateBarChart() {
var dataMax = d3.max(csv, function(d){ return parseFloat(d[dataPoint]); });
var scaleHeight = d3.scale.linear()
Expand All @@ -188,7 +209,9 @@
return "translate("+xPos(i)+","+(scaleHeight(0)+padding)+")";
});

states.attr("class",function(d){ return "stateBar "+getClassName(d.State); })
states.attr("class",function(d){
return "stateBar "+getClassName(d.State);
})
.transition().duration(1000)
.attr("transform",function(d,i){
return "translate("+xPos(i)+","+(scaleHeight(d[dataPoint])+padding)+")";
Expand Down
30 changes: 23 additions & 7 deletions Exercise 3/exercise3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
cursor: pointer;
}
.button:hover {
background-color: #ff9900;
background-color: #ff0000;
}
.button.selected {
background-color: #ff0099;
Expand Down Expand Up @@ -58,17 +58,33 @@
.triangle .button:nth-child(even).selected {
border-left-color: #000;
}
.outline .button {
background-color: white;
border: 2px solid #999;
color: #999;
font-weight: bold;
}
.outline .button:hover {
background-color: #aa6666;
/*padding: 50px;*/
}
.outline .button.selected {
background-color: #ff0000;
color: #ffffff;
border: 50px solid #ffff00;
/*border-color: #ffff00;*/
}
</style>
</head>
<body>
<div class="pair">
<div class="button">option 1</div>
<div class="button">option 2</div>
<div class="pair outline">
<div class="button">hungry</div>
<div class="button">sleepy</div>
</div>
<div class="pair triangle">
<!-- <div class="pair triangle">
<div class="button"></div>
<div class="button"></div>
</div>
<div class="button"></div>
</div> -->
<script defer>
var button = d3.selectAll(".button");
button.on("click",function(){
Expand Down
39 changes: 36 additions & 3 deletions Exercise 4/exercise4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@
var width = 1200, height = 600;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
// dummy data just to generate the circles
var circleArray = ["a", "b", "c"];
var circleArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

// var colorArray = ['red','blue','green','yellow','orange','cyan']
var circles = svg.selectAll("circle").data(circleArray);
circles.enter().append("circle").attr("r","10").attr("cx","600").attr("cy","300");

Expand All @@ -32,14 +33,46 @@
function animate() {
// most basic transition call, basically auto-animation
circles.transition()
.ease("bounce-in")
.duration(1500)
// .delay(function(d,i){
// return i*200;
// })
.style('fill',function(){
return "hsl(" + Math.random()*100 + "%,20%,50%)";
})
.attr('r',function(){
return 5+Math.random()*50;
})
.attr('')
.attr("cx",function(){ return Math.random()*width; })
.attr("cy",function(){ return Math.random()*height; });
.attr("cy",function(){ return Math.random()*height; })
.each("end",secondanimate);
/*
in addition to animating attributes, play around with:
.ease()
.duration()
.delay()
*/
}
};
function secondanimate() {
// most basic transition call, basically auto-animation
circles.transition()
.ease("bounce-out")
.duration(1500)
// .delay(function(d,i){
// return i*200;
// })
.style('fill',function(){
return "hsl(" + Math.random()*100 + "%,20%,50%)";
})
.attr('r',function(){
return 5+Math.random()*50;
})
.attr('')
.attr("cx",function(){ return Math.random()*width; })
.attr("cy",function(){ return Math.random()*height; })
.each("end",animate);
};
</script>
</body>
Loading

0 comments on commit 0611b04

Please sign in to comment.