cs573-22s · speraruba · Jan 29, 2022 · Feb 3, 2022 · Feb 3, 2022 · Feb 4, 2022
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/a2-DataVis-5ways.iml b/.idea/a2-DataVis-5ways.iml
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/D3/D3.html b/D3/D3.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="author" content="Ziyang Xu">
+	<title>HW 2</title>
+
+  <script src = "https://d3js.org/d3.v6.min.js"></script>
+	<script src="https://d3js.org/d3-color.v2.min.js"></script>
+	<script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
+	<script src="https://d3js.org/d3-scale-chromatic.v2.min.js"></script>
+  <script src="https://d3js.org/d3.v4.js"></script>
+</head>
+
+<body>
+	<h1 id='title' style='text-align:center; font-family:Geneva, Arial, Serif'>Weight vs MPG </h1>
+	<p id='author' style='text-align:center; font-family:Geneva, Arial, Serif'>Ziyang Xu</p>
+
+
+<div id="viz"></div>
+
+<script>
+
+var margin = {top: 100, right: 100, bottom: 100, left: 100},
+    width = 800 - margin.left - margin.right,
+    height = 700 - margin.top - margin.bottom;
+
+
+var svg = d3.select("#viz")
+  .append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform",
+          "translate(" + margin.left + "," + margin.top + ")");
+
+  svg.append("rect")
+    .attr("x",0)
+    .attr("y",0)
+    .attr("height", height)
+    .attr("width", width)
+    .style("fill", "#f0f4ef")
+
+
+d3.csv("https://raw.githubusercontent.com/PyRookie/a2-DataVis-5ways/main/cars-sample.csv", function(data) {
+
+
+  var x = d3.scaleLinear()
+    .domain([2000*.75, 5000*1.02])
+    .range([ 0, width ]);
+  svg.append("g")
+    .attr("transform", "translate(0," + height + ")")
+    .call(d3.axisBottom(x)
+    .tickSize(-height).ticks(4)
+    .tickSizeOuter(0));
+
+  svg.append("text")
+    .attr("class", "x label")
+    .attr("text-anchor", "end")
+    .attr("x", width - 270)
+    .attr("y", height + 30)
+    .text("Weight");
+
+  var y = d3.scaleLinear()
+    .domain([10*.89, 40*1.2])
+    .range([ height, 0]);
+  svg.append("g")
+    .call(d3.axisLeft(y)
+    .tickSize(-width).ticks(4)
+    .tickSizeOuter(0));
+
+  svg.append("text")
+    .attr("class", "y label")
+    .attr("text-anchor", "end")
+    .attr("y", -25)
+    .attr("x", -250)
+    .attr("dy", ".75em")
+    .attr("transform", "rotate(-90)")
+    .text("MPG");
+
+  svg.selectAll(".tick line")
+  .attr("stroke", "white");
+
+  var size = d3.scaleLinear() 
+    .domain([2000, 5000])
+    .range([5,14]);
+
+  var color = d3.scaleOrdinal()
+    .domain(["bmw", "ford", "honda", "mercedes", "toyota" ])
+    .range([ "#E25B3E", "#E2BD3E", "#A8E23E","#3EE2A7", "#3E5FE2"]);
+
+
+  svg.append('g')
+    .selectAll("dot")
+    .data(data)
+    .enter()
+    .append("circle")
+      .attr("cx", function (d) { return x(d.Weight); } )
+      .attr("cy", function (d) { return y(d.MPG); } )
+      .attr("r", function (d) { return size(d.Weight);})
+      .style("fill", function (d) { 
+          return color(d.Manufacturer); } )
+      .style("opacity", .50)
+      .on('mouseover', function (d, i) {
+         d3.select(this).transition()
+          .duration('200')
+          .attr("r", 10)
+          .style("opacity", 1);})
+      .on('mouseout', function (d, i) {
+          d3.select(this).transition()
+          .duration('200')
+          .attr("r", 1)
+          .style("opacity", 0); });})
+
+</script>
+</body>
diff --git a/FLOURISH/flourish.html b/FLOURISH/flourish.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="flourish-embed flourish-scatter" data-src="visualisation/8603056">
+      <script src="https://public.flourish.studio/resources/embed.js">
+      </script>
+    </div>
+</body>
+
+</html>
diff --git a/R/cars.Rmd b/R/cars.Rmd
@@ -0,0 +1,13 @@
+---
+title: "R ggplot2"
+output: html_document
+---
+
+
+
+```{r}
+library(ggplot2)
+cars <- read.csv("https://raw.githubusercontent.com/cs573-22s/a2-DataVis-5ways/main/cars-sample.csv")
+ggplot(cars, aes(x=Weight, y=MPG, size=Weight, color=Manufacturer)) + geom_point(alpha = 0.6)
+```
+
diff --git a/R/cars.html b/R/cars.html
diff --git a/README.md b/README.md
@@ -1,142 +1,54 @@
-# 02-DataVis-5ways
+# Assignment 2 - Data Visualization, 5 Ways  
+===============================================
 
-Assignment 2 - Data Visualization, 5 Ways  
-===
 
-Now that you have successfully made a "visualization" of shapes and lines using d3, your next assignment is to successfully make a *actual visualization*... 5 times. 
+I have used three libraries with three different languages, including:
+- Javascript + D3
+- Python + Seaborn
+- R + ggplot2
 
-The goal of this project is to gain experience with as many data visualization libraries, languages, and tools as possible.
+And additional two tools:
+- Flourish
+- Tableau Desktop
 
-I have provided a small dataset about cars, `cars-sample.csv`.
-Each row contains a car and several variables about it, including miles-per-gallon, manufacturer, and more.
+ # JavaScript + D3
+![d3](https://raw.githubusercontent.com/speraruba/a2-DataVis-5ways/main/img/D3.png)
 
-Your goal is to use 5 different tools to make the following chart:
+D3.js is a JavaScript library for manipulating documents based on data. D3 helps us bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives us the full capabilities of modern browsers without tying ourselves to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
 
-![ggplot2](img/ggplot2.png)
+ # Flourish
+![Flourish](https://raw.githubusercontent.com/speraruba/a2-DataVis-5ways/main/img/Flourish.png)
 
-These features should be preserved as much as possible in your replication:
+Flourish is an online data visualization tool. It’s easier to use than Tableau, and most importantly, it’s free. For individuals, Flourish is good enough. But for companies and organizations, Tableau is better. 
 
-- Data positioning: it should be a downward-trending scatterplot as shown.  Weight should be on the x-axis and MPG on the y-axis.
-- Scales: Note the scales do not start at 0.
-- Axis ticks and labels: both axes are labeled and there are tick marks at 10, 20, 30, etcetera.
-- Color mapping to Manufacturer.
-- Size mapping to Weight.
-- Opacity of circles set to 0.5 or 50%.
 
-Other features are not required. This includes:
+ # Python + seaborn
+![seaborn](https://raw.githubusercontent.com/speraruba/a2-DataVis-5ways/main/img/Seaborn.png)
 
-- The background grid.
-- The legends.
+Matplotlib is a plotting library for the Python programming language and its numerical mathematics extension NumPy. It provides an object-oriented API for embedding plots into applications using general-purpose GUI toolkits like Tkinter, wxPython, Qt, or GTK+.
 
-Note that some software packages will make it **impossible** to perfectly preserve the above requirements. 
-Be sure to note where these do not support the features you need, but feel free to still use them.
+Seaborn is a Python data visualization library based on matplotlib. It provides a high-level interface for drawing attractive and informative statistical graphics. 
 
-Improvements to the chart and design are also welcome as part of Technical and Design achievements.
+I use `pandas.read_csv()` to load data, then use `seaborn.scatterplot()` to plot graphics. Finally, I will use `plt.show()` to show result.
 
-Libraries, Tools, Languages
----
 
-You are required to use 5 different tools or libraries.
-Of the 5 tools, you must use at least 3 libraries (libraries require code of some kind).
-This could be `Python, R, Javascript`, or `Java, Javascript, Matlab` or any other combination.
-Dedicated tools (i.e. Excel) do not count towards the language requirement.
+ # R + ggplot2 + R markdown
+![ggplot2](https://raw.githubusercontent.com/speraruba/a2-DataVis-5ways/main/img/ggplot2.png)
 
-Otherwise, you should seek tools and libraries like Excel, Tableau, or Flourish to fill out your 5.
+- R is a language primarily focused on statistical computing. 
+- GGPlot2 is a system for declaratively creating graphics, based on The Grammar of Graphics. You provide the data, tell ggplot2 how to map variables to aesthetics, what graphical primitives to use, and it takes care of the details.
+-  R Markdown is a document format that compiles to HTML or PDF and allows you to include the output of R code directly in the document.
 
-Below are a few ideas. Do not limit yourself to this list!
-Some may be difficult choices, like Matlab or SPSS, which require large installations, licenses, and occasionally difficult UIs.
+ I used `geom_point()` layer to visualized the dataset. And outputed the R-markdown file as HTML format.
 
-I have marked a few that are strongly suggested.
 
-- R + ggplot2 `<- definitely worth trying`
-- Excel
-- d3 `<- since the rest of the class uses this, we're requiring it`
-- Matplotlib
-- three.js `<- well, it's a 3d library. not really recommended, but could be interesting and fun`
-- p5js `<- good for playing around. not really a chart lib but great for art and animation`
-- Tableau
-- Java 2d
-- GNUplot
-- Vega-lite <- `<- very cool formal language for visualization. might be the future of the field.`
-- Flourish <- `<- popular in recent years`
-- PowerBI
-- SPSS
+ # Tableau Desktop
+ ![tableau](https://raw.githubusercontent.com/speraruba/a2-DataVis-5ways/main/img/tableau.png)
 
-You may write everything from scratch, or start with demo programs from books or the web. 
-If you do start with code that you found, please identify the source of the code in your README and, most importantly, make non-trivial changes to the code to make it your own so you really learn what you're doing. 
+Tableau Desktop is data visualization software that lets you see and understand data in minutes.
 
-Tips
----
 
-- If you're using d3, key to this assignment is knowing how to load data.
-You will likely use the [`d3.json` or `d3.csv` functions](https://github.com/mbostock/d3/wiki/Requests) to load the data you found.
-Beware that these functions are *asynchronous*, meaning it's possible to "build" an empty visualization before the data actually loads.
+
 
-- *For web languages like d3* Don't forget to run a local webserver when you're debugging.
-See this [ebook](http://chimera.labs.oreilly.com/books/1230000000345/ch04.html#_setting_up_a_web_server) if you're stuck.
 
 
-Readme Requirements
----
-
-A good readme with screenshots and structured documentation is required for this project. 
-It should be possible to scroll through your readme to get an overview of all the tools and visualizations you produced.
-
-- Each visualization should start with a top-level heading (e.g. `# d3`)
-- Each visualization should include a screenshot. Put these in an `img` folder and link through the readme (markdown command: `![caption](img/<imgname>)`.
-- Write a paragraph for each visualization tool you use. What was easy? Difficult? Where could you see the tool being useful in the future? Did you have to use any hacks or data manipulation to get the right chart?
-
-Other Requirements
----
-
-0. Your code should be forked from the GitHub repo.
-1. Place available code, Excel sheets, etcetera in a named folder. For example, `r-ggplot, matlab, mathematica, excel` and so on.
-2. Your writeup (readme.md in the repo) should also contain the following:
-
-- Description of the Technical achievements you attempted with this visualization.
-  - Some ideas include interaction, such as mousing over to see more detail about the point selected.
-- Description of the Design achievements you attempted with this visualization.
-  - Some ideas include consistent color choice, font choice, element size (e.g. the size of the circles).
-
-GitHub Details
----
-
-- Fork the GitHub Repository. You now have a copy associated with your username.
-- Make changes to fulfill the project requirements. 
-- To submit, make a [Pull Request](https://help.github.com/articles/using-pull-requests/) on the original repository.
-
-Grading
----
-
-Grades on a 120 point scale. 
-24 points will be based on your Technical and Design achievements, as explained in your readme. 
-
-Make sure you include the files necessary to reproduce your plots.
-You should structure these in folders if helpful.
-We will choose some at random to run and test.
-
-**NOTE: THE BELOW IS A SAMPLE ENTRY TO GET YOU STARTED ON YOUR README. YOU MAY DELETE THE ABOVE.**
-
-# R + ggplot2 + R Markdown
-
-R is a language primarily focused on statistical computing.
-ggplot2 is a popular library for charting in R.
-R Markdown is a document format that compiles to HTML or PDF and allows you to include the output of R code directly in the document.
-
-To visualized the cars dataset, I made use of ggplot2's `geom_point()` layer, with aesthetics functions for the color and size.
-
-While it takes time to find the correct documentation, these functions made the effort creating this chart minimal.
-
-![ggplot2](img/ggplot2.png)
-
-# d3...
-
-(And so on...)
-
-
-## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI Forever**: ...
-
-### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: As demonstrated in my colorscheme...