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

pushing

Browse Source
This commit is contained in:
bbod
2019-09-23 21:45:12 -06:00
parent 417f1e2113
commit ce8cf0dffa
3 changed files with 153 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
hw3/.idea/workspace.xml generated
View File

@@ -27,24 +27,24 @@
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.extensions.edit"> <usages-collector id="statistics.file.extensions.edit">
<counts> <counts>
<entry key="html" value="132" /> <entry key="html" value="256" />
<entry key="js" value="1325" /> <entry key="js" value="3109" />
</counts> </counts>
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.types.edit"> <usages-collector id="statistics.file.types.edit">
<counts> <counts>
<entry key="HTML" value="132" /> <entry key="HTML" value="256" />
<entry key="JavaScript" value="1325" /> <entry key="JavaScript" value="3109" />
</counts> </counts>
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.extensions.open"> <usages-collector id="statistics.file.extensions.open">
<counts> <counts>
<entry key="js" value="1" /> <entry key="js" value="2" />
</counts> </counts>
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.types.open"> <usages-collector id="statistics.file.types.open">
<counts> <counts>
<entry key="JavaScript" value="1" /> <entry key="JavaScript" value="2" />
</counts> </counts>
</usages-collector> </usages-collector>
</session> </session>
@@ -54,8 +54,8 @@
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/hw3.html"> <entry file="file://$PROJECT_DIR$/hw3.html">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="430"> <state relative-caret-position="148">
<caret line="95" column="12" lean-forward="true" selection-start-line="95" selection-start-column="12" selection-end-line="95" selection-end-column="12" /> <caret line="83" column="52" selection-start-line="83" selection-start-column="22" selection-end-line="83" selection-end-column="52" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -63,8 +63,8 @@
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/script.js"> <entry file="file://$PROJECT_DIR$/script.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="336"> <state relative-caret-position="364">
<caret line="37" column="77" selection-start-line="37" selection-start-column="77" selection-end-line="37" selection-end-column="77" /> <caret line="88" column="45" selection-start-line="88" selection-start-column="45" selection-end-line="88" selection-end-column="45" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -73,7 +73,11 @@
</component> </component>
<component name="FindInProjectRecents"> <component name="FindInProjectRecents">
<findStrings> <findStrings>
<find>linestart</find>
<find>load</find>
<find>chart1</find> <find>chart1</find>
<find>d.id</find>
<find>trans</find>
</findStrings> </findStrings>
</component> </component>
<component name="Git.Settings"> <component name="Git.Settings">
@@ -98,7 +102,7 @@
<detection-done>true</detection-done> <detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting> <sorting>DEFINITION_ORDER</sorting>
</component> </component>
<component name="ProjectFrameBounds"> <component name="ProjectFrameBounds" fullScreen="true">
<option name="y" value="23" /> <option name="y" value="23" />
<option name="width" value="1280" /> <option name="width" value="1280" />
<option name="height" value="731" /> <option name="height" value="731" />
@@ -176,18 +180,17 @@
<updated>1569214123580</updated> <updated>1569214123580</updated>
<workItem from="1569214124878" duration="389000" /> <workItem from="1569214124878" duration="389000" />
<workItem from="1569214556532" duration="97000" /> <workItem from="1569214556532" duration="97000" />
<workItem from="1569214674667" duration="5314000" /> <workItem from="1569214674667" duration="17129000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="5800000" /> <option name="totallyTimeSpent" value="17615000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="0" y="23" width="1280" height="731" extended-state="0" /> <frame x="0" y="0" width="1280" height="800" extended-state="0" />
<editor active="true" />
<layout> <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" weight="0.25" /> <window_info id="Structure" order="1" weight="0.25" />
<window_info id="Image Layers" order="2" /> <window_info id="Image Layers" order="2" />
<window_info id="Designer" order="3" /> <window_info id="Designer" order="3" />
@@ -203,7 +206,7 @@
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" /> <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" /> <window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="bottom" id="Version Control" order="7" /> <window_info anchor="bottom" id="Version Control" order="7" />
<window_info anchor="bottom" id="Terminal" order="8" /> <window_info active="true" anchor="bottom" id="Terminal" order="8" visible="true" weight="0.28767124" />
<window_info anchor="bottom" id="Event Log" order="9" side_tool="true" /> <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
<window_info anchor="right" id="Commander" order="0" weight="0.4" /> <window_info anchor="right" id="Commander" order="0" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" /> <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
@@ -224,17 +227,20 @@
<option name="myLimit" value="2678400000" /> <option name="myLimit" value="2678400000" />
</component> </component>
<component name="editorHistoryManager"> <component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/d3.js">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/hw3.html"> <entry file="file://$PROJECT_DIR$/hw3.html">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="430"> <state relative-caret-position="148">
<caret line="95" column="12" lean-forward="true" selection-start-line="95" selection-start-column="12" selection-end-line="95" selection-end-column="12" /> <caret line="83" column="52" selection-start-line="83" selection-start-column="22" selection-end-line="83" selection-end-column="52" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/script.js"> <entry file="file://$PROJECT_DIR$/script.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="336"> <state relative-caret-position="364">
<caret line="37" column="77" selection-start-line="37" selection-start-column="77" selection-end-line="37" selection-end-column="77" /> <caret line="88" column="45" selection-start-line="88" selection-start-column="45" selection-end-line="88" selection-end-column="45" />
</state> </state>
</provider> </provider>
</entry> </entry>

14
hw3/hw3.html
View File

@@ -73,7 +73,7 @@
</span> </span>
<span> <span>
<input type="checkbox" id="random" onselect="randomSubset()"> Random Subset <input type="checkbox" id="random" onchange="randomSubset()"> Random Subset
</span> </span>
<br> <br>
@@ -81,7 +81,7 @@
<div> <div>
<h2>Bar Charts</h2> <h2>Bar Charts</h2>
<svg width="200" height="200" id="chart1"> <svg width="200" height="200" id="chart1">
<g transform="translate(0, 200) scale(1, -1)" class="barChart" > <g transform="translate(0, 200) scale(1, -1)" class="barChart" id="barChart1" >
<rect x="10" y="0" width="10" height="100"></rect> <rect x="10" y="0" width="10" height="100"></rect>
<rect x="20" y="0" width="10" height="80"></rect> <rect x="20" y="0" width="10" height="80"></rect>
<rect x="30" y="0" width="10" height="130"></rect> <rect x="30" y="0" width="10" height="130"></rect>
@@ -117,14 +117,14 @@
<h2>Line Charts</h2> <h2>Line Charts</h2>
<svg width="200" height="200"> <svg width="200" height="200">
<g transform="translate(10, 200) scale(1, -1)"> <g transform="translate(10, 200) scale(1, -1)" id="line1">
<path class="lines" <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> 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> </g>
</svg> </svg>
<svg width="200" height="200"> <svg width="200" height="200">
<g class="lines" transform="translate(10, 200) scale(1, -1)"> <g class="lines" transform="translate(10, 200) scale(1, -1)" id="line2">
<path class="lines" <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> 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> </g>
@@ -135,14 +135,14 @@
<h2>Area Charts</h2> <h2>Area Charts</h2>
<svg width="200" height="200"> <svg width="200" height="200">
<g transform="translate(10, 200) scale(1, -1)"> <g transform="translate(10, 200) scale(1, -1)" id="area1">
<path class="areas" <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> 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> </g>
</svg> </svg>
<svg width="200" height="200"> <svg width="200" height="200">
<g transform="translate(10, 200) scale(1, -1)"> <g transform="translate(10, 200) scale(1, -1)" id="area2">
<path class="areas" <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> 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> </g>
@@ -154,7 +154,7 @@
<svg width="200" height="200"> <svg width="200" height="200">
<rect x="0" y="0" width="200" height="200" class="frame"></rect> <rect x="0" y="0" width="200" height="200" class="frame"></rect>
<g transform="translate(0, 200) scale(1, -1)"> <g transform="translate(0, 200) scale(1, -1)" id="scatterplot">
<circle cx="100" cy="91" r="5"></circle> <circle cx="100" cy="91" r="5"></circle>
<circle cx="80" cy="81" r="5"></circle> <circle cx="80" cy="81" r="5"></circle>
<circle cx="130" cy="87" r="5"></circle> <circle cx="130" cy="87" r="5"></circle>

109
hw3/script.js
View File

@@ -33,38 +33,127 @@ function update(data) {
// ****** TODO: PART III (you will also edit in PART V) ****** // ****** TODO: PART III (you will also edit in PART V) ******
// TODO: Select and update the 'a' bar chart bars // TODO: Select and update the 'a' bar chart bars
let aBars = document.getElementById("chart1").children[0].children; //let chart1 = d3.select('#chart1').selectAll('rect');
for(let i = 0; i < aBars.length; i++){ d3.select('#chart1')
console.log(aScale(data[i].a)); .selectAll('rect')
d3.select("chart1").select("barChart").selectAll('rect').attr('height', aScale(data[i].a)); .data(data)
aBars[i].height = aScale(data[i].a); .on('mouseover', function(d,i) {
} d3.select(this).style('fill', 'orange')
})
.on('mouseout', function(d,i) {
d3.select(this).style('fill', 'steelblue')
})
.attr('height', d => aScale(d.a))
.enter()
.append("rect")
.attr("x", function(d,i){
return iScale(i+1);
})
.attr("y", 0)
.attr("width", 20)
.attr("height", 0)
.style("fill", "orange")
.attr("opacity", 0)
.exit()
.remove()
;
// TODO: Select and update the 'b' bar chart bars // TODO: Select and update the 'b' bar chart bars
let bBars = document.getElementById("chart2").children[0].children; let tmp = d3.select('#chart2')
for(let i = 0; i < bBars.length; i++){ .selectAll('rect')
bBars[i].height = bScale(data[i].b); .data(data);
}
tmp.on('mouseover', function(d,i) {
d3.select(this).style('fill', 'orange')
})
.on('mouseout', function(d,i) {
d3.select(this).style('fill', 'steelblue')
})
.attr('height', d => aScale(d.b));
tmp.enter()
.append("rect")
.attr("x", function(d,i){
return iScale(i+1);
})
.attr("y", 0)
.attr("width", 20)
.attr("height", 0)
.attr("translate(0, 200) scale(1, -1)")
.style("fill", "steelblue");
tmp.exit()
.remove();
// TODO: Select and update the 'a' line chart path using this line generator // TODO: Select and update the 'a' line chart path using this line generator
let aLineGenerator = d3.line() let aLineGenerator = d3.line()
.x((d, i) => iScale(i)) .x((d, i) => iScale(i))
.y((d) => aScale(d.a)); .y((d) => aScale(d.a));
d3.select('#line1')
.select('path')
.attr("d", aLineGenerator(data));
// TODO: Select and update the 'b' line chart path (create your own generator) // TODO: Select and update the 'b' line chart path (create your own generator)
let bLineGenerator = d3.line()
.x((d, i) => iScale(i))
.y((d) => bScale(d.b));
d3.select('#line2')
.select('path')
.attr("d", bLineGenerator(data));
// TODO: Select and update the 'a' area chart path using this area generator // TODO: Select and update the 'a' area chart path using this area generator
let aAreaGenerator = d3.area() let aAreaGenerator = d3.area()
.x((d, i) => iScale(i)) .x((d, i) => iScale(i))
.y0(0) .y0(0)
.y1(d => aScale(d.a)); .y1(d => aScale(d.a));
d3.select('#area1')
.select('path')
.attr("d", aAreaGenerator(data));
// TODO: Select and update the 'b' area chart path (create your own generator) // TODO: Select and update the 'b' area chart path (create your own generator)
let bAreaGenerator = d3.area()
.x((d, i) => iScale(i))
.y0(0)
.y1(d => aScale(d.b));
d3.select('#area2')
.select('path')
.attr("d", bAreaGenerator(data));
// TODO: Select and update the scatterplot points // TODO: Select and update the scatterplot points
d3.select('#scatterplot')
.selectAll('circle')
.data(data)
.on('click', d => console.log([d.a, d.b]))
.attr('cx', d => aScale(d.a))
.attr('cy', d => bScale(d.b));
// ****** TODO: PART IV ****** // ****** TODO: PART IV ******
} }
/** /**