add demos

InteractiveDataVis · Jan 29, 2024 · b79963c · b79963c
1 parent 9483cc9
commit b79963c
Show file tree

Hide file tree

Showing 15 changed files with 833 additions and 156 deletions.
diff --git a/1_2_basic_html/index.html b/1_2_basic_html/index.html
@@ -1,19 +1,78 @@
-
 <!DOCTYPE html>
-<head>
-  <meta charset="utf-8">
-  <title>Interactive Data Visualization Tutorial</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
-  <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-  <h1>Hello World!</h1>
-  <h3>Section 1 | Tutorial 2 | Basic HTML</h3>
-  <table>
-    <!-- Add your table data here -->
-  </table>
-  <svg>
-    <!-- Add your rectangles in here -->
-  </svg>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title>Interactive Data Visualization Tutorial</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <h3>Section 1 | Tutorial 2 | Basic HTML</h3>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table">Table Reference Here</a>
+    <table>
+      <thead>
+        <tr>
+          <th colspan="2">Fall 2023 Data 73200</th>
+        </tr>
+        <tr>
+          <th>Firstname</th>
+          <th>Lastname</th>
+        </tr>
+      </thead>
+      <tr>
+        <td>Micaiah</td>
+        <td>Davis</td>
+      </tr>
+      <tr>
+        <td>Thomas</td>
+        <td>Fagin</td>
+      </tr>
+      <tr>
+        <td>Colin</td>
+        <td>Geraghty</td>
+      </tr>
+      <tr>
+        <td>Marilyn</td>
+        <td>Moy</td>
+      </tr>
+      <tr>
+        <td>Randip</td>
+        <td>Parhar</td>
+      </tr>
+      <tr>
+        <td>Monica</td>
+        <td>Rocha</td>
+      </tr>
+      <tr>
+        <td>Henry</td>
+        <td>Shen</td>
+      </tr>
+      <tr>
+        <td>Akeem</td>
+        <td>Shepherd</td>
+      </tr>
+      <tr>
+        <td>Matthew</td>
+        <td>Stanton</td>
+      </tr>
+      <tr>
+        <td>Hyojin</td>
+        <td>Yoo</td>
+      </tr>
+    </table>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG Reference Here</a>
+    <svg style="width:600px; height:300px">
+      <defs>
+        <linearGradient id="gradient" gradientTransform="rotate(90)">
+          <stop offset="5%"  stop-color="LightSteelBlue" />
+          <stop offset="30%"  stop-color="salmon" />
+          <stop offset="95%" stop-color="gold" />
+        </linearGradient>
+      </defs>
+      <circle fill="LightCoral" r="50" />
+      <circle fill="Thistle" cx="150" r="50" />
+      <circle fill="PaleGreen" cx="150" cy="150" r="50" />
+      <circle fill="url('#gradient')" cx="300" cy="150" r="50" />
+    </svg>
+  </body>
 </html>
diff --git a/1_3_intro_to_js/index.html b/1_3_intro_to_js/index.html
@@ -1,15 +1,17 @@
 
 <!DOCTYPE html>
-<head>
-  <meta charset="utf-8">
-  <title>Interactive Data Visualization Tutorial</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
-  <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-  <h1>Hello World!</h1>
-  <h3>Section 1 | Tutorial 3 | Intro to JS</h3>
-  <!-- add any HTML you might need here, like a button or a div -->
-  <script src="main.js"></script>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title>Interactive Data Visualization Tutorial</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <h3>Section 1 | Tutorial 3 | Intro To JS</h3>
+    <div id="name-label">Enter your name:</div>
+    <input id="name-input"/>
+    <button id="name-submit" onclick="updateName()">Submit</button>
+    <script src="main.js"></script>
+  </body>
 </html>
diff --git a/1_3_intro_to_js/main.js b/1_3_intro_to_js/main.js
@@ -1 +1,89 @@
-console.log('hello world');
+console.log('hello world');
+
+/** 
+ * JS TYPES 
+ * */
+const string = "string!";
+const number = 0;
+const boolean = true;
+const array = ['first', 'second', 'third']
+const object = {
+  key: 'value',
+  otherKey: 'otherValue'
+}
+
+
+/** 
+ * LET VS CONST 
+ * */
+let changeableGlobal = true;
+const constantGlobal = true;
+function changeEmUp() {
+  // this will work
+  changeableGlobal = false;
+  console.log('changeableGlobal :>> ', changeableGlobal);
+  // this won't work, and will throw an error in your console and stop the script
+  // constantGlobal = false;
+}
+changeEmUp();
+
+
+/** 
+ * SCOPE 
+ * */
+const globalScope = 'I am global';
+function scopers() {
+  // this will work
+  const localScope = 'I am local'
+  console.log('globalScope :>> ', globalScope);
+  console.log('localScope :>> ', localScope);
+}
+scopers();
+console.log('globalScope :>> ', globalScope);
+// this won't work, and will throw an error in your console and stop the script
+// console.log('localScope :>> ', localScope);
+
+
+/**
+ * FUNCTIONS
+ */
+function traditionalFunction() {
+  console.log("I am a traditional function")
+}
+const arrowFunction = () => {
+  console.log("I am an arrow function")
+}
+// can you explain why these don't show up in your console?
+
+
+/**
+ * ARRAY + OBJECT METHODS
+ */
+array.map((d, i) => console.log(`map is at data ${d} with index ${i}`))
+const entries = Object.entries(object)
+console.log(entries) // looks like the object is now an array... 
+// which means we can do any array methods on the object data, including .map!
+// you can also get the Object.keys() or Object.values().
+
+
+/** 
+ * DOM MANIPULATION 
+ * */
+const label = document.getElementById("name-label")
+const input = document.getElementById("name-input")
+const button = document.getElementById("name-submit")
+
+let userName;
+
+function updateName() {
+  // update the name using the value of the input element
+  userName = input.value
+  // use the user's name in a window alert using templating
+  // ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+  window.alert(`Welcome to class, ${userName}!`)
+  // change the text content of the label to include the name
+  // ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
+  label.innerText = `Your name is ${userName}. Change it here:`
+  // change the text content of the button since we have a name now
+  button.innerText = "Change"
+}
diff --git a/2_1_quantities_and_amounts/main.js b/2_1_quantities_and_amounts/main.js
@@ -1,18 +1,38 @@
-
 /* CONSTANTS AND GLOBALS */
-// const width = ;
-// const height = ;
+const width = window.innerWidth *.8 ;
+const height = 500;
 
 /* LOAD DATA */
-d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType)
+d3.csv('../data/squirrelActivities.csv', d3.autoType)
   .then(data => {
     console.log("data", data)
 
-    /* SCALES */
-    /** This is where you should define your scales from data to pixel space */
-
+  /* SCALES */
+  // xscale - categorical, activity
+  const xScale = d3.scaleBand()
+    .domain(data.map(d=> d.activity))
+    .range([0, width]) // visual variable
+    .paddingInner(.2)
+
+    // yscale - linear,count
+  const yScale = d3.scaleLinear()
+    .domain([0, d3.max(data, d=> d.count)])
+    .range([height, 0])
+
+  /* HTML ELEMENTS */
+  // svg
+  const svg = d3.select("#container")
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height)
 
-    /* HTML ELEMENTS */
-    /** Select your container and append the visual elements to it */
+  // bars
+  svg.selectAll("rect")
+    .data(data)
+    .join("rect")
+    .attr("width", xScale.bandwidth())
+    .attr("height", d=> height - yScale(d.count))
+    .attr("x", d=>xScale(d.activity))
+    .attr("y", d=> yScale(d.count))
 
-  })
+})
diff --git a/2_2_distributions/main.js b/2_2_distributions/main.js
@@ -1,16 +1,54 @@
 /* CONSTANTS AND GLOBALS */
-// const width = ,
-//   height = ,
-//   margin = ,
-//   radius = ;
+const width = window.innerWidth * 0.7,
+  height = window.innerHeight * 0.7,
+  margin = { top: 20, bottom: 60, left: 60, right: 40 },
+  radius = 5;
 
 /* LOAD DATA */
-d3.csv("../data/MoMA_distributions.csv", d3.autoType)
-  .then(data => {
-    console.log(data)
-
-    /* SCALES */
-
-    /* HTML ELEMENTS */
-
-  });
+d3.json("../data/environmentRatings.json", d3.autoType).then(data => {
+  console.log(data)
+
+  /* SCALES */
+  // xscale  - linear,count
+  const xScale = d3.scaleLinear()
+    .domain([0, d3.max(data.map(d => d.envScore2020))])
+    .range([margin.left, width - margin.right])
+
+    // yscale - linear,count
+  const yScale = d3.scaleLinear()
+    .domain([0, d3.max(data, d => d.ideologyScore2020)])
+    .range([height - margin.bottom, margin.top])
+
+  const colorScale = d3.scaleOrdinal()
+    .domain(["R", "D"])
+    .range(["red", "blue", "purple"])
+
+  /* HTML ELEMENTS */
+  // svg
+  const svg = d3.select("#container")
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height)
+
+  // axis scales
+  const xAxis = d3.axisBottom(xScale)
+  svg.append("g")
+  .attr("transform", `translate(0,${height - margin.bottom})`)
+  .call(xAxis);
+
+  const yAxis = d3.axisLeft(yScale)
+  svg.append("g")
+    .attr("transform", `translate(${margin.left},0)`)
+    .call(yAxis);
+
+  // circles
+  const dot = svg
+    .selectAll("circle")
+    .data(data, d => d.BioID) // second argument is the unique key for that row
+    .join("circle")
+    .attr("cx", d => xScale(d.envScore2020))
+    .attr("cy", d => yScale(d.ideologyScore2020))
+    .attr("r", radius)
+    .attr("fill", d => colorScale(d.Party))
+
+});