Skip to content

Commit

Permalink
commit first day
Browse files Browse the repository at this point in the history
  • Loading branch information
Zipfian Academy authored and Zipfian Academy committed Jun 7, 2014
0 parents commit 068bac6
Show file tree
Hide file tree
Showing 33 changed files with 2,989 additions and 0 deletions.
Binary file added Exercise 1/.DS_Store
Binary file not shown.
123 changes: 123 additions & 0 deletions Exercise 1/chart_final.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<head>
<script src="d3.min.js"></script>
<style>
body {
font-family: Helvetica;
}
svg {
background-color: #eee;
display: block;
}
.title {
font-size: 20px;
text-anchor: middle;
}
.stateName {
text-anchor: end;
font-size: 12px;
baseline-shift: -12px;
}
.label {
text-anchor: middle;
font-size: 12px;
baseline-shift: 5px;
display: none;
}
.state:hover .label {
display: block;
}
.state:hover rect {
opacity: .5;
}
.button {
display: inline-block;
background-color: black;
color: white;
cursor: pointer;
padding: 5px 10px;
}
</style>
</head>
<body>
<script defer>
var width = 1200, height = 500, padding = 50;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

d3.csv("crime_each.csv",function(csv){

var dataTitles = ["Murder","Robbery","Aggravated Assault","Burglary","Motor Vehicle Theft"];
var dataPoint = dataTitles[Math.floor(Math.random()*5)];

var button = d3.select("body").insert("div","svg")
.attr("class","button").text("randomize")
.on("click",function(){
dataPoint = dataTitles[Math.floor(Math.random()*5)];
displayData();
});

var yAxis = d3.svg.axis();
var xPos = d3.scale.linear().domain([0,csv.length-1]).range([padding*2, width-padding*2]);

function setupData() {
var dataMax = d3.max(csv, function(d){ return parseFloat(d[dataPoint]); });
var scaleHeight = d3.scale.linear()
.domain([0, dataMax]).range([height-3*padding,0]);

svg.append("text").attr("class","title")
.attr("x",width/2).attr("y",padding)
.text(dataPoint);

yAxis.scale(scaleHeight).orient("left");
svg.append("g").attr("class","yAxis")
.attr("transform","translate("+(2*padding-5)+","+padding+")").call(yAxis);
}

function displayData() {
var dataMax = d3.max(csv, function(d){ return parseFloat(d[dataPoint]); });
var scaleHeight = d3.scale.linear()
.domain([0, dataMax]).range([height-3*padding,0]);

var colorScale = d3.scale.linear().domain([0,dataMax]).range(["#ff9900","#ff0099"]);

svg.select(".title").text(dataPoint);
yAxis.scale(scaleHeight)
svg.select(".yAxis").call(yAxis);

var states = svg.selectAll(".state").data(csv);
var entering = states.enter().append("g").attr("class","state");

states.attr("transform",function(d,i){
return "translate("+xPos(i)+","+(scaleHeight(d[dataPoint])+padding)+")";
});

entering.append("rect").attr("width",15);
states.select("rect")
.attr("height",function(d){ return scaleHeight(dataMax - d[dataPoint])})
.attr("fill",function(d){ return colorScale(d[dataPoint]); });

entering.append("text").attr("class","stateName")
.text(function(d){ return d.State; })
.attr("transform","rotate(-90)");
states.select(".stateName")
.attr("x",function(d){ return -3-scaleHeight(dataMax - d[dataPoint]); })

entering.append("text").attr("class","label").attr("x",7.5);
states.select(".label").text(function(d){
return d[dataPoint];
});

states.on("mouseenter",function(){
this.parentNode.appendChild(this);
d3.select(this).select(".label").style("display","block");
d3.select(this).select("rect").style("opacity",.5);
}).on("mouseleave",function(){
d3.select(this).select(".label").style("display","none");
d3.select(this).select("rect").style("opacity",1);
});
}

setupData();
displayData();
});
</script>
</body>
52 changes: 52 additions & 0 deletions Exercise 1/crime_each.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
State,Murder,Rape,Robbery,Aggravated Assault,Burglary,Larceny Theft,Motor Vehicle Theft
Alabama ,8.2,34.3,141.4,247.8,953.8,2650,288.3
Alaska ,4.8,81.1,80.9,465.1,622.5,2599.1,391
Arizona ,7.5,33.8,144.4,327.4,948.4,2965.2,924.4
Arkansas,6.7,42.9,91.1,386.8,1084.6,2711.2,262.1
California ,6.9,26,176.1,317.3,693.3,1916.5,712.8
Colorado ,3.7,43.4,84.6,264.7,744.8,2735.2,559.5
Connecticut ,2.9,20,113,138.6,437.1,1824.1,296.8
Delaware ,4.4,44.7,154.8,428.2,688.9,2144,278.5
District of Columbia,35.4,30.2,672.1,721.3,649.7,2694.9,1402.3
Florida ,5,37.1,169.4,496.6,926.3,2658.3,423.3
Georgia ,6.2,23.6,154.8,264.3,931,2751.1,490.2
Hawaii ,1.9,26.9,78.5,147.8,767.9,3308.4,716.4
Idaho ,2.4,40.4,18.6,195.4,564.4,1931.7,201.8
Illinois,6,33.7,181.7,330.2,606.9,2164.8,308.6
Indiana ,5.7,29.6,108.6,179.9,697.6,2412,346.7
Iowa ,1.3,27.9,38.9,223.3,606.4,2042.7,184.6
Kansas ,3.7,38.4,65.3,280,689.2,2758.1,339.6
Kentucky ,4.6,34,88.4,139.8,634,1685.8,210.8
Louisiana ,9.9,31.4,118,435.1,870.6,2494.5,318.1
Maine ,1.4,24.7,24.4,61.7,478.5,1832.6,102
Maryland ,9.9,22.6,256.7,413.8,641.4,2294.3,608.4
Massachusetts,2.7,27.1,119,308.1,541.1,1527.4,295.1
Michigan,6.1,51.3,131.8,362.9,696.8,1917.8,476.5
Minnesota ,2.2,44,92,158.7,578.9,2226.9,278.2
Mississippi ,7.3,39.3,82.3,149.4,919.7,2083.9,256.5
Missouri ,6.9,28,124.1,366.4,738.3,2746.2,443.1
Montana ,1.9,32.2,18.9,228.5,389.2,2543,210.7
Nebraska ,2.5,32.9,59.1,192.5,532.4,2574.3,316.5
Nevada ,8.5,42.1,194.7,361.5,972.4,2153.9,1115.2
New Hampshire ,1.4,30.9,27.4,72.3,317,1377.3,102.1
New Jersey,4.8,13.9,151.6,184.4,447.1,1568.4,317.5
New Mexico ,7.4,54.1,98.7,541.9,1093.9,2639.9,414.5
New York,4.5,18.9,182.7,239.7,353.3,1569.6,185.6
North Carolina ,6.7,26.5,145.5,289.4,1201.1,2546.2,327.8
North Dakota ,1.1,24.2,7.4,65.5,311.9,1500.3,166
Ohio ,5.1,39.8,163.1,143.4,872.8,2429,360.9
Oklahoma ,5.3,41.7,91,370.5,1006,2644.2,391.8
Oregon ,2.2,34.8,68.1,181.8,758.6,3112.2,529
Pennsylvania,6.1,28.9,154.6,235,451.6,1729.1,236.5
Rhode Island ,3.2,29.8,72.1,146.1,494.2,1816,408.7
South Carolina ,7.4,42.5,132.1,579,1000.9,2954.1,384.4
South Dakota ,2.3,46.7,18.6,108.1,324.4,1343.7,108.4
Tennessee ,7.2,36.4,167.3,541.9,1026.9,2828.1,420.6
Texas ,6.2,37.2,156.6,329.8,961.6,2961.7,408.7
Utah,2.3,37.3,44.3,143.4,606.2,2918.8,343.9
Vermont ,1.3,23.3,11.7,83.5,491.8,1686.1,102.9
Virginia ,6.1,22.7,99.2,154.8,392.1,2035,211.1
Washington ,3.3,44.7,92.1,205.8,959.7,3149.5,783.9
West Virginia ,4.4,17.7,44.6,206.1,621.2,1794,210
Wisconsin ,3.5,20.6,82.2,135.2,440.8,1992.8,226.6
Wyoming ,2.7,24,15.3,188.1,476.3,2533.9,145.1
5 changes: 5 additions & 0 deletions Exercise 1/d3.min.js

Large diffs are not rendered by default.

99 changes: 99 additions & 0 deletions Exercise 1/exercise1_0.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<head>
<!--
So we've got a basic HTML page, with an SVG element on the page and d3.csv() loading our CSV file.
Goals:
1. Understand how .data(), .enter(), and .exit() work
2. Add rect elements to the page with our CSV data bound to them
3. Set the width, height, x, and y attributes
-->
<script src="d3.min.js"></script>
<style>
body {
font-family: Helvetica;
}
svg {
background-color: #eee;
}
</style>
</head>
<body>
<script defer>
var width = 1200, height = 500, padding = 100;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

d3.csv("crime_each.csv",function(csv){
//console.log(csv);
/* Data loads as an array of states, like so:
{
Aggravated Assault: "247.8"
Burglary: "953.8"
Larceny Theft: "2650"
Motor Vehicle Theft: "288.3"
Murder: "8.2"
Rape: "34.3"
Robbery: "141.4"
State: "Alabama "
}
*/

var dataPoint = "Murder";
var dataPoint2 = "Motor Vehicle Theft";

var dataMax = d3.max(csv,function(d) {
return parseFloat(d[dataPoint]);
});

console.log("MAX = " + dataMax);
console.log("first= " + csv[0][dataPoint]);

var xPos = d3.scale.linear().domain([0,csv.length]).range([padding,width-padding]);

var colorMax = d3.max(csv,function(d) {
return parseFloat(d[dataPoint2]);
});

var colorScale = d3.scale.linear()
.domain([0,colorMax])
.range(["#112233", "#aaaaaa"]);

var heightScale = d3.scale.linear()
.domain([0,dataMax])
.range([height-padding,padding]);

var yAxis = d3.svg.axis();
yAxis.scale(heightScale).orient("left");
svg.append("g").attr("class","yAxis")
.attr("transform","translate(50,50)")
.call(yAxis)

var states = svg.selectAll(".state").data(csv);
states.enter()
.append("rect")
.attr("class","state")
.attr("fill", function(d,i) {
console.log(d.State,i);
return colorScale(d[dataPoint2]);
})
.attr("width", function(d,i) {
return (width-padding)/(csv.length*1.25);
})
.attr("height", function(d,i) {
return (height-2*padding)*d[dataPoint]/dataMax;
// d.Murder*20
})
.attr("x", function(d,i) {
return xPos(i);
})
.attr("y", function(d,i) {
return (height-2*padding)*(1-d[dataPoint]/dataMax)+padding;
//500 - d.Murder*20
})
.append("text", function(d) {
return d.State
})
// .exit()
// .remove();
});
</script>
</body>
49 changes: 49 additions & 0 deletions Exercise 1/exercise1_1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<head>
<!--
Now that we’ve got some (ugly!!) bars on the page, let’s make them a bit prettier with d3.scale. A scale is comprised of three parts:
Type of scale, either quantitative (linear, power, log), ordinal (discrete sets, like names or categories), or time (using the Date() object)
Domain (input)
Range (output)
We’ll use d3.scale.linear() for three aspects of our graph: x-position, y-position, and color.
Goals:
Use d3.max() to calculate the max of our dataset
Add an x-position scale to evenly space our bars with appropriate padding (x)
Add a y-position scale to calculate both height and y
Add a color scale to calculate the fill of the bars according to their value
-->
<script src="d3.min.js"></script>
<style>
body {
font-family: Helvetica;
}
svg {
background-color: #eee;
}
</style>
</head>
<body>
<script defer>
var width = 1200, height = 500, padding = 50;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

d3.csv("crime_each.csv",function(csv){

var dataPoint = "Burglary";

var states = svg.selectAll(".state").data(csv);

var bar = states.enter()
.append("rect")
.attr("class","state")
.attr("width",15)
.attr("x",function(d,i){ return width * i/csv.length-1; })
.attr("y",function(d){ return height - d[dataPoint]/3; })
.attr("height",function(d){ return d[dataPoint]/3; });
});
</script>
</body>
55 changes: 55 additions & 0 deletions Exercise 1/exercise1_2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<head>
<!--
Time to start getting fancy! Now we’re going to add some labeling to our file, to turn it from a pile of rectangles into an understandable graph. We’ll be adding three important items:
A graph title so that we know which datapoint we are looking at
Y-Axis to show the values of the bars
State labels on the bottom of the graph
We’ll be introducing a couple of concepts here, namely d3.axis() for the y-axis, and making use of SVG g elements and transform attributes to create the state labels. We’ll also look at some of the formatting elements available for SVG text.
Goals:
Add a text label at the top of the graph with our datapoint as a title
Use d3.axis() with our y-position scale to add a y-axes on the left side of the graph
Add state labels, in three parts:
Wrap each of the rect elements in a g group, translate them to their correct position
Reposition rect inside of the transform
Add text labels with the state name and rotate them to be vertical.
-->
<script src="d3.min.js"></script>
<style>
body {
font-family: Helvetica;
}
svg {
background-color: #eee;
}
</style>
</head>
<body>
<script defer>
var width = 1200, height = 500, padding = 50;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

d3.csv("crime_each.csv",function(csv){

var dataPoint = "Burglary";

var dataMax = d3.max(csv, function(d){ return parseFloat(d[dataPoint]); });
var scaleHeight = d3.scale.linear()
.domain([0, dataMax]).range([height-padding, padding]);

var xPos = d3.scale.linear().domain([0,csv.length-1]).range([padding*2, width-padding*2]);

var colorScale = d3.scale.linear().domain([0,dataMax]).range(["#ff9900","#ff0099"]);

var states = svg.selectAll(".state").data(csv);
var bar = states.enter().append("rect").attr("class","state").attr("width",15);
bar.attr("x",function(d,i){ return xPos(i); })
.attr("y",function(d){ return height - padding - scaleHeight(d[dataPoint])})
.attr("height",function(d){ return scaleHeight(d[dataPoint])})
.attr("fill",function(d){ return colorScale(d[dataPoint]); });
});
</script>
</body>
Loading

0 comments on commit 068bac6

Please sign in to comment.