a4-scvoltmer-Stokley-Voltmer

README.md

@@ -1,64 +1,30 @@
 Assignment 4 - DataVis Remix + Multiple Views
 ===
 
-The primary aim of this assignment is to showcase your **individual** skills at critiquing, redesigning, and extending visualizations on the web.
+For my assignment I decided to remix the coronavirus visualization from the NBC webiste, I my biggest annoyance with it is that it is very hard to tell what is going 
+on, and that there is no relation between it and the world data. So I decided to create a visualization where one could see the comparison between the world covid cases and 
+the us cases. I also wanted to make it so you could look at rate of change, but as you will see, this clearly did not happen.
 
-### Your Task
+<img src="img/COVID data.PNG" width="500">
 
-Your task is to choose a visualization, remix it, and add at least two linked-views.
+## The Vis
 
-By remix, we mean:
+<img src="img/theVis.PNG" width="500">
 
-- Critique the original vis
-- Redesign some aspect of it, using better task abstractions, encodings, etc.
-- Implement your redesign
+The Vis consists of two linked svg's of data, the data coming from the csv file that NBC used for their original. Hovering over a bar in either data set will highlight the corresponding bars. As you can tell by the side of the vis I planned on having an interactive tool bar, but that did not happen.
 
-Examples of remixes include:
-- taking a static choropleth map with a bad color scale, implementing a new version in d3, adding interactivity, and improving the color scale to show the original data in a more effective way
-- finding a poorly designed or hard-to-use interactive visualization, and making a new version with better interaction design, such as features that enable the user to explore the data in new ways, by adding new views
+## Technical Achievments
 
-By two linked views, we mean:
+I acknowledge that there are no real technical achievments, but seeing as I didn't know what the DOM was before this class, everything feels like an achievment. Also, this has taken too long not to wite anything. 
+- set up the layout of the page (the DOM is confusing)
+- making the axes and scaling them, specifically, translating them into position was hard
+- extensive use of jquery
+- used dispatch and listeners to link events and passed variables through the listeners
 
-- Have two separate visualizations (likely separate SVGs), that visualize data using different idioms
-- Linked views means that interacting in one updates the other, and vice versa. Think about the interaction flow that leads to good user experience and aligns with tasks you've identified.
+## Link to Vis
+https://scvoltmer.github.io/04-Remix/
 
-Examples of linked views include:
-- A large central map or scatterplot, with ancillary histograms that can be used to filter-- perhaps time or other dimensions
-
-
-**Remember: the intent of this assignment is for you to demonstrate your understanding of the theory (e.g. concepts from Munzner's book) and practice (d3, and any tools you use for exploring the data) of visualization.**
-
-Incorporating a brief writeup with your remix is a good idea.
-Communicate what the original vis was, what the major issues were, and what new things can be seen with your redesign.
-You could have text directly on the page, an "info" button, an about page, etc.
-
-### More on Two Linked Views 
-One of the most powerful techniques for mitigating the shortcomings of a given visualization is to link it with other views.
-
-Linking a map to a bar or scatterplot, for instance, may allow you to overcome the shortcomings of a map.
-
-In general, linking visualizations allows you to explore different parts of the data between views, and mitigates the shortcomings of a given view by pairing it with other views.
-
-For this assignment, we want to see at least two linked views, in that interactions in one view updates the other, and vice versa. Many multiple views visualizations use more than two views, so consider such directions as possibilities for tech/design achievements. Be sure to think about what views work best for given tasks, and try to iterate/prototype if possible.
-
-Requirements
----
-
-0. Your code should be forked from the GitHub repo and linked using GitHub pages.
-1. Your project should load a dataset you found on the web from the vis you're remixing. You may extract the data by sight if necessary. Put this file in your repo.
-2. Your project should use d3 to build a visualization of the dataset. 
-3. Your writeup (readme.md in the repo) should contain the following:
-
-- Working link to the visualization hosted on gh-pages or other external sources.
-- Concise description and screenshot of your visualization.
-- Description of the technical achievements you attempted with this visualization.
-- Description of the design achievements you attempted with this visualization.
-
-Extra Links
----
-
-- https://observablehq.com/@philippkoytek/d3-part-3-brushing-and-linking
-- https://bl.ocks.org/john-guerra/raw/2c00b2d675a6bf1c84a7b140f4536b0d/
-- https://github.com/d3/d3-brush
-- https://observablehq.com/collection/@d3/d3-brush
-- https://observablehq.com/@d3/focus-context?collection=@d3/d3-brush
+## Acknowledgements
+- Javascript and Jquery by Jon Duckett
+- HTML and CSS by Jon Duckett
+- Learn D3.js by Helder da Rocha

img/gitignore

@@ -0,0 +1 @@
+

index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+    <meta charset="UTF-8">
+    <title>Assignment 4</title>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+    <link href="stylesheet.css" type="text/css" rel="stylesheet"/>
+
+</head>
+
+
+<body>
+   <div id="upper-container" class="basic-border">
+       <div id="tool-bar" class="box-style-2 basic-border side-by-side"></div>
+       <div id="bar-graph-box" class="box-style-1 basic-border side-by-side">
+           <svg height="100%" width="100%"  id="bar-graph-plane"></svg>
+       </div>
+       <div id="line-graph-box" class="box-style-1 basic-border side-by-side">
+           <svg height="100%" width="100%" id="line-graph-plane"></svg>
+       </div>
+   </div>
+
+<script src="main.js"></script>
+</body>
+
+</html>