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

Challenge week 8 turn in, Niklas Fejes #13

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

Challenge week 8 turn in, Niklas Fejes #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
edfeae7
html test
nfejes Oct 16, 2014
45fa163
checkpoints
nfejes Oct 18, 2014
aa3a637
challenge 2
nfejes Oct 19, 2014
45b3e73
checkpoint screenshots
nfejes Oct 19, 2014
4dc14b7
challenge 1 screenshots
nfejes Oct 19, 2014
77f8297
fix challenge 1-d tip
nfejes Oct 19, 2014
eac656d
test watcher
nfejes Oct 19, 2014
499b8cb
challenge 3
nfejes Oct 19, 2014
aa9ef47
show and tell
nfejes Oct 19, 2014
066daa1
updated time spent on challenge
nfejes Oct 19, 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
79 changes: 42 additions & 37 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,129 +1,134 @@
# Name

write-your-name
Niklas Fejes

# How many points have you earned?

0/100

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

# How many hours have you spent on this?

fill-in-your-answer
9 hours

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

fill-in-your-answer
Challenge 3 - Implementing hand-drawn visualizations

# 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)
[The MarketSite experience](http://www.percepted.com/project/nasdaq-marketsite-data-visualization/)

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

fill-in-your-answer
The motivation behind the visualization is to provide real-time financial data market data to the public.
The intenden audience, as stated by the article is "the investing public and its many constituents", so
any public person interested in data from the financial market could benefit form the visualizations.

# Checkpoints (5 points x 4 = 20 points)

## 1 (5 points)

![image](image.png?raw=true)
![image](screenshots/checkpoint1a.png?raw=true)
![image](screenshots/checkpoint1b.png?raw=true)
![image](screenshots/checkpoint1c.png?raw=true)

[checkpoint1](checkpoint1.html)
[checkpoint1a](html/checkpoint1a.html)
[checkpoint1b](html/checkpoint1b.html)
[checkpoint1c](html/checkpoint1c.html)

## 2 (5 points)

![image](image.png?raw=true)
![image](screenshots/checkpoint2.png?raw=true)

[checkpoint2](checkpoint2.html)
[checkpoint2](html/checkpoint2.html)

## 3 (5 points)

![image](image.png?raw=true)
![image](screenshots/checkpoint3.png?raw=true)

[checkpoint3](checkpoint3.html)
[checkpoint3](html/checkpoint3.html)

## 4 (5 points)

![image](image.png?raw=true)
![image](screenshots/checkpoint4.png?raw=true)

[checkpoint4](checkpoint4.html)
[checkpoint4](html/checkpoint4.html)

# Challenges

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

### 1.a. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge1-a.png?raw=true)

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

### 1.b. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge1-b.png?raw=true)

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

### 1.c. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge1-c.png?raw=true)

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

### 1.d. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge1-d.png?raw=true)

[challenge1-d](checkpoint1-d.html)
[challenge1-d](html/challenge1-d.html)

## Challenge 2 (5 points x 6 = 30 points)

### 2.a. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge2-a.png?raw=true)

### 2.b. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge2-b.png?raw=true)

### 2.c. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge2-c.png?raw=true)

### 2.d. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge2-d.png?raw=true)

### 2.e. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge2-e.png?raw=true)

### 2.f. (5 points)

![image](image.png?raw=true)
![image](screenshots/challenge2-f.png?raw=true)

[challenge2](checkpoint2.html)
[challenge2](html/challenge2.html)

## Challenge 3 (8 points x 3 = 24 points)

### 3.a. (8 points)

![image](image.png?raw=true)
![image](screenshots/challenge3-a.png?raw=true)

[challenge3-a](checkpoint3-a.html)
[challenge3-a](html/challenge3-a.html)

### 3.b. (8 points)

![image](image.png?raw=true)
![image](screenshots/challenge3-b.png?raw=true)
(the fifth repo is not actually watched, but was made so to indicate how it would look)

[challenge3-b](checkpoint3-b.html)
[challenge3-b](html/challenge3-b.html)

### 3.c. (8 points)

![image](image.png?raw=true)
![image](screenshots/challenge3-c.png?raw=true)

[challenge3-c](checkpoint3-c.html)
[challenge3-c](html/challenge3-c.html)
81 changes: 81 additions & 0 deletions html/challenge1-a.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!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 = 800;
var h = 600;
var barHeight = 20;
var lmargin = 250;
var rmargin = 20;

// URL (using temp to avoid github api limit)
// var url = "https://rawgit.com/nfejes/challenge-week-8/master/html/repos.json";
var url = "https://api.github.com/orgs/csci-4830-002-2014/repos";

d3.json(url, function(error, dataset) {
if (error) console.log(error);

var scale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return +d.forks_count })])
.range([0, w-lmargin-rmargin]);

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

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

bar.append("rect")
.attr("x", lmargin)
.attr("width", function(d) { return scale(+d.forks_count) })
.attr("height", barHeight - 1)
.attr("fill", "steelblue");

bar.append("text")
.attr("x", 0)
.attr("y", barHeight / 2 - 1)
.attr("dy", ".35em")
.attr("font", "10px sans-serif")
.text(function(d) { return d.name + ':'; });

bar.append("text")
.attr("x", function(d) { return lmargin + 2 + scale(+d.forks_count) })
.attr("y", barHeight / 2 - 1)
.attr("dy", ".35em")
.attr("font", "10px sans-serif")
.text(function(d) { return d.forks_count; });

/*
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d, i) {
return "(" + i + ") " +
"name=" + d.name + "," +
"id=" + d.id + "," +
"size=" + d.size + "," +
"forks=" + d.forks_count;
})
.attr("x", 10)
.attr("y", function(d, i) {
return 10 + 10*i;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px");
*/
});
</script>
</body>
</html>
82 changes: 82 additions & 0 deletions html/challenge1-b.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!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 = 800;
var h = 600;
var barHeight = 20;
var lpadding = 10;
var rpadding = 110;

// URL (using temp to avoid github api limit)
// var url = "https://rawgit.com/nfejes/challenge-week-8/master/html/repos.json";
var url = "https://api.github.com/orgs/csci-4830-002-2014/repos";

d3.json(url, function(error, dataset) {
if (error) console.log(error);

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

// Scales
var sizeScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return +d.size })])
.range([lpadding, w-rpadding]);
var forkScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return +d.forks_count })])
.range([lpadding, h-lpadding]);

// Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { return sizeScale(d.size) })
.attr("cy", function(d) { return forkScale(d.forks_count) })
.attr("r", 4);

// Add labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) { return d.name; })
.attr("x", function(d) { return sizeScale(d.size); })
.attr("y", function(d) { return forkScale(d.forks_count); })
.attr("dy", ".35em").attr("dx", ".5em")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");

/*
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d, i) {
return "(" + i + ") " +
"name=" + d.name + "," +
"id=" + d.id + "," +
"size=" + d.size + "," +
"forks=" + d.forks_count;
})
.attr("x", 10)
.attr("y", function(d, i) {
return 10 + 10*i;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px");
*/
});
</script>
</body>
</html>
Loading