From abc6e6ce451cc46337bbc35598feaf0884f36580 Mon Sep 17 00:00:00 2001 From: filip-oster Date: Tue, 1 Sep 2020 17:13:14 +0200 Subject: [PATCH 1/3] 2 --- 02/2.03/index.html | 4 ++-- 02/2.05.0/js/main.js | 24 +++++++++++++++++++++++- 02/2.07/js/main.js | 6 +++--- 02/2.08.0/js/main.js | 32 +++++++++++++++++++++++++++++++- 4 files changed, 59 insertions(+), 7 deletions(-) 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 @@ - + @@ -23,7 +23,7 @@ - Hello World + Hello World
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 From 0f3fe28aec00135a6b5a0dfb1e4e49e5ece2831d Mon Sep 17 00:00:00 2001 From: filip-oster Date: Tue, 1 Sep 2020 17:22:53 +0200 Subject: [PATCH 2/3] change --- 03/3.06/js/main.js | 45 ++++++++++++++++++++++----------------------- 03/3.07/js/main.js | 2 +- 2 files changed, 23 insertions(+), 24 deletions(-) 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 From 2f68af6167bca6ba07800cb99c7e27357aa9b67b Mon Sep 17 00:00:00 2001 From: filip-oster Date: Wed, 2 Sep 2020 13:31:51 +0200 Subject: [PATCH 3/3] 3 --- 03/3.10/js/main.js | 14 ++++---- 03/3.11/js/main.js | 2 +- 03/3.13.0/js/main.js | 86 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 8 deletions(-) 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