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

 Eljiah Meeks D3.js in Action

Three Takeaways from chapters
Chapter 1 Intro (Continued)
  • <path>” a path is an area determined by its d attribute.  Paths can be open or closed, meaning the last point connects to the first if closed and doesn’t if open.  The open or closed nature of a path is determined by the absence or presence of the letter Z at the end of the text string in the d attribute. p 25
  • “By using .classed(), you don’t overwrite the existing attribute, but rather append or remove the named class from the list.  You can see the results of two classes with conflicting styles defined.  The active style overwrites the tentative style because it occurs later in the style sheet.  Another rule to remember is that more specific rules overwrite more general rules.” p29
  • “One thing to keep min mind while reading about data visualization is that the literature is often focused on static charts.  With D3 you’ll be making interactive and dynamic visualizations and not just static ones” p40
Chapter 6 Network Data (continued)
  • Self loops occur when a node is connected to itself p 181
  • How to make a gridover function to highlight all rectangles that have the same x or y value:

d3.selectAll(“rect.grid”).o(“mouseover”, gridOver);

function gridOver(d, i) {

     d3.selectAll(“rect”).style(“stroke-width”, function(p) {
return p.x == d.x || p.y == d.y ? “3px”:  “1px” });
  • How to create a hash that associates each node JSON object with its ID value
function createArcDiagram(nodes, edge) {
     var nodeHash = {}
     for (x in nodes) {
          nodeHash[nodes[x].id] = nodes[x] // creates a hash that associates each node JSON object with its ID value
          nodes[x].x = parseInt(x) * 40; // sets each node with an x position based on its array position
     for (x in edges) {
          edges[x].weight = parseInt(edges[x].weight); // replaces the string ID of the node with a pointer to the JSON object
          edges[x].source = nodehash[edges[x].source;
          edges[x].target = nodeHash[edges[x].target];

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