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 id="statistics.file.extensions.edit">
<counts>
<entry key="html" value="256" />
<entry key="js" value="3109" />
<entry key="html" value="274" />
<entry key="js" value="3414" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.edit">
<counts>
<entry key="HTML" value="256" />
<entry key="JavaScript" value="3109" />
<entry key="HTML" value="274" />
<entry key="JavaScript" value="3414" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.open">
@@ -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="148">
<caret line="83" column="52" selection-start-line="83" selection-start-column="22" selection-end-line="83" selection-end-column="52" />
<state relative-caret-position="-575">
<caret line="99" column="84" selection-start-line="99" selection-start-column="84" selection-end-line="99" selection-end-column="84" />
</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="364">
<caret line="88" column="45" selection-start-line="88" selection-start-column="45" selection-end-line="88" selection-end-column="45" />
<state relative-caret-position="193">
<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>
</provider>
</entry>
@@ -180,15 +180,16 @@
<updated>1569214123580</updated>
<workItem from="1569214124878" duration="389000" />
<workItem from="1569214556532" duration="97000" />
<workItem from="1569214674667" duration="17129000" />
<workItem from="1569214674667" duration="18857000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="17615000" />
<option name="totallyTimeSpent" value="19343000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="0" width="1280" height="800" extended-state="0" />
<editor active="true" />
<layout>
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
<window_info id="Structure" order="1" weight="0.25" />
@@ -199,14 +200,14 @@
<window_info id="Favorites" order="6" side_tool="true" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" />
<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="Debug" order="3" weight="0.4" />
<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="TODO" order="6" />
<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="right" id="Commander" order="0" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
@@ -232,15 +233,15 @@
</entry>
<entry file="file://$PROJECT_DIR$/hw3.html">
<provider selected="true" editor-type-id="text-editor">
<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 relative-caret-position="-575">
<caret line="99" column="84" selection-start-line="99" selection-start-column="84" selection-end-line="99" selection-end-column="84" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/script.js">
<provider selected="true" editor-type-id="text-editor">
<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 relative-caret-position="193">
<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>
</provider>
</entry>

2
hw3/hw3.html
View File

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