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

14
hw3/hw3.html
View File

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

149
hw3/script.js
View File

@@ -18,40 +18,104 @@ function staircase() {
* @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]);
// 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: PART III (you will also edit in PART V) ******
// TODO: Select and update the 'a' bar chart bars
let aBars = document.getElementById("chart1").children[0].children;
for(let i = 0; i < aBars.length; i++){
console.log(aScale(data[i].a));
d3.select("chart1").select("barChart").selectAll('rect').attr('height', aScale(data[i].a));
aBars[i].height = aScale(data[i].a);
}
// TODO: Select and update the 'a' bar chart bars
//let chart1 = d3.select('#chart1').selectAll('rect');
d3.select('#chart1')
.selectAll('rect')
.data(data)
.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))
// TODO: Select and update the 'b' bar chart bars
let bBars = document.getElementById("chart2").children[0].children;
for(let i = 0; i < bBars.length; i++){
bBars[i].height = bScale(data[i].b);
}
// TODO: Select and update the 'a' line chart path using this line generator
.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
let tmp = d3.select('#chart2')
.selectAll('rect')
.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
let aLineGenerator = d3.line()
.x((d, i) => iScale(i))
.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)
let bLineGenerator = d3.line()
.x((d, i) => iScale(i))
.y((d) => bScale(d.b));
d3.select('#line2')
.select('path')
.attr("d", bLineGenerator(data));
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()
@@ -59,12 +123,37 @@ function update(data) {
.y0(0)
.y1(d => aScale(d.a));
// TODO: Select and update the 'b' area chart path (create your own generator)
d3.select('#area1')
.select('path')
.attr("d", aAreaGenerator(data));
// 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
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: Select and update the scatterplot points
// ****** TODO: PART IV ******
}
/**