Day 159 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.

Three Takeways

Chapter 2 Information Visualization Data Flow

  • “You use selection.enter() to define how you want to create new elements based on the data you’re working with, and you use selection.exit() to define how you want to remove existing elements in a selection when the data that corresponds to them has been deleted” p 70
  • If you want to show a shape based on newly created data and we want them to have labels, we need to append <g> elements and not shapes to the <svg> canvas in initial selection.  Because data is bound to elements, we can use same syntax when you add child elements” p 71
  • Example of creating scatterplot using tweets data
  • d3.json(“tweets.json”,function(error,data) {dataViz(data.tweets)});
    • function dataViz(incomingData) {
      • incomingData.forEach(function (el) {
        • el.impact = el.favorites.length + el.retweets.length // creates an impact score by totalling the number of favorites and retweets
          el.tweetTime = new Date(el.timestamp);
          })
          var maxImpact = d3.max(incomingData, function(el) {return el.impact});
          var startEnd = d3.extent(incomingData, function(el) {return el.tweetTime}); // returns the earliest and latest times for a scale
          var timeRamp = d3.time.scale().domain(startEnd).range([20,480]); // start end is an array
          var yScale = d3.scale.linear().domain([0,maxImpact]).range([0,460]);
          var radiusScale = d3.scale.linear().domain([0,maxImpact]).range([1,20]);
          var colorScale = d3.scale.linear().domain([0,maxImpact]).range([“white”,”#990000″]); // builds a scale that maps impact to a ramp from white to dark red

          d3.select(“svg”)
          .selectAll(“circle”)
          .data(incomingData)
          .enter()
          .append(“circle”)
          .attr(“r”, function(d) {return radiusScale(d.impact)}) // size, color, and vertical postion will all be based on impact
          .attr(“cx”, function(d,i) {return timeRamp(d.tweetTime)})
          .attr(“cy”, function(d) {return 480 – yScale(d.impact)})
          .style(“fill”, function(d) {return colorScale(d.impact)})
          .style(“stroke”, “black”)
          .style(“stroke-width”, “1px”)
          }

Chapter 6 Network Visualization

  •  Nodes that are more connected to each other than rest of network is known as modularity.  Nodes that are interconnected is known as clustering.  Clique is a term for a group of nodes that are fully connected to each other p 193
  • Charge sets the rate which nodes push other away, usually negative.  You could set them to positive if you wanted your nodes to exert an attract force.  p 193
  • Canvas gravity pulls all nodes toward center of layout.  llinkDistnace properity is the attraction betweeen the nodes – optimal distance between connected nodes.  p 193-194
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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