bradybod-usu/cs5890_data_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hw3 start.

Browse Source
This commit is contained in:
bbod
2019-09-22 22:47:18 -06:00
parent 33714c6291
commit b71254dc56
10 changed files with 18216 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17847
hw3/d3.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

12
hw3/data/anscombe_I.csv Executable file
View File

@@ -0,0 +1,12 @@
a,b
10,8.04
8,6.95
13,7.58
9,8.81
11,8.33
14,9.96
6,7.24
4,4.26
12,10.84
7,4.82
5,5.68
1 a b
2 10 8.04
3 8 6.95
4 13 7.58
5 9 8.81
6 11 8.33
7 14 9.96
8 6 7.24
9 4 4.26
10 12 10.84
11 7 4.82
12 5 5.68

12
hw3/data/anscombe_II.csv Executable file
View File

@@ -0,0 +1,12 @@
a,b
10,9.14
8,8.14
13,8.74
9,8.77
11,9.26
14,8.1
6,6.13
4,3.1
12,9.13
7,7.26
5,4.74
1 a b
2 10 9.14
3 8 8.14
4 13 8.74
5 9 8.77
6 11 9.26
7 14 8.1
8 6 6.13
9 4 3.1
10 12 9.13
11 7 7.26
12 5 4.74

12
hw3/data/anscombe_III.csv Executable file
View File

@@ -0,0 +1,12 @@
a,b
10,7.46
8,6.77
13,12.74
9,7.11
11,7.81
14,8.84
6,6.08
4,5.39
12,8.15
7,6.42
5,5.73
1 a b
2 10 7.46
3 8 6.77
4 13 12.74
5 9 7.11
6 11 7.81
7 14 8.84
8 6 6.08
9 4 5.39
10 12 8.15
11 7 6.42
12 5 5.73

12
hw3/data/anscombe_IV.csv Executable file
View File

@@ -0,0 +1,12 @@
a,b
8,6.58
8,5.76
8,7.71
8,8.84
8,8.47
8,7.04
8,5.25
19,12.5
8,5.56
8,7.91
8,6.89
1 a b
2 8 6.58
3 8 5.76
4 8 7.71
5 8 8.84
6 8 8.47
7 8 7.04
8 8 5.25
9 19 12.5
10 8 5.56
11 8 7.91
12 8 6.89

173
hw3/hw3.html Normal file
View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework 3 Solution</title>
<style>
.barChart {
fill: steelblue;
stroke: darkgray;
stroke-width: 1px;
}
.lines {
stroke: steelblue;
fill: none
}
.areas {
stroke: none;
fill: steelblue
}
circle {
fill: steelblue;
}
.frame {
fill: none;
stroke: black;
stroke-width: 2px;
}
/* Styles that clean up the layout;
* you can ignore these */
div {
display: inline-block;
border: 1px solid lightgray;
margin: 1em;
}
div, span {
padding: 1em;
}
</style>
<!--script src="https://d3js.org/d3.v4.js"></script-->
<script src="d3.js"></script>
<script type="application/javascript" src="script.js"></script>
</head>
<body onload="changeData()">
<h3>CS 5890 Homework 3</h3>
<address>
<span>Your Name</span>
<span>Your Email Address</span>
<span>Your A#</span>
</address>
<br>
<hr>
<br>
<span>
<button>Staircase</button>
</span>
<span>
<label>Dataset:</label>
<select id="dataset">
<option value="anscombe_I">Anscombe's Quartet I</option>
<option selected value="anscombe_II">Anscombe's Quartet II</option>
<option value="anscombe_III">Anscombe's Quartet III</option>
<option value="anscombe_IV">Anscombe's Quartet IV</option>
</select>
</span>
<span>
<input type="checkbox" id="random"> Random Subset
</span>
<br>
<div>
<h2>Bar Charts</h2>
<svg width="200" height="200" id="chart1">
<g transform="translate(0, 200) scale(1, -1)" class="barChart" >
<rect x="10" y="0" width="10" height="100"></rect>
<rect x="20" y="0" width="10" height="80"></rect>
<rect x="30" y="0" width="10" height="130"></rect>
<rect x="40" y="0" width="10" height="90"></rect>
<rect x="50" y="0" width="10" height="110"></rect>
<rect x="60" y="0" width="10" height="140"></rect>
<rect x="70" y="0" width="10" height="60"></rect>
<rect x="80" y="0" width="10" height="40"></rect>
<rect x="90" y="0" width="10" height="120"></rect>
<rect x="100" y="0" width="10" height="70"></rect>
<rect x="110" y="0" width="10" height="50"></rect>
</g>
</svg>
<svg width="200" height="200">
<g transform="translate(0, 200) scale(1, -1)" class="barChart" >
<rect x="10" y="0" width="10" height="91"></rect>
<rect x="20" y="0" width="10" height="81"></rect>
<rect x="30" y="0" width="10" height="87"></rect>
<rect x="40" y="0" width="10" height="88"></rect>
<rect x="50" y="0" width="10" height="93"></rect>
<rect x="60" y="0" width="10" height="81"></rect>
<rect x="70" y="0" width="10" height="61"></rect>
<rect x="80" y="0" width="10" height="31"></rect>
<rect x="90" y="0" width="10" height="91"></rect>
<rect x="100" y="0" width="10" height="73"></rect>
<rect x="110" y="0" width="10" height="47"></rect>
</g>
</svg>
</div>
<div>
<h2>Line Charts</h2>
<svg width="200" height="200">
<g transform="translate(10, 200) scale(1, -1)">
<path class="lines"
d="M 0 100 L 10 80 L 20 130 L 30 90 L 40 110 L 50 140 L 60 60 L 70 40 L 80 120 L 90 70 L 100 50"></path>
</g>
</svg>
<svg width="200" height="200">
<g class="lines" transform="translate(10, 200) scale(1, -1)">
<path class="lines"
d="M 0 91 L 10 81 L 20 87 L 30 88 L 40 93 L 50 81 L 60 61 L 70 31 L 80 91 L 90 73 L 100 47"></path>
</g>
</svg>
</div>
<div>
<h2>Area Charts</h2>
<svg width="200" height="200">
<g transform="translate(10, 200) scale(1, -1)">
<path class="areas"
d="M 0 0 L 0 100 L 10 80 L 20 130 L 30 90 L 40 110 L 50 140 L 60 60 L 70 40 L 80 120 L 90 70 L 100 50 L 100 0"></path>
</g>
</svg>
<svg width="200" height="200">
<g transform="translate(10, 200) scale(1, -1)">
<path class="areas"
d="M 0 0 L 0 91 L 10 81 L 20 87 L 30 88 L 40 93 L 50 81 L 60 61 L 70 31 L 80 91 L 90 73 L 100 47 L 100 0"></path>
</g>
</svg>
</div>
<div>
<h2>Scatterplot</h2>
<svg width="200" height="200">
<rect x="0" y="0" width="200" height="200" class="frame"></rect>
<g transform="translate(0, 200) scale(1, -1)">
<circle cx="100" cy="91" r="5"></circle>
<circle cx="80" cy="81" r="5"></circle>
<circle cx="130" cy="87" r="5"></circle>
<circle cx="90" cy="88" r="5"></circle>
<circle cx="110" cy="93" r="5"></circle>
<circle cx="140" cy="81" r="5"></circle>
<circle cx="60" cy="61" r="5"></circle>
<circle cx="40" cy="31" r="5"></circle>
<circle cx="120" cy="91" r="5"></circle>
<circle cx="70" cy="73" r="5"></circle>
<circle cx="50" cy="47" r="5"></circle>
</g>
</svg>
</div>
</body>
</html>

99
hw3/script.js Normal file
View File

@@ -0,0 +1,99 @@
/**
* Makes the first bar chart appear as a staircase.
*
* Note: use only the DOM API, not D3!
*/
function staircase() {
// ****** TODO: PART II ******
}
/**
* Render the visualizations
* @param error
* @param data
*/
function update(data) {
// Set up the scales
let aScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.a)])
.range([0, 150]);
let bScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.b)])
.range([0, 150]);
let iScale = d3.scaleLinear()
.domain([0, data.length])
.range([0, 110]);
// ****** TODO: PART III (you will also edit in PART V) ******
// TODO: Select and update the 'a' bar chart bars
// TODO: Select and update the 'b' bar chart bars
// TODO: Select and update the 'a' line chart path using this line generator
let aLineGenerator = d3.line()
.x((d, i) => iScale(i))
.y((d) => aScale(d.a));
// TODO: Select and update the 'b' line chart path (create your own generator)
// TODO: Select and update the 'a' area chart path using this area generator
let aAreaGenerator = d3.area()
.x((d, i) => iScale(i))
.y0(0)
.y1(d => aScale(d.a));
// TODO: Select and update the 'b' area chart path (create your own generator)
// TODO: Select and update the scatterplot points
// ****** TODO: PART IV ******
}
/**
* Load the file indicated by the select menu
*/
function changeData() {
let dataFile = document.getElementById('dataset').value;
if (document.getElementById('random').checked) {
randomSubset();
}
else {
let filename = './data/' + dataFile + '.csv';
dataset = d3.csv(filename, function(d) {
// Convert each data item to a number.
return { a:+d.a, b:+d.b };
})
// After reading the entire dataset, call update().
.then(update);
}
}
/**
* Load the file indicated by the select menu, and then slice out a random chunk before passing the data to update()
*/
function randomSubset() {
let dataFile = document.getElementById('dataset').value;
if (document.getElementById('random').checked) {
let filename = './data/' + dataFile + '.csv';
dataset = d3.csv(filename, function(d) {
// Convert each data item to a number.
return { a:+d.a, b:+d.b };
})
.then(function(data) {
let subset = [];
for (let d of data) {
if (Math.random() > 0.5) {
subset.push(d);
}
}
update(subset);
});
}
else {
changeData();
}
}