Tributary inlet

_.md

[ Launch: Tributary inlet ] 5811335 by brjadams

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sample.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sample.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

console.log(tributary.sample);

var width = 380,
    height = 140,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#EC0690", "#666769", "#00ACF5"]);
 
    data = d3.entries(tributary.sample.totalVisits);
    console.log('.....',data);
    var vis = d3.select("svg")
        .data([data])                   //associate our data with the document
            .attr("width", w)           //set the width and height of our visualization (these will be attributes of the <svg> tag
            .attr("height", h)
        .append("svg:g")                //make a group to hold our pie chart
            .attr("transform", "translate(" + r + "," + r + ")")    //move the center of the pie chart from 0, 0 to radius, radius
 
    var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
        .outerRadius(r);
 
    var pie = d3.layout.pie()           //this will create arc data for us given a list of values
        .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array
 
    var arcs = vis.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
        .data(pie)                          //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
        .enter()                            //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
            .append("svg:g")                //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
                .attr("class", "slice");    //allow us to style things in the slices (like text)
 
        arcs.append("svg:path")
                .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
                .attr("d", arc);                                    //this creates the actual SVG path using the associated data (pie) with the arc drawing function
 
        arcs.append("svg:text")                                     //add a label to each slice
                .attr("transform", function(d) {                    //set the label's origin to the center of the arc
                //we have to make sure to set these before calling arc.centroid
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";        //this gives us a pair of coordinates like [50, 50]
            })
            .attr("text-anchor", "middle")                          //center the text on it's origin
            .text(function(d, i) { return data[i].label; });        //get the label from our original data array

sample.json

{
  "totalVisits": 
  {
    "US": 4564,
    "Can/Uk/Aus": 1234,
    "International": 564
  },
  "totalImpressions": 
  {
    "impressions": 435987,
    "reach": 40000,
    "retweets": 234,
    "favorites": 20,
    "comments": 1
  },
  "campaignProgress":
  {
    "actual": 2300,
    "goal": 5000
  },
  "visitsOverTime": 
  [
    {
      "date": "2013-06-01",
      "visits": 5
    },
    {
      "date": "2013-06-02",
      "visits": 10
    },
    {
      "date": "2013-06-03",
      "visits": 12
    },
    {
      "date": "2013-06-04",
      "visits": 8
    },
    {
      "date": "2013-06-05",
      "visits": 3
    }
  ]
}