Day 105 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning:

Knight Journalism Intermediate D3 for Data Visualization 

Lecture Week Three: Paths and Projections

Three Takeaways:

  • Use various projections for mapping paths, eg mercator, etc. in D3
  • eg. d3.geo.mercator() with various options and then call .path().projection(projection_var)
  • Load data as JSON as normal, but  specify features in array .data(json.features)
Advertisements

Day 104 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning:

Knight Journalism Intermediate D3 for Data Visualization 

Lecture Week Three: Acquiring Geographic Data

Three Takeaways:

  • Maps are path elements in SVG
  • In order to find geographic data you look for .shp files (shape files) and then convert into GeoJSON format
    • NaturalEarthData.com has lots of shape files
  • Each Feature in JSON file has properties (metadata about country) and polygon values: long and lats (x and y values) that make up each point
    • Use mapshaper.org to change shapefile into GeoJSON

Day 103 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

*Took day off for Thanksgiving

Data Viz Created:
Knight Journalism Intermediate D3 for Data Visualization 
EXERCISE: Using a data set of your choice, create either a stacked bar chart or stacked area chart. (I recommend a bar chart for categorical data, and an area chart for time series.) Include axes, plus a headline and some brief explanatory text to provide context. Post the bl.ocks.org link to your working page in the forums.
-Working on Stacked Area Chart with LA 311 Data.  In progress.
Screen Shot 2015-11-27 at 11.44.08 PM
Reading and Learning Data Visualization Theoretically/Critically:
Knight Journalism Intermediate D3 for Data Visualization 
  • Did Module 2 Discussion Question
  • The primary critique of stacked charts is that an inconsistent baseline makes meaningful comparisons across categories perceptually difficult. So when would you want to use a stacked chart, despite this potential challenge? Post an example to a stacked chart and explain why you find it either appropriate and successful or problematic.
  • Answer:
    • Stacked charts are good for comparing individual elements across categories in groups.  An example is sales data for different products across regions for an at-a-glance look.  However, it’s my personal belief they stacked charts should be used carefully and sparingly.How Katrina Washed Away New Orleans Black Middle Class has a good use of a stacked area chart showing demographics.  I find the use successful since the time series has a clear point of inflection and that there are only four different measures (in this case ethnic groups) to compare that are clearly delineated so trends are clear.

Day 102 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning:

Combining Data

Three Takeaways:

  • You can use native array functions to perform left outer joins.
    • eg. articles.forEach(function(article) {
      var result = brands.filter(function(brand) {
      return brand.id === article.brand_id;
      });
      delete article.brand_id
      article_brand = (result[0] !== undefined) ? result[0].name : null;
      });
  • Joining more than one attribute example
    • innerArray.filter(function(innerArrayItem) {
      return innerArrayItem.idA === outerArrayItem.idA &&
      innerArrayItem.idB === outerArrayItem.idB;
      });
  • Generic Efficent Approach
    function join(lookupTable, mainTable, lookupKey, mainKey, select) {
    var l = lookupTable.length,
    m = mainTable.length,
    lookupIndex = [],
    output = [];
    for (var i = 0; i < l; i++) { // look through l items
    var row = lookupTable[i];
    lookupIndex[row[lookupKey]] = row;
    }
    for (var j = 0; j < m; j++) { look through m items
    var y = mainTable[j];
    var x = lookupIndex[y[mainKey]]; // get corresponding row from lookupTable
    output.push(select(y, x)); // select only columns you need
    }
    return output;
    }

    • eg. var result = join(brands, articles, “id”, “brand_id”, function(article, brand) {
      return {
      id: article.id,
      name: article.name,
      weight: article.weight,
      price: article.price,
      brand: (brand !== undefined) ? brand.name: null
      };
      });

Day 101 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Reading and Learning Data Visualization Theoretically/Critically:

Reading Nathan Yau’s book Visualize This

238-258 Spotting Differences

Three Takeaways:

  • Star charts, with several axis and min value and max value as end of stars, can be good for multivariate data, especially with several side-by-side with color fills p. 244
    • eg different measures of crime per state
  • Use parallel coordinates/connecting lines to look for trends across multiple units.  Multiple axes next to each other with lines representing min and max p 251
    • eg different education measures, test scores, gpa, etc.
  • Make use of multi-dimensional scaling to reduce to find groups within data set or population p 258

Day 100 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning:

Learn JS Reading Data 
Three Takeaways:

  • When loading CSVs and other flat files, you have to do the type conversion, or else numbers will come in as strings. A simple way to do this is to use the + operator (unary plus).
  • forEach can be used to iterate over the data array.
  • Dot notation is a useful way to access the properties of these data objects. However, if your headers have spaces in them, then you will need to use bracket notation as shown below.
  • d3.csv(“/data/cities.csv”, function(d) {
    return {
    city : d.city,
    state : d.state,
    population : +d.population,
    land_area : +d[“land area”]
    };
    }, function(data) {
    console.log(data[0]);
    });

 

Day 99 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning:
  • Treehouse Back-to-Basics (again, not taking notes for basic review):
  • Knight D3 Intermediate D3 for Data Journalism
    • Module 1 Discussion and Exercise
Reading and Learning Data Visualization Theoretically/Critically:

Reading Nathan Yau’s book Visualize This

 

220-238 Visualizing Relationships and Spotting Differences

Three Takeaways:

  • General process of creating histograms: load data, filter outliers, set breaks, set layout. p 221
  • Showing small multiples with histograms, eg flipped 90 degrees side by side can be an interesting visual (Rotten Trilogy Finales as example)p 223
  • “Chernoff Faces displays multiple variables at once by positioning parts of the human face, such as ears, hair ,e yes, and nose , based on numbers in  a dataset.  The assumption is that you can read people’s faces easily in real life so you should recognize small differences when they represent data.  That’s a big assumption, but roll with it … useful time to time.”
    p 238