Day 138 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: 

Udacity Data Visualization and D3.js – Returns in Data Binding Process

Three Takeaways:

  • Remember:
    • var myChart = new dimple.chart(svg, data)
      is equal to‘svg’) // passing in SVG, selects SVG element on page
           .selectAll(“circle”) // subselect that looks for circle SVG elements and returns an empty selection, because we have an empty SVG and we haven’t added any circles
           .data(data) // passes in all rows in data and binds data to elements on the page
           .enter() // corresponds to D3 selection of all virtual nodes/placeholders bound to data that aren’t yet on the page – > becomes an array of Javascript objects with a _data_field
           .append(“circle”) //
  • var x = myChart.addTimeAxis(“x”, “year”);
    x.dateParseFormat = “%Y”
    x.tickFormat = “%Y”
    x.timeInterval = 4;
    myChart.addMeasureAxis(“y”, “attendance”);
    is this in D3:
    var time_extent = d3.extent(data, function(d) {  // extent finds and keeps track of min and max for each function
         return d[‘date’];
    var count_extent = d3.extent(data, function(d) {
         return d[‘attendance’];
    var time_scale = d3.time.scale()  // first calling time module
         .range([margin, width]) // min and max, left to right most part
    var count_scale = d3.scale.linear()
         .range([height, margin]) // min value of attendance and up to the chart margin
  • d3.tsv(“games.tsv”, function(d) {
         // transform data
    }, draw);
    versus using D3 to parse date and load data (not DimpleJS)
         format = d3.time.format(“%d-%m%Y (%H:%M h)”);
         d3.tsv(“world_cup_geo.tsv”, function(d) {
              d[‘date’] = format.parse(d[‘date’]); // overriding date column string with a data Javascript object
     }, draw;)

The Functional Art: An Introduction to Information Graphics and Visualization by Alberto Cairo

p 166-175 Creating Information Graphics

Three Takeaways

  • “Keep style and color under control and create a solid layout by imagining your graphics as if they were groups of rectangles” p 171
  • Define goals and scope, gather your information, sketch before going on the computer, draw graphic. p 175
  • “Limiting the amount of colors and different fonts in your graphics will help you create a sense of unity in composition.  Stick to just two or three colors and play with their shades.  Do the same with fonts.  Choose just one or two: a solid, thick one for headlines, and a readable one for body copy.” p 175

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s