Another Inlet

campaigns.json

[{"campaignId":7103,"campaignRawClicks":238.0,"campaignRawListings":1121700.0,"campaignRawCtr":2.1217794419185166E-4,"campaignNormListings":996493.6452152507,"campaignNormCtr":2.3883744883148762E-4,"adList":[{"adId":9940880,"rawClicks":10,"rawImps":28070,"rawCtr":3.562522265764161E-4,"normImps":23767.541270477708,"normCtr":4.2074188012124187E-4},{"adId":9941194,"rawClicks":4,"rawImps":7216,"rawCtr":5.543237250554324E-4,"normImps":6021.113311933133,"normCtr":6.643289692078164E-4},{"adId":9941195,"rawClicks":29,"rawImps":127575,"rawCtr":2.2731726435430138E-4,"normImps":123989.69903509428,"normCtr":2.3389039755465318E-4},{"adId":9941249,"rawClicks":6,"rawImps":32020,"rawCtr":1.8738288569643974E-4,"normImps":30046.543309179975,"normCtr":1.9969019192190568E-4},{"adId":9941250,"rawClicks":10,"rawImps":32351,"rawCtr":3.091094556582486E-4,"normImps":29780.574532449584,"normCtr":3.3578935789515326E-4},{"adId":9941251,"rawClicks":22,"rawImps":177537,"rawCtr":1.2391783121264862E-4,"normImps":172117.27977434505,"normCtr":1.27819821628852E-4},{"adId":9941252,"rawClicks":11,"rawImps":18315,"rawCtr":6.006006006006006E-4,"normImps":15467.340363542138,"normCtr":7.111759191598287E-4},{"adId":9941253,"rawClicks":3,"rawImps":7809,"rawCtr":3.84172109104879E-4,"normImps":6681.370714305462,"normCtr":4.490096610829735E-4},{"adId":9941254,"rawClicks":12,"rawImps":23850,"rawCtr":5.031446540880503E-4,"normImps":19328.595206373644,"normCtr":6.2084180830912E-4},{"adId":9941255,"rawClicks":1,"rawImps":10706,"rawCtr":9.340556697179151E-5,"normImps":8092.313772071259,"normCtr":1.2357405164531158E-4},{"adId":9941256,"rawClicks":3,"rawImps":13426,"rawCtr":2.2344704305079697E-4,"normImps":10504.029585541379,"normCtr":2.8560467919182654E-4},{"adId":9941257,"rawClicks":6,"rawImps":41081,"rawCtr":1.4605291984128916E-4,"normImps":38827.15713334091,"normCtr":1.545310149644666E-4},{"adId":9941258,"rawClicks":3,"rawImps":13089,"rawCtr":2.2920009168003668E-4,"normImps":10279.739809732153,"normCtr":2.9183618024648887E-4},{"adId":9941259,"rawClicks":1,"rawImps":11160,"rawCtr":8.960573476702509E-5,"normImps":8829.778879649508,"normCtr":1.1325311920378399E-4},{"adId":9941260,"rawClicks":4,"rawImps":10801,"rawCtr":3.703360799925933E-4,"normImps":8004.177512687305,"normCtr":4.997390417266057E-4},{"adId":9941261,"rawClicks":3,"rawImps":8904,"rawCtr":3.3692722371967657E-4,"normImps":7751.483561282452,"normCtr":3.870226875000509E-4},{"adId":9941262,"rawClicks":4,"rawImps":10771,"rawCtr":3.7136756104354284E-4,"normImps":8126.561911755297,"normCtr":4.922130715836778E-4},{"adId":9941263,"rawClicks":5,"rawImps":20685,"rawCtr":2.4172105390379503E-4,"normImps":19374.590813941777,"normCtr":2.5806996638102136E-4},{"adId":9941264,"rawClicks":4,"rawImps":11241,"rawCtr":3.5584022773774577E-4,"normImps":8477.308041619912,"normCtr":4.718479003430962E-4},{"adId":9941265,"rawClicks":3,"rawImps":5807,"rawCtr":5.166178749784743E-4,"normImps":4622.738250864234,"normCtr":6.48966010446112E-4},{"adId":9941266,"rawClicks":5,"rawImps":35732,"rawCtr":1.3993059442516512E-4,"normImps":33889.648841283844,"normCtr":1.4753767510004642E-4},{"adId":9941267,"rawClicks":3,"rawImps":11401,"rawCtr":2.6313481273572496E-4,"normImps":8721.320281559,"normCtr":3.4398461507524505E-4},{"adId":9941268,"rawClicks":2,"rawImps":11268,"rawCtr":1.774937877174299E-4,"normImps":8766.040205362784,"normCtr":2.281531858337204E-4},{"adId":9941269,"rawClicks":1,"rawImps":10618,"rawCtr":9.417969485778867E-5,"normImps":8088.9339110576575,"normCtr":1.2362568553477604E-4},{"adId":9941270,"rawClicks":2,"rawImps":11194,"rawCtr":1.7866714311238162E-4,"normImps":8742.785778401767,"normCtr":2.2876003721157307E-4},{"adId":9941271,"rawClicks":1,"rawImps":10585,"rawCtr":9.44733112895607E-5,"normImps":8019.631927233633,"normCtr":1.2469400205315274E-4},{"adId":9941272,"rawClicks":3,"rawImps":10963,"rawCtr":2.7364772416309404E-4,"normImps":8192.678143510162,"normCtr":3.6618062463206284E-4},{"adId":9941273,"rawClicks":4,"rawImps":10925,"rawCtr":3.6613272311212814E-4,"normImps":8153.3580494676025,"normCtr":4.905954056882356E-4},{"adId":9941274,"rawClicks":4,"rawImps":23825,"rawCtr":1.6789087093389298E-4,"normImps":22068.057473284327,"normCtr":1.8125745797256578E-4},{"adId":9941275,"rawClicks":2,"rawImps":11338,"rawCtr":1.763979537837361E-4,"normImps":8609.97344003718,"normCtr":2.3228875372597707E-4},{"adId":9941276,"rawClicks":5,"rawImps":38744,"rawCtr":1.2905224034689242E-4,"normImps":36759.80908015895,"normCtr":1.3601811666368916E-4},{"adId":9941277,"rawClicks":3,"rawImps":11249,"rawCtr":2.6669037247755356E-4,"normImps":8592.589606123669,"normCtr":3.4913805238201927E-4},{"adId":9941278,"rawClicks":10,"rawImps":66895,"rawCtr":1.4948800358771208E-4,"normImps":63834.44727522538,"normCtr":1.5665522968945757E-4},{"adId":9941279,"rawClicks":4,"rawImps":10880,"rawCtr":3.676470588235294E-4,"normImps":8323.773298670414,"normCtr":4.805512904392692E-4},{"adId":9941280,"rawClicks":3,"rawImps":10725,"rawCtr":2.797202797202797E-4,"normImps":8196.332085170352,"normCtr":3.6601738055829983E-4},{"adId":9941281,"rawClicks":2,"rawImps":10794,"rawCtr":1.8528812303131369E-4,"normImps":7973.574804583642,"normCtr":2.5082852409565303E-4},{"adId":9941282,"rawClicks":2,"rawImps":10809,"rawCtr":1.850309926912758E-4,"normImps":8006.216055845833,"normCtr":2.498058990725933E-4},{"adId":9941283,"rawClicks":1,"rawImps":10868,"rawCtr":9.201324990798675E-5,"normImps":8253.63028504611,"normCtr":1.2115880715081161E-4},{"adId":9941284,"rawClicks":1,"rawImps":10833,"rawCtr":9.231053263177328E-5,"normImps":8012.497144690289,"normCtr":1.2480503667482474E-4},{"adId":9941285,"rawClicks":3,"rawImps":11634,"rawCtr":2.5786487880350697E-4,"normImps":8942.372855945428,"normCtr":3.3548142627551244E-4},{"adId":9941286,"rawClicks":3,"rawImps":11333,"rawCtr":2.6471366804906027E-4,"normImps":8843.580598798875,"normCtr":3.39229112742802E-4},{"adId":9941287,"rawClicks":3,"rawImps":8649,"rawCtr":3.46860908775581E-4,"normImps":6701.724654196531,"normCtr":4.4764596500117916E-4},{"adId":9941288,"rawClicks":1,"rawImps":10985,"rawCtr":9.103322712790169E-5,"normImps":8259.280648560052,"normCtr":1.2107591962919228E-4},{"adId":9941289,"rawClicks":3,"rawImps":8013,"rawCtr":3.7439161362785476E-4,"normImps":6809.587053511438,"normCtr":4.405553488670091E-4},{"adId":9941290,"rawClicks":4,"rawImps":7552,"rawCtr":5.296610169491525E-4,"normImps":5735.159490010455,"normCtr":6.9745226910729E-4},{"adId":9941291,"rawClicks":2,"rawImps":11570,"rawCtr":1.7286084701815038E-4,"normImps":8807.80226155093,"normCtr":2.2707140108386447E-4},{"adId":9941292,"rawClicks":1,"rawImps":11186,"rawCtr":8.939746111210442E-5,"normImps":8644.410942415698,"normCtr":1.156816822640026E-4},{"adId":9941293,"rawClicks":11,"rawImps":78143,"rawCtr":1.4076756715252807E-4,"normImps":75446.09005375858,"normCtr":1.4579947075006838E-4},{"adId":9941294,"rawClicks":3,"rawImps":9269,"rawCtr":3.2365951019527455E-4,"normImps":8115.49830430536,"normCtr":3.6966306781291143E-4},{"adId":9941295,"rawClicks":2,"rawImps":11306,"rawCtr":1.768972227136034E-4,"normImps":8892.903875297598,"normCtr":2.2489841654035317E-4}]}]

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7180995475113121,"play":false,"loop":false,"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

campaign = _.sortBy(tributary.campaigns[0].adList, function(ad){
  return 1/ad.rawCtr;
});

svg = d3.select("svg");

var ctrChart = svg.append("g")
    .attr("class", "ctrChart");

var max = d3.max(campaign, function(d) {
   		return d.rawCtr; 
});

var ch = 256;
var barWidth = 15;

var yscale = d3.scale.linear()
    .domain([0, max])
    .range([0, ch]);

var ctrBar = ctrChart.selectAll(".ctrBar")
    .data(campaign)
    .enter()
    .append("g")
    .attr("class", "ctrBar")
    .attr("transform", function(d,i) { return "translate("+ [i*20+14,174] + ")"; });
            
ctrBar.append("rect")
    .attr({
      width: barWidth,
      height: function(d,i){ 
        return yscale(d.rawCtr);
      },
      x: -barWidth/5,
      y: function(d,i){
        return ch - yscale(d.rawCtr);
      }
    })
    .style({
      fill: "#B4D534"    
});


ctrBar.append("text")
  .text(function(d,i){return d.adId})
  .attr("transform", "translate(-15,320)rotate(-75,10,0)")
      .style({
      fill: "#9B2C2C",
      font: "serif" 
});

/*
ctrChart.append("text")
  .text("Hello")
  .style({
      fill: "#81A32A"    
    });
*/