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

I think its working

Browse Source
This commit is contained in:
bbod
2019-09-23 22:15:52 -06:00
parent ce8cf0dffa
commit f3e18a366e
3 changed files with 60 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,14 +27,14 @@
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.extensions.edit"> <usages-collector id="statistics.file.extensions.edit">
<counts> <counts>
<entry key="html" value="256" /> <entry key="html" value="274" />
<entry key="js" value="3109" /> <entry key="js" value="3414" />
</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="256" /> <entry key="HTML" value="274" />
<entry key="JavaScript" value="3109" /> <entry key="JavaScript" value="3414" />
</counts> </counts>
</usages-collector> </usages-collector>
<usages-collector id="statistics.file.extensions.open"> <usages-collector id="statistics.file.extensions.open">
@@ -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="148"> <state relative-caret-position="-575">
<caret line="83" column="52" selection-start-line="83" selection-start-column="22" selection-end-line="83" selection-end-column="52" /> <caret line="99" column="84" selection-start-line="99" selection-start-column="84" selection-end-line="99" selection-end-column="84" />
</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="364"> <state relative-caret-position="193">
<caret line="88" column="45" selection-start-line="88" selection-start-column="45" selection-end-line="88" selection-end-column="45" /> <caret line="154" column="25" lean-forward="true" selection-start-line="154" selection-start-column="25" selection-end-line="154" selection-end-column="25" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -180,15 +180,16 @@
<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="17129000" /> <workItem from="1569214674667" duration="18857000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="17615000" /> <option name="totallyTimeSpent" value="19343000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="0" y="0" width="1280" height="800" extended-state="0" /> <frame x="0" y="0" width="1280" height="800" extended-state="0" />
<editor active="true" />
<layout> <layout>
<window_info 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" />
@@ -199,14 +200,14 @@
<window_info id="Favorites" order="6" side_tool="true" /> <window_info id="Favorites" order="6" side_tool="true" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" /> <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
<window_info anchor="bottom" id="Message" order="0" /> <window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" /> <window_info active="true" anchor="bottom" id="Find" order="1" visible="true" weight="0.32876712" />
<window_info anchor="bottom" id="Run" order="2" /> <window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" /> <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" /> <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<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 active="true" anchor="bottom" id="Terminal" order="8" visible="true" weight="0.28767124" /> <window_info anchor="bottom" id="Terminal" order="8" 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" />
@@ -232,15 +233,15 @@
</entry> </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="148"> <state relative-caret-position="-575">
<caret line="83" column="52" selection-start-line="83" selection-start-column="22" selection-end-line="83" selection-end-column="52" /> <caret line="99" column="84" selection-start-line="99" selection-start-column="84" selection-end-line="99" selection-end-column="84" />
</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="364"> <state relative-caret-position="193">
<caret line="88" column="45" selection-start-line="88" selection-start-column="45" selection-end-line="88" selection-end-column="45" /> <caret line="154" column="25" lean-forward="true" selection-start-line="154" selection-start-column="25" selection-end-line="154" selection-end-column="25" />
</state> </state>
</provider> </provider>
</entry> </entry>

2
hw3/hw3.html
View File

@@ -97,7 +97,7 @@
</svg> </svg>
<svg width="200" height="200" id="chart2"> <svg width="200" height="200" id="chart2">
<g transform="translate(0, 200) scale(1, -1)" class="barChart" > <g transform="translate(0, 200) scale(1, -1)" class="barChart" id="barChart2" >
<rect x="10" y="0" width="10" height="91"></rect> <rect x="10" y="0" width="10" height="91"></rect>
<rect x="20" y="0" width="10" height="81"></rect> <rect x="20" y="0" width="10" height="81"></rect>
<rect x="30" y="0" width="10" height="87"></rect> <rect x="30" y="0" width="10" height="87"></rect>

75
hw3/script.js
View File

@@ -34,65 +34,65 @@ function update(data) {
// TODO: Select and update the 'a' bar chart bars // TODO: Select and update the 'a' bar chart bars
//let chart1 = d3.select('#chart1').selectAll('rect'); //let chart1 = d3.select('#chart1').selectAll('rect');
d3.select('#chart1') let barChart1 = d3.select('#barChart1')
.selectAll('rect') .selectAll('rect')
.data(data) .data(data);
.on('mouseover', function(d,i) { barChart1.exit().remove();
barChart1.on('mouseover', function (d, i) {
d3.select(this).style('fill', 'orange') d3.select(this).style('fill', 'orange')
}) })
.on('mouseout', function(d,i) { .on('mouseout', function (d, i) {
d3.select(this).style('fill', 'steelblue') d3.select(this).style('fill', 'steelblue')
}) })
.attr('height', d => aScale(d.a)) .attr('height', d => aScale(d.a));
.enter() barChart1.enter()
.append("rect") .append("rect")
.attr("x", function(d,i){ .attr("x", function (d, i) {
return iScale(i+1); return iScale(i + 1);
}) })
.attr("height", d => aScale(d.a))
.attr("y", 0) .attr("y", 0)
.attr("width", 20) .attr("width", 10)
.attr("height", 0)
.style("fill", "orange") .style("fill", "steelblue");
.attr("opacity", 0)
.exit()
.remove()
;
// TODO: Select and update the 'b' bar chart bars // TODO: Select and update the 'b' bar chart bars
let tmp = d3.select('#chart2') let barChart2 = d3.select('#barChart2')
.selectAll('rect') .selectAll('rect')
.data(data); .data(data);
tmp.on('mouseover', function(d,i) { barChart2.exit().remove();
d3.select(this).style('fill', 'orange')
barChart2.on('mouseover', function (d, i) {
d3.select(this).style('fill', 'orange')
}) })
.on('mouseout', function(d,i) { .on('mouseout', function (d, i) {
d3.select(this).style('fill', 'steelblue') d3.select(this).style('fill', 'steelblue')
}) })
.attr('height', d => aScale(d.b)); .attr('height', d => aScale(d.b));
tmp.enter() barChart2.enter()
.append("rect") .append("rect")
.attr("x", function(d,i){ .attr("x", function (d, i) {
return iScale(i+1); return iScale(i + 1);
}) })
.attr("height", d => aScale(d.b))
.attr("y", 0) .attr("y", 0)
.attr("width", 20) .attr("width", 10)
.attr("height", 0)
.attr("translate(0, 200) scale(1, -1)")
.style("fill", "steelblue"); .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
@@ -101,9 +101,10 @@ function update(data) {
.x((d, i) => iScale(i)) .x((d, i) => iScale(i))
.y((d) => aScale(d.a)); .y((d) => aScale(d.a));
d3.select('#line1') let line1 = d3.select('#line1')
.select('path') .select('path');
.attr("d", aLineGenerator(data));
line1.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)
@@ -140,13 +141,21 @@ function update(data) {
// TODO: Select and update the scatterplot points // TODO: Select and update the scatterplot points
d3.select('#scatterplot') let scatterPlot = d3.select('#scatterplot')
.selectAll('circle') .selectAll('circle')
.data(data) .data(data);
.on('click', d => console.log([d.a, d.b]))
scatterPlot.exit().remove();
scatterPlot.on('click', d => console.log([d.a, d.b]))
.attr('cx', d => aScale(d.a)) .attr('cx', d => aScale(d.a))
.attr('cy', d => bScale(d.b)); .attr('cy', d => bScale(d.b));
scatterPlot.enter()
.append('circle')
.attr('cx', d => aScale(d.a))
.attr('cy', d=> bScale(d.b))
.attr('r', 5);
// ****** TODO: PART IV ****** // ****** TODO: PART IV ******