Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Irfan Nadiadi Learning Challenge 8 #8

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Irfan Nadiadi Learning Challenge 8 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9a3e8ce
Added first few checkpoints and challenges
Irfann1 Oct 20, 2014
b4b2e24
Added challenge 1c
Irfann1 Oct 20, 2014
54784a1
Added show & tell
Irfann1 Oct 20, 2014
40e5770
Update README.md
Irfann1 Oct 20, 2014
cb6abfb
Updated screenshot
Irfann1 Oct 20, 2014
d2f4223
Merge branch 'master' of https://github.com/Irfann1/challenge-week-8
Irfann1 Oct 20, 2014
3157ca0
Updated Readme
Irfann1 Oct 20, 2014
71f2dec
Updated screenshot
Irfann1 Oct 20, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions 1a.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<style type="text/css">
.chart rect {
fill: steelblue;
}

.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 600;
var h = 600;
var barHeight = 10;
var xscale = d3.scale.linear().range([0, w]);

d3.json("https://api.github.com/orgs/csci-4830-002-2014/repos",
function(error, data) {
xscale.domain([0, d3.max(data, function(d) { return d.forks_count; })]);


dataset = data;


var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);
svg.attr("height", barHeight * data.length);

var bar = svg.selectAll("g")
.data(dataset)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
.attr("width", function(d) { return xscale(d.forks_count); })
.attr("height", barHeight - 1);

bar.append("text")
.attr("x", function(d) { return xscale(d.forks_count) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.forks_count; });


});
</script>
</body>
</html>
75 changes: 75 additions & 0 deletions 1b.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var w = 600;
var h = 600;
var barHeight = 10;
var xscale = d3.scale.linear().range([0, w]);

d3.json("https://api.github.com/orgs/csci-4830-002-2014/repos",
function(error, data) {
//xscale.domain([0, d3.max(data, function(d) { return d.forks_count; })]);

var xScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.forks_count; })])
.range([0, w]);
var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.size; })])
.range([0, h]);


dataset = data;


var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);

svg.selectAll("circle") // <-- No longer "rect"
.data(dataset)
.enter()
.append("circle") // <-- No longer "rect"
.attr("cx", function(d,i) {
return xScale(d.forks_count); //Returns scaled value
})
.attr("cy", function(d,i) {
return yScale(d.size)+50;
})
.attr("r", function(d,i) {
return Math.sqrt(h - yScale(d.size));
});

svg.selectAll("text") // <-- Note "text", not "circle" or "rect"
.data(dataset)
.enter()
.append("text") // <-- Same here!
.text(function(d) {
return "("+d.forks_count + ", " + d.size+")";
})
.attr("x", function(d) {
return xScale(d.forks_count);
})
.attr("y", function(d) {
return yScale(d.size)+50;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");




});
</script>
</body>
</html>
75 changes: 75 additions & 0 deletions 1c.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var w = 600;
var h = 600;
var barHeight = 10;
var xscale = d3.scale.linear().range([0, w]);

d3.json("https://api.github.com/orgs/csci-4830-002-2014/repos",
function(error, data) {
//xscale.domain([0, d3.max(data, function(d) { return d.forks_count; })]);

var xScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.forks_count; })])
.range([0, w]);
var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.size; })])
.range([0, h]);


dataset = data;


var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);

svg.selectAll("circle") // <-- No longer "rect"
.data(dataset)
.enter()
.append("circle") // <-- No longer "rect"
.attr("cx", function(d,i) {
return xScale(d.forks_count); //Returns scaled value
})
.attr("cy", function(d,i) {
return yScale(d.size)+50;
})
.attr("r", function(d,i) {
return Math.sqrt(75+12*d.open_issues);
});

svg.selectAll("text") // <-- Note "text", not "circle" or "rect"
.data(dataset)
.enter()
.append("text") // <-- Same here!
.text(function(d) {
return "("+d.forks_count + ", " + d.size+")";
})
.attr("x", function(d) {
return xScale(d.forks_count);
})
.attr("y", function(d) {
return yScale(d.size)+50;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");




});
</script>
</body>
</html>
48 changes: 28 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,86 @@
# Name

write-your-name
Irfan Nadiadi

# How many points have you earned?

0/100
41/100

(Make your own calculation and replace the number 0 with the points you think you've earned.)

# How many hours have you spent on this?

fill-in-your-answer
5

# What is the most difficult part about this week's challenge?

fill-in-your-answer
Working with d3 is not too hard, but it really takes a lot of time. I have quite a lot of other work to do and was unable to finish this.

# Show and tell (6 points)

## Link (2 points)

[title-of-the-article](http://link-to-an-example-of-big-data-visualization-in-a-public-space)
[eCLOUD](http://www.ecloudproject.com/)

## Describe briefly the "motivation" and "intended audience" of this public visualization (4 points).

fill-in-your-answer
The eCLOUD is an art installation in San Jose International Airport, which features many polycarbonate tiles that fade from transparent to opaque states. The different tiles are activated by real-time weather data from around the world. The installation acts as art more so than a functional representation of the data, but it is still an interesting way to physically represent data.

# Checkpoints (5 points x 4 = 20 points)

## 1 (5 points)

![image](image.png?raw=true)
![image](checkpoints/1a.png)

[checkpoint1 (2a)](check1a.html)

![image](checkpoints/1c.png)

[checkpoint1](checkpoint1.html)
[checkpoint1 (2c)](check1c.html)

![image](checkpoints/1e.png)

[checkpoint1 (2e)](check1e.html)

## 2 (5 points)

![image](image.png?raw=true)
![image](checkpoints/2.png)

[checkpoint2](checkpoint2.html)
[checkpoint2](check2.html)

## 3 (5 points)

![image](image.png?raw=true)
![image](checkpoints/3.png)

[checkpoint3](checkpoint3.html)
[checkpoint3](check3.html)

## 4 (5 points)

![image](image.png?raw=true)
![image](checkpoints/4.png)

[checkpoint4](checkpoint4.html)
[checkpoint4](check4.html)

# Challenges

## Challenge 1 (5 points x 4 = 20 points)

### 1.a. (5 points)

![image](image.png?raw=true)
![image](challenges/1a.png)

[challenge1-a](challenge1-a.html)
[challenge1-a](1a.html)

### 1.b. (5 points)

![image](image.png?raw=true)
![image](challenges/1b.png)

[challenge1-b](checkpoint1-b.html)
[challenge1-b](1b.html)

### 1.c. (5 points)

![image](image.png?raw=true)
![image](challenges/challenge1c.png)

[challenge1-c](checkpoint1-c.html)
[challenge1-c](1c.html)

### 1.d. (5 points)

Expand Down
Binary file added challenges/1a.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added challenges/1b.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added challenges/challenge1c.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 62 additions & 0 deletions check1a.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<style type="text/css">
.chart rect {
fill: steelblue;
}

.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<svg class="chart"></svg>
<script type="text/javascript">
var dataURL = "https://gist.githubusercontent.com/doubleshow/21e3f7f9afc1383b41b3/raw/popdist";

var width = 420,
barHeight = 10;

var x = d3.scale.linear()
.range([0, width]);

var chart = d3.select(".chart")
.attr("width", width);

d3.tsv(dataURL, type, function(error, data) {
x.domain([0, d3.max(data, function(d) { return d.population; })]);

chart.attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
.attr("width", function(d) { return x(d.population); })
.attr("height", barHeight - 1);

bar.append("text")
.attr("x", function(d) { return x(d.population) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.population; });
});

function type(d) {
d.population = +d.population; // coerce to number
return d;
}
</script>

</body>
</html>
Loading