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

BIN
hw2 2.zip Normal file
View File

Binary file not shown.

BIN
hw2.zip Normal file
View File

Binary file not shown.

104
hw2/.idea/workspace.xml generated
View File

@@ -2,15 +2,7 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="a11ee4a0-3787-4da9-80ca-2e586b2721a1" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/../hw1/Hw1.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/hw2.iml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/data/Tree.json" afterDir="false" />
<change afterPath="$PROJECT_DIR$/hw2.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/js/Node.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/js/Tree.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/js/script.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
@@ -25,11 +17,12 @@
<session id="-371711873">
<usages-collector id="statistics.lifecycle.project">
<counts>
<entry key="project.closed" value="2" />
<entry key="project.closed" value="4" />
<entry key="project.open.time.10" value="1" />
<entry key="project.open.time.12" value="1" />
<entry key="project.open.time.4" value="1" />
<entry key="project.open.time.9" value="1" />
<entry key="project.opened" value="3" />
<entry key="project.opened" value="4" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.open">
@@ -68,7 +61,7 @@
<entry file="file://$PROJECT_DIR$/hw2.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="23" column="12" lean-forward="true" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
<caret line="23" column="12" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
</state>
</provider>
</entry>
@@ -76,8 +69,8 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/data/Tree.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-128">
<caret line="27" column="2" lean-forward="true" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
<state relative-caret-position="405">
<caret line="27" column="2" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
</state>
</provider>
</entry>
@@ -85,8 +78,8 @@
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/js/Tree.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="788">
<caret line="85" column="42" lean-forward="true" selection-start-line="85" selection-start-column="42" selection-end-line="85" selection-end-column="42" />
<state relative-caret-position="295">
<caret line="83" column="32" lean-forward="true" selection-start-line="81" selection-start-column="8" selection-end-line="83" selection-end-column="32" />
</state>
</provider>
</entry>
@@ -94,7 +87,7 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/Node.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="205">
<state relative-caret-position="360">
<caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
</state>
</provider>
@@ -139,6 +132,17 @@
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="hw2" type="b2602c69:ProjectViewProjectNode" />
<item name="hw2" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
<pane id="Scope">
<subPane subId="Scope 'Project Files'; set:Project Files; class com.intellij.psi.search.scope.ProjectFilesScope">
<expand>
@@ -160,17 +164,6 @@
<select />
</subPane>
</pane>
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="hw2" type="b2602c69:ProjectViewProjectNode" />
<item name="hw2" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
@@ -215,12 +208,13 @@
<updated>1568584050957</updated>
<workItem from="1568584054070" duration="4815000" />
<workItem from="1568614403562" duration="1200000" />
<workItem from="1568644410386" duration="11879000" />
<workItem from="1568644410386" duration="12289000" />
<workItem from="1568850914755" duration="490000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="17894000" />
<option name="totallyTimeSpent" value="18794000" />
</component>
<component name="TodoView">
<todo-panel id="selected-file">
@@ -234,7 +228,7 @@
<component name="ToolWindowManager">
<frame x="0" y="23" width="1280" height="731" extended-state="0" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
@@ -246,7 +240,7 @@
<window_info anchor="bottom" id="TODO" order="6" weight="0.3286385" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
<window_info anchor="bottom" id="Terminal" order="9" visible="true" weight="0.3286385" />
<window_info active="true" anchor="bottom" id="Terminal" order="9" visible="true" weight="0.3286385" />
<window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
@@ -286,6 +280,27 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/hw2.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="23" column="12" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/data/Tree.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="405">
<caret line="27" column="2" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/Node.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
<caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/script.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="75">
@@ -293,31 +308,10 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/Node.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="205">
<caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/hw2.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="23" column="12" lean-forward="true" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/data/Tree.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-128">
<caret line="27" column="2" lean-forward="true" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/Tree.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="788">
<caret line="85" column="42" lean-forward="true" selection-start-line="85" selection-start-column="42" selection-end-line="85" selection-end-column="42" />
<state relative-caret-position="295">
<caret line="83" column="32" lean-forward="true" selection-start-line="81" selection-start-column="8" selection-end-line="83" selection-end-column="32" />
</state>
</provider>
</entry>

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();
}
}