fall 2023 updates (use MoMA data in tutorials)

efrymire · efrymire · commit e20c435b7ab5 · 2023-08-26T14:08:50.000-10:00
diff --git a/2_1_quantities_and_amounts/README.md b/2_1_quantities_and_amounts/README.md
@@ -16,7 +16,8 @@ As you're building, don't forget you can always reference the [class code branch
 
 ## Assignment:
 
-- [ ] Implement your own version of the bar chart from the demo branch using the files present in the root of this directory (`2_2_quantities_and_amounts/` [index.html](index.html), [style.css](style.css), [main.js](main.js)), just like we did in the tutorials in section 1. You may use the existing dataset, or a new one.
+- [ ] Implement your own version of the bar chart from the demo branch using the files present in the root of this directory (`2_2_quantities_and_amounts/` [index.html](index.html), [style.css](style.css), [main.js](main.js)), just like we did in the tutorials in section 1.
+- [ ] Use the `MoMA_topTenNationalities.csv` data for this bar chart. It is already referenced in your template. 
 - [ ] Turn this **vertical bar chart** into a **horizontal bar chart**. This will require adjusting both scales to consider how the data should map back to the svg coordinate plane. (_Tip_: start by getting your bars to show, even if they are not yet positioned/sized correctly -- sometimes it is easier to understand where something should go by seeing where it currently is).
 
 **BONUS:**
diff --git a/2_1_quantities_and_amounts/main.js b/2_1_quantities_and_amounts/main.js
@@ -4,7 +4,7 @@
 // const height = ;
 
 /* LOAD DATA */
-d3.csv('../[PATH_TO_YOUR_DATA]', d3.autoType)
+d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType)
   .then(data => {
     console.log("data", data)
 
diff --git a/2_2_distributions/README.md b/2_2_distributions/README.md
@@ -17,8 +17,8 @@ As you're building, don't forget you can always reference the [class code branch
 
 ## Assignment:
 
-- [ ] Implement your own scatter plot with a *different dataset* than the one used in our demo.
-- [ ] Size the dots by something data related. This requires creating a new scale. Carefully consider the domain and range of this new scale, and do your best to make the domain of the scale *dynamic* (i.e. would the scale still work if the data changed?). 
+- [ ] Implement your own scatter plot with the MoMA distributions dataset. Your dataset should visualize length and width.
+- [ ] Size the dots by the artist lifespan. This requires creating a new scale. Carefully consider the domain and range of this new scale, and do your best to make the domain of the scale *dynamic* (i.e. would the scale still work if the data changed?). Make a design decision to handle the 0 values. 
 - [ ] Make intentional design decisions -- colors, sizes, axes, etc. should illustrate something interesting about or relevant to your data.
 
 **BONUS:**
diff --git a/2_2_distributions/main.js b/2_2_distributions/main.js
@@ -5,7 +5,7 @@
 //   radius = ;
 
 /* LOAD DATA */
-d3.json("[PATH_TO_YOUR_DATA]", d3.autoType)
+d3.csv("../data/MoMA_distributions.csv", d3.autoType)
   .then(data => {
     console.log(data)
 
diff --git a/2_3_time_series/README.md b/2_3_time_series/README.md
@@ -18,7 +18,7 @@ As you're building, don't forget you can always reference the [class code branch
 
 ## Assignment:
 
-- [ ] Implement your own line chart _with a different dataset_ than the one used in our demo. Your data should only create one line (given then next requirement). 
+- [ ] Implement your own line chart _with a different dataset_ than the one used in our demo. Your data should only create one line (given the next requirement). 
 - [ ] Turn this line chart into an [area chart](https://github.com/d3/d3-shape#areas). **Tip**: Think first about how that would be drawn on the screen. What are you creating on the svg? This requires referencing the d3 documention to understand the similarities and differences between the area function generator and the line function generator.
 - [ ] Make intentional design decisions -- colors, sizes, axes, etc. should illustrate something interesting about or relevant to your data.
 
diff --git a/2_4_geographic/README.md b/2_4_geographic/README.md
@@ -3,7 +3,6 @@
 The goals for this tutorial are:
 
 - to reinforce the basic mechanics of how d3 allows you to [select](https://github.com/d3/d3-selection) HTML/SVG elements and map them to data elements.
-- to learn the tools to make your own line chart.
 - to explore GeoJSON data, and how geographical features on our earth translate to projected shapes on an svg.
 - to understand [projections](https://github.com/d3/d3-geo#projections), in conjunction with [d3.geo-path](https://github.com/d3/d3-geo#geoPath), transforms lattitude and longitude space into pixel space.
 - to grasp that d3.js svg maps are as simple as lines and circles, and can be manipulated as such, with stroke, fill, etc.
@@ -17,9 +16,9 @@ As you're building, don't forget you can always reference the [class code branch
 
 ## Assignment:
 
-- [ ] Implement your own version of the map, using the us state geojson data provided in the [data folder](../data/), or another geojson of your choice (feel free to pull in data of the world or of another country if you like).
+- [ ] Implement your own version of the map, using the nationalities data (`MoMA_nationalities`) and the country geojson data (`world.json`) provided in the [data folder](../data/). 
 
-- [ ] Using your own lat/long dataset _OR_ the provided dataset for this exercise, [`usHeatExtremes.csv`](../data/usHeatExtremes.csv) (also in the [data folder](../data/)), add points to your map. **HINT:** since we're still in svg, we can just add circles to the map, like we've done before, but you'll need to use your `projection` to translate from (long,lat) values to (x,y) values.
+- [ ] Create a world map that highlights countries that have artists represented in the provided dataset. This means you'll have to do some data transformations and mapping to tie the nationality to its country (i.e. "Polish" --> "Poland"). You should do as much data mapping and manipulation as possible _before_ creating a data visualization. You may want to generate a new data file that would best help you tackle this task through another program (like excel or python). 
 
 - [ ] Make intentional design decisions -- colors, sizes, labels, etc. should illustrate something interesting about or relevant to your data.
 
diff --git a/3_1_quantities_and_amounts/README.md b/3_1_quantities_and_amounts/README.md
@@ -13,7 +13,7 @@ As you're building, don't forget you can always reference the [class code branch
 
 ## Assignment:
 
-- [ ] Implement your own bar chart with a *different dataset* than the one used in our demo. It can be the same dataset you used in the section 2 version of this same tutorial. 
+- [ ] Implement your own bar chart with the same dataset you used in the section 2 version of this tutorial. 
 - [ ] Add axes or labels to this chart, as we learned in other tutorials of the previous section.
 - [ ] Add a color scale to this chart, as we learned in other tutorials of the previous section.
 - [ ] Make intentional design decisions -- colors, sizes, axes, transitions, etc. should illustrate something interesting about or relevant to your data.
diff --git a/3_1_quantities_and_amounts/main.js b/3_1_quantities_and_amounts/main.js
@@ -13,7 +13,7 @@ let state = {
 };
 
 /* LOAD DATA */
-d3.csv('[PATH_TO_YOUR_DATA]', d3.autoType).then(raw_data => {
+d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then(raw_data => {
   console.log("data", raw_data);
   // save our data to application state
   state.data = raw_data;
diff --git a/3_2_distributions/README.md b/3_2_distributions/README.md
@@ -16,7 +16,7 @@ As you're building, don't forget you can always reference the [class code branch
 
 ## Assignment:
 
-- [ ] Implement your own scatter plot with a *different dataset* than the one used in our demo. This means your dropdowns will have different values, which correspond to your data.
+- [ ] Implement your own scatter plot with the same MoMA distributions dataset from the section 2 tutorial of this data. This means your dropdowns will have different values, which correspond to your data. You could do this by nationality, or gender. 
 
 - [ ] Implement a different transition than the one used in the demo (i.e., your dots should not move from left to center to right on transitions). Consider other visible properties that could change as an object is entering, exiting, etc. and what that change suggests about the state of that data point.
 
diff --git a/3_4_geographic/README.md b/3_4_geographic/README.md
@@ -17,9 +17,9 @@ As you're building, don't forget you can always reference the [class code branch
 
 - [ ] Implement your own version of the map, using the us state geojson data provided in the [data folder](../data/), or another geojson of your choice (feel free to pull in data of the world or of another country if you like).
 
-- [ ] Using your own lat/long dataset, add points to your map. This can be the same dataset you chose for the section 2 version of this tutorial, as long as its **not** the dataset leveraged in the section 2 **demo** ([`usHeatExtremes.csv`](../data/usHeatExtremes.csv))
+- [ ] Using your own lat/long dataset, add points or fills to your map. This can be the same MoMA data you leveraged for the section 2 version of this tutorial, as well as the data used in the section 2 demo ([`usHeatExtremes.csv`](../data/usHeatExtremes.csv))
 
-- [ ] Add mouseover behavior **to each point**, so its data updates state, and is displayed in our tooltip display.
+- [ ] Add mouseover behavior **to each point or polygon**, so its data updates state, and is displayed in our tooltip display.
 
 - [ ] Make intentional design decisions -- colors, sizes, axes, transitions, etc. should illustrate something interesting about or relevant to your data.
 
diff --git a/data/MoMA_distributions.csv b/data/MoMA_distributions.csv
diff --git a/data/MoMA_nationalities.csv b/data/MoMA_nationalities.csv
diff --git a/data/MoMA_topTenNationalities.csv b/data/MoMA_topTenNationalities.csv
diff --git a/data/world.json b/data/world.json
