Day 153 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:
Chapter 2 Working with Data
  •  Casting data is when you turn one datatype into another from perspective of a programming language.  When you load data it will usually be in a string format, so you’ll need to change a date string into a date data type:
    • parseInt(“20”);
    • parseFloat(“3.14”);
    • Date.parse(“Sun, 22 Dec 2013 08:00:00 GMT”);
    • text = “alpha,beta,gamma”; text.split(“,”); splits comma-delimited string into array, not quite a casting operation but change type of data p 52
  • “Javascript defaults to a type conversion when using the == test, whereas it forces no type conversion when using === and the like, so yo’ull find your code will often work fine without casting.  But this will come back to haunt you in situations where it doesn’t default to the type you expect, for example, when oyu try to sort an array and Javascript sorts your numbers alphabetically.” p 53
  • d3.scale.linear() creates scaled relationship
    • var newRamp = d3.scale.linear().domain([500000, 13000000]).range([0, 500]);
    • newRamp(1000000); places a country’s pop at 10000000 at 20px
    • newRamp.vert(313); // reverses transformation to domain, eg 8325000
Network Visualization Chapter 6 (continued)
  • “Notice that the edges array that we build uses a hash with ID value of our edges to create object references.  By building objects that have references to the source and target nodes, we can easily calculate the graphical attributes of the <line> or <path> element we’re using to represent the connection” p 184
  • Arc Diagram Interactivity p 184
         d3.selectAll(“circle”).on(“mouseover”, nodeOver);
         d3.selectAll(“path”).on(“mouseover”, edgeOver);
          function nodeOver(d, i) {
               d3.selectAll(“circle”).classed(“active”, function (p) {
                    return == d ? true: false;
               }); // makes a selection of all nodes to set the class of node being hovered over to “active”
               d3.selectAll(“path”).classed(“active”, function (p) {
                    return p.source == d || == d ? truth : false;
               }) ;
          }; // any edge where the selected node shows up as source or target renders as red
          function edgeOver(d) {
               d3.selectAll(“path”).classed(“active”, function (p) {
                    return p == d ? true : false;
              d3.selectAll(“circle”).style(“fill”, function (p) {
                    return p == d.source ? “blue” : p == ? “green” : “lightgray”;
               }); // Checks to see if a node is the source, which is set to blue, or it’s the target and set to green, or if it’s neither and set to gray”

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s