InteractiveDataVis · cgeraghty1 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/1_3_intro_to_js/Interactive-Data-Vis-Spring2024 b/1_3_intro_to_js/Interactive-Data-Vis-Spring2024
diff --git a/2_1_quantities_and_amounts/MoMA_topTenNationalities.csv b/2_1_quantities_and_amounts/MoMA_topTenNationalities.csv
@@ -0,0 +1,11 @@
+Nationality,Count
+American,5181
+German,965
+British,860
+French,847
+Italian,536
+Japanese,507
+Swiss,297
+Dutch,274
+Russian,262
+Austrian,239
diff --git a/2_1_quantities_and_amounts/index.html b/2_1_quantities_and_amounts/index.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
-  <head>
-    <meta charset="utf-8">
-    <title>Interactive Data Visualization Tutorial</title>
-    <link rel="stylesheet" href="./style.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
-  </head>
-  <body>
-    <h3>Section 2 | Tutorial 1 | Quantities and Amounts</h3>
-    <div id="container"></div>
-    <script src="../lib/d3.js"></script>
-    <script src="main.js"></script>
-  </body>
-</html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Interactive Data Visualization Tutorial</title>
+  <link rel="stylesheet" href="./style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+</head>
+<body>
+  <h3>       MoMA Collection by Country Top Ten   </h3>
+  <svg id="container" width="960" height="500"></svg> <!-- Changed div to svg -->
+  <script src="main.js"></script>
+</body>
+</html>
+
diff --git a/2_1_quantities_and_amounts/main.js b/2_1_quantities_and_amounts/main.js
@@ -1,18 +1,52 @@
-
 /* CONSTANTS AND GLOBALS */
-// const width = ;
-// const height = ;
+const width = 960, height = 500;
+const margin = { top: 20, right: 30, bottom: 40, left: 100 };
+
+// Create SVG canvas
+const svg = d3.select("#container")
+  .append("svg")
+  .attr("width", width)
+  .attr("height", height)
+  .append("g")
+  .attr("transform", `translate(${margin.left},${margin.top})`);
 
 /* LOAD DATA */
-d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType)
-  .then(data => {
-    console.log("data", data)
+d3.csv('MoMA_topTenNationalities.csv', d3.autoType)
+.then(data => {
+  // Define color scale
+  const colorScale = d3.scaleOrdinal(d3.schemeTableau10); // Uses a D3 color scheme
+
+  // Define your scales based on the data
+  const xScale = d3.scaleLinear()
+    .domain([0, d3.max(data, d => d.Count)]) // Make sure 'Count' matches your CSV
+    .range([0, width - margin.left - margin.right]);
+
+  const yScale = d3.scaleBand()
+    .domain(data.map(d => d.Nationality)) 
+    .range([0, height - margin.top - margin.bottom])
+    .padding(0.1);
+
+  // Add bars
+  svg.selectAll(".bar")
+    .data(data)
+    .enter()
+    .append("rect")
+    .attr("class", "bar")
+    .attr("x", 0) // Bars start at x=0
+    .attr("y", d => yScale(d.Nationality))
+    .attr("width", d => xScale(d.Count))
+    .attr("height", yScale.bandwidth())
+    .attr("fill", "white") // Fill bars with white
+    .attr("stroke", d => colorScale(d.Nationality)) // Use the color scale for the stroke
+    .attr("stroke-width", 2); // Set the width of the stroke
 
-    /* SCALES */
-    /** This is where you should define your scales from data to pixel space */
-
+  // Add Y Axis
+  svg.append("g")
+    .call(d3.axisLeft(yScale));
 
-    /* HTML ELEMENTS */
-    /** Select your container and append the visual elements to it */
+  // Add X Axis
+  svg.append("g")
+    .attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
+    .call(d3.axisBottom(xScale));
+});
 
-  })
diff --git a/2_1_quantities_and_amounts/style.css b/2_1_quantities_and_amounts/style.css
@@ -1,5 +1,5 @@
 body {
-  font-family: "Source Sans Pro", sans-serif;
+  font-family: "Helvetica Neue", sans-serif;
   font-size: 16px;
   padding: 1em;
 }
@@ -10,8 +10,8 @@ h1 {
 }
 
 h3 {
-  font-size: 2em;
-  margin: 0.25em 0;
+  font-size: 4em;
+  margin: 0.30em 0;
 }
 
 p {

diff --git a/2_2_distributions/MoMA_distributions.csv b/2_2_distributions/MoMA_distributions.csv
diff --git a/2_2_distributions/index.html b/2_2_distributions/index.html
@@ -1,14 +1,14 @@
 <!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>
-    <h3>Section 2 | Tutorial 2 | Distributions</h3>
-    <div id="container"> </div>
-    <script src="../lib/d3.js"></script>
-    <script src="main.js"></script>
-  </body>
-</html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Interactive Data Visualization Tutorial</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h3>MoMA Artist Lifespan Plotted to the Dimensions of their Work </h3>
+  <div id="container"></div>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/2_2_distributions/main.js b/2_2_distributions/main.js
@@ -1,16 +1,123 @@
-/* CONSTANTS AND GLOBALS */
-// const width = ,
-//   height = ,
-//   margin = ,
-//   radius = ;
+t /* CONSTANTS AND GLOBALS */
+const width = window.innerWidth * 0.9,
+      height = window.innerHeight * 0.9,
+      margin = { top: 20, bottom: 60, left: 60, right: 40 };
+
+/* TOOLTIP SETUP */
+const tooltip = d3.select("body").append("div")
+    .attr("class", "tooltip")
+    .style("position", "absolute")
+    .style("text-align", "center")
+    .style("width", "120px")
+    .style("height", "auto")
+    .style("padding", "2px")
+    .style("font", "12px sans-serif")
+    .style("background", "lightsteelblue")
+    .style("border", "1px solid #333")
+    .style("border-radius", "8px")
+    .style("pointer-events", "none")
+    .style("opacity", "0.9")
+    .style("display", "none");
 
 /* LOAD DATA */
-d3.csv("../data/MoMA_distributions.csv", d3.autoType)
-  .then(data => {
-    console.log(data)
-
-    /* SCALES */
-
-    /* HTML ELEMENTS */
-
-  });
+d3.csv("MoMA_distributions.csv", d => ({
+  // Parse strings to numbers where necessary
+  length: +d["Length (cm)"],
+  width: +d["Width (cm)"],
+  lifespan: +d["Artist Lifespan"], 
+  artist: d.Artist, // You can add other data fields you need here
+})).then(rawData => {
+  // Filter out records with no lifespan, lifespans over 100, and then reduce to one entry per artist
+  const data = Array.from(
+    rawData
+    .filter(d => d.lifespan > 0 && d.lifespan <= 100)
+    .reduce((acc, d) => {
+      acc.has(d.artist) || acc.set(d.artist, d);
+      return acc;
+    }, new Map()).values()
+  );
+
+  // Define the maximum length and width for the scales based on the filtered data
+  const maxDataLength = Math.min(300, d3.max(data, d => d.length));
+  const maxDataWidth = Math.min(160, d3.max(data, d => d.width));
+
+  /* SCALES */
+  // xScale - linear, clamp max at 300 or max data length
+  const xScale = d3.scaleLinear()
+    .domain([0, maxDataLength])
+    .range([margin.left, width - margin.right]);
+
+  // yScale - linear, clamp max at 160 or max data width
+  const yScale = d3.scaleLinear()
+    .domain([0, maxDataWidth])
+    .range([height - margin.bottom, margin.top]);
+
+  // Create a size scale for the artist lifespan, with a range to make differences more noticeable
+  const sizeScale = d3.scaleSqrt()
+    .domain(d3.extent(data, d => d.lifespan))
+    .range([5, 40]); // Adjust the range for more pronounced circle sizes
+
+  /* SVG SETUP */
+  const svg = d3.select("#container").append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
+  /* AXES AND AXIS LABELS */
+  const xAxis = d3.axisBottom(xScale);
+  svg.append("g")
+    .attr("transform", `translate(0,${height - margin.bottom})`)
+    .call(xAxis)
+    .append("text")
+    .attr("class", "axis-label")
+    .attr("x", width - margin.right)
+    .attr("y", 40)
+    .attr("text-anchor", "end")
+    .attr("fill", "black")
+    .text("Length (cm)");
+
+  const yAxis = d3.axisLeft(yScale);
+  svg.append("g")
+    .attr("transform", `translate(${margin.left},0)`)
+    .call(yAxis)
+    .append("text")
+    .attr("class", "axis-label")
+    .attr("transform", "rotate(-90)")
+    .attr("y", 15 - margin.left)
+    .attr("x", -margin.top)
+    .attr("dy", ".71em")
+    .attr("text-anchor", "end")
+    .attr("fill", "black")
+    .text("Width (cm)");
+
+  /* DRAW CIRCLES WITH TOOLTIPS */
+  svg.selectAll("circle")
+    .data(data)
+    .enter()
+    .append("circle")
+      .attr("r", d => sizeScale(d.lifespan))
+      .attr("cx", d => xScale(d.length))
+      .attr("cy", d => yScale(d.width))
+      .attr("fill", "red")
+      .attr("stroke", "#333")
+      .attr("stroke-width", "1px")
+      .attr("opacity", 0.8)
+      .on("mouseover", (event, d) => {
+        tooltip
+          .style("display", "block")
+          .style("left", `${event.pageX + 15}px`)
+          .style("top", `${event.pageY - 28}px`)
+          .html(`<strong>Artist:</strong> ${d.artist}<br>
+                 <strong>Lifespan:</strong> ${d.lifespan} years<br>
+                 <strong>Dimensions:</strong> ${d.length} x ${d.width} cm`);
+        d3.select(event.currentTarget)
+          .attr("stroke", "black")
+          .attr("stroke-width", "2px");
+      })
+      .on("mouseout", (event) => {
+        tooltip.style("display", "none");
+        d3.select(event.currentTarget)
+          .attr("stroke", "#333")
+          .attr("stroke-width", "1px");
+      });
+      });
+
diff --git a/2_2_distributions/style.css b/2_2_distributions/style.css
@@ -1,19 +1,36 @@
 body {
-  font-family: "Source Sans Pro", sans-serif;
-  font-size: 16px;
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 12px;
   padding: 1em;
 }
 
-h1 {
-  font-size: 3em;
-  margin: 0.25em 0;
-}
-
 h3 {
-  font-size: 2em;
+  font-size: 3.5em;
   margin: 0.25em 0;
 }
 
-p {
-  font-size: 1em;
+#container {
+  display: block;
+  width: 90vw;
+  height: 90vh;
+  margin: auto;
+  border: 1px solid #ccc;
+}
+.tooltip {
+  position: absolute;
+  text-align: center;
+  padding: 6px;
+  font: 12px sans-serif;
+  background: white;
+  border: 0px;
+  border-radius: 8px;
+  pointer-events: none;
+  opacity: 0.8;
+}
+/* Add this to your existing CSS */
+.heading {
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  color: grey;
+  font-size: 18px;
+  margin: 10px 0;
 }