diff --git a/02/2.03/index.html b/02/2.03/index.html
index 3c3a902..64dc639 100644
--- a/02/2.03/index.html
+++ b/02/2.03/index.html
@@ -11,7 +11,7 @@
diff --git a/02/2.05.0/js/main.js b/02/2.05.0/js/main.js
index eb02f83..7fc308f 100644
--- a/02/2.05.0/js/main.js
+++ b/02/2.05.0/js/main.js
@@ -2,4 +2,26 @@
* main.js
* Mastering Data Visualization with D3.js
* 2.5 - Activity: Adding SVGs to the screen
-*/
\ No newline at end of file
+*/
+
+var svg = d3.select("#chart-area").append("svg")
+ .attr("width", 500)
+ .attr("height", 400)
+
+var rect = svg.append("rect")
+ .attr("x", 100)
+ .attr("y", 100)
+ .attr("width", 100)
+ .attr("height", 100)
+ .attr("fill", "blue")
+
+var rect = svg.append("rect")
+ .attr("x", 150)
+ .attr("y", 150)
+ .attr("width", 100)
+ .attr("height", 100)
+ .attr("fill", "red")
+
+rect
+ .attr("stroke", "black")
+ .attr("opacity", 0.5)
\ No newline at end of file
diff --git a/02/2.07/js/main.js b/02/2.07/js/main.js
index c5a2c4e..6b64128 100644
--- a/02/2.07/js/main.js
+++ b/02/2.07/js/main.js
@@ -4,10 +4,10 @@
* 2.7 - Loading external data
*/
-d3.tsv("data/ages.tsv").then(function(data){
- data.forEach(function(d){
+d3.tsv("data/ages.tsv").then(function(data){
+ data.forEach(function(d){
d.age = +d.age;
- });
+ }) ;
var svg = d3.select("#chart-area").append("svg")
.attr("width", 400)
diff --git a/02/2.08.0/js/main.js b/02/2.08.0/js/main.js
index db531c0..c3aee6f 100644
--- a/02/2.08.0/js/main.js
+++ b/02/2.08.0/js/main.js
@@ -2,4 +2,34 @@
* main.js
* Mastering Data Visualization with D3.js
* 2.8 - Activity: Your first visualization!
-*/
\ No newline at end of file
+*/
+
+d3.json("data/buildings.json").then(function(data){
+ console.log(data)
+
+ data.forEach(function(d){
+ d.height = +d.height;
+ });
+
+ var svg = d3.select("#chart-area").append("svg")
+ .attr("width", 500)
+ .attr("height", 500);
+
+ var bars = svg.selectAll("bar")
+ .data(data);
+
+ bars.enter()
+ .append("rect")
+ .attr("height", function(d){
+ return d.height
+ })
+ .attr("width", 50)
+ .attr("x", function(d, i){
+ return i*70 + 25
+ })
+ .attr("y", 20)
+ .attr("fill", "grey");
+}).catch(function(error){
+ console.log(error);
+})
+;
\ No newline at end of file
diff --git a/03/3.06/js/main.js b/03/3.06/js/main.js
index d82c44a..c8b17ff 100644
--- a/03/3.06/js/main.js
+++ b/03/3.06/js/main.js
@@ -1,10 +1,9 @@
/*
* main.js
* Mastering Data Visualization with D3.js
-* 3.6 - Band scales
+* 3.7 - D3 min, max, and extent
*/
-
var svg = d3.select("#chart-area")
.append("svg")
.attr("width", "400")
@@ -12,38 +11,38 @@ var svg = d3.select("#chart-area")
d3.json("data/buildings.json").then(function(data){
console.log(data);
+ console.log("asas");
- data.forEach(function(d) {
+ data.forEach(d => {
d.height = +d.height;
});
var x = d3.scaleBand()
- .domain(["Burj Khalifa", "Shanghai Tower",
- "Abraj Al-Bait Clock Tower", "Ping An Finance Centre",
- "Lotte World Tower", "One World Trade Center",
- "Guangzhou CTF Finance Center"])
+ .domain(data.map(function(d){
+ return d.name;
+ }))
.range([0, 400])
.paddingInner(0.3)
.paddingOuter(0.3);
var y = d3.scaleLinear()
- .domain([0, 828])
+ .domain([0, d3.max(data, function(d){
+ return d.height;
+ })])
.range([0, 400]);
var rects = svg.selectAll("rect")
- .data(data)
+ .data(data)
.enter()
- .append("rect")
- .attr("y", 0)
- .attr("x", function(d){
- return x(d.name);
- })
- .attr("width", x.bandwidth)
- .attr("height", function(d){
- return y(d.height);
- })
- .attr("fill", function(d) {
- return "grey";
- });
-
-})
\ No newline at end of file
+ .append("rect")
+ .attr("y", 0)
+ .attr("x", function(d){
+ return x(d.name);
+ })
+ .attr("width", x.bandwidth)
+ .attr("height", function(d){
+ return y(d.height);
+ })
+ .attr("fill", "grey");
+
+});
\ No newline at end of file
diff --git a/03/3.07/js/main.js b/03/3.07/js/main.js
index 7c4a23e..f3e83dd 100644
--- a/03/3.07/js/main.js
+++ b/03/3.07/js/main.js
@@ -42,6 +42,6 @@ d3.json("data/buildings.json").then(function(data){
.attr("height", function(d){
return y(d.height);
})
- .attr("fill", "grey");
+ .attr("fill", "red");
});
\ No newline at end of file
diff --git a/03/3.10/js/main.js b/03/3.10/js/main.js
index bd5fd7e..09bb828 100644
--- a/03/3.10/js/main.js
+++ b/03/3.10/js/main.js
@@ -50,10 +50,8 @@ d3.json("data/buildings.json").then(function(data){
.paddingOuter(0.3);
var y = d3.scaleLinear()
- .domain([0, d3.max(data, function(d){
- return d.height;
- })])
- .range([0, height]);
+ .domain([0, d3.max(data, d => d.height)])
+ .range([height, 0]);
var xAxisCall = d3.axisBottom(x);
g.append("g")
@@ -77,13 +75,15 @@ d3.json("data/buildings.json").then(function(data){
var rects = g.selectAll("rect")
.data(data)
-
+ console.log(height)
+
rects.enter()
.append("rect")
- .attr("y", 0)
+ .attr("y", function(d) {return y(d.height)})
.attr("x", function(d){ return x(d.name); })
.attr("width", x.bandwidth)
- .attr("height", function(d){ return y(d.height); })
+ /* .attr("height", height) */
+ .attr("height", function(d) {return height - y(d.height)})
.attr("fill", "grey");
})
\ No newline at end of file
diff --git a/03/3.11/js/main.js b/03/3.11/js/main.js
index 209f34c..31c3d43 100644
--- a/03/3.11/js/main.js
+++ b/03/3.11/js/main.js
@@ -4,7 +4,7 @@
* 3.11 - Making a bar chart
*/
-var margin = { left:100, right:10, top:10, bottom:150 };
+var margin = { left:80, right:20, top:50, bottom:100 };
var width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
diff --git a/03/3.13.0/js/main.js b/03/3.13.0/js/main.js
index e4b3f87..4ef3f04 100644
--- a/03/3.13.0/js/main.js
+++ b/03/3.13.0/js/main.js
@@ -4,3 +4,89 @@
* Project 1 - Star Break Coffee
*/
+var margin = {left:80, right:20, top:50, bottom:100 };
+
+var width = 600 - margin.left - margin.right,
+ height = 400 - margin.top - margin.bottom;
+
+var g = d3.select("#chart-area")
+ .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 + ")");
+
+/* g.append("rect")
+ .attr("id", "back")
+ .attr("x", 0)
+ .attr("y", 0)
+ .attr("width", width)
+ .attr("height", height)
+ .attr("fill", "green")
+ .attr("opacity", 0.5) */
+
+// X Label
+g.append("text")
+ .attr("y", height + 50)
+ .attr("x", width / 2)
+ .attr("font-size", "20px")
+ .attr("text-anchor", "middle")
+ .text("Month");
+
+// Y Label
+g.append("text")
+ .attr("y", -60)
+ .attr("x", -(height / 2))
+ .attr("font-size", "20px")
+ .attr("text-anchor", "middle")
+ .attr("transform", "rotate(-90)")
+ .text("Revenue");
+
+d3.json("data/revenues.json").then(function(data){
+
+
+ data.forEach(d => d.revenue = +d.revenue)
+ data.forEach(d => d.profit = +d.profit);
+
+
+ console.log(data)
+
+ var x = d3.scaleBand()
+ .domain(data.map(d => d.month))
+ .range([0, width])
+ .padding(0.2);
+
+ var y = d3.scaleLinear()
+ .domain([0, d3.max(data, function(d){
+ return d.revenue;
+ })])
+ .range([height, 0]);
+
+ var xAxisCall = d3.axisBottom(x);
+ g.append("g")
+ .attr("class", "x-axis")
+ .attr("transform", "translate(0," + height +")")
+ .call(xAxisCall)
+
+ var yAxisCall = d3.axisLeft(y)
+ .ticks(5)
+ .tickFormat(d => d + "$");
+ g.append("g")
+ .attr("clas", "y-axis")
+ .call(yAxisCall);
+
+
+ var rects = g.selectAll("rect")
+ .data(data)
+
+ rects.enter()
+ .append("rect")
+ .attr("y", function(d){ return y(d.revenue); })
+ .attr("x", function(d){ return x(d.month); })
+ .attr("width", x.bandwidth)
+ .attr("height", function(d){ return height - y(d.revenue); })
+ .attr("fill", "grey");
+
+ })
+
\ No newline at end of file