parallelBars

_.md

[ Launch: parallelBars ] 6135950 by ariaz

config.json

{"description":"parallelBars","endpoint":"","display":"svg","public":true,"require":[{"name":"crossfilter","url":"https://raw.github.com/square/crossfilter/master/crossfilter.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/4I3SYnW.png"}

data.tsv

doc_category	ad_category	clicks	listings	date	
1403	1403	5224	2653538	2013-07-15
1403	1404	49	41212	2013-07-15
1403	1405	1030	739931	2013-07-15
1403	1406	758	801833	2013-07-15
1403	1407	204	256436	2013-07-15
1403	1408	283	264525	2013-07-15
1403	1403	1362	964286	2013-07-16
1403	1404	107	155896	2013-07-16
1403	1405	358	349012	2013-07-16
1403	1406	181	203029	2013-07-16
1403	1407	46	24161	2013-07-16
1403	1408	216	225668	2013-07-16
1403	1403	1143	829271	2013-07-17
1403	1404	57	48330	2013-07-17
1403	1405	336	325383	2013-07-17
1403	1406	228	266156	2013-07-17
1403	1407	34	24392	2013-07-17
1403	1408	184	180959	2013-07-17
1403	1403	449	272154	2013-07-20
1403	1404	8	6112	2013-07-20
1403	1405	115	86299	2013-07-20
1403	1406	84	80943	2013-07-20
1403	1407	27	17256	2013-07-20
1403	1408	46	44809	2013-07-20
1403	1403	684	684664	2013-07-22
1403	1404	33	33587	2013-07-22
1403	1405	324	331814	2013-07-22
1403	1406	144	178593	2013-07-22
1403	1407	18	14477	2013-07-22
1403	1408	190	215227	2013-07-22
1403	1403	1373	906670	2013-07-18
1403	1404	26	34039	2013-07-18
1403	1405	324	307465	2013-07-18
1403	1406	143	173499	2013-07-18
1403	1407	26	22698	2013-07-18
1403	1408	223	190405	2013-07-18
1403	1403	949	750793	2013-07-19
1403	1404	47	69970	2013-07-19
1403	1405	244	208145	2013-07-19
1403	1406	142	199615	2013-07-19
1403	1407	57	19441	2013-07-19
1403	1408	202	242388	2013-07-19
1403	1403	176	131283	2013-07-21
1403	1404	2	4727	2013-07-21
1403	1405	114	95577	2013-07-21
1403	1406	31	23209	2013-07-21
1403	1407	19	11723	2013-07-21
1403	1408	55	44707	2013-07-21

inlet.js

var data2 = tributary.data;
var colorFun = d3.interpolateHsl("#00f", "#001");


var margin = {top: 2, right: 20, bottom: 198, left: 40};
var width = 1387 - margin.left - margin.right;
var height = 636 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.204159999999999);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.ordinal()
    .range(["#3A6CAF", "#504E8A", "#6B3E8A", "#6b486b", "#161414", "#d0743c", "#3B352E"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".71s"));

var data = data2.map(function(d) {
  
  return {
    doc_category: d.doc_category,
    ad_category: d.ad_category,
    clicks: +d.clicks,
    listings: +d.listings,
    date: d.date
  }
});

var cf = crossfilter(data);
dateD = cf.dimension(function(d){return d.date});


x.domain(data.map(function(d) { return d.ad_category; }));
y.domain([0, d3.max(data, function(d) { return (d.clicks / d.listings); })]);

var svg = d3.select("svg");

var title = svg.append("text")
    .attr("class", "title")
    .attr("dy", ".78em")
    .text(1403);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
.selectAll("text")
.attr("transform", "translate(20, 20)rotate(45)")

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-89)")
    .attr("y", 6)
	.attr("x", -22)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("CTR");

var barContainers, bars, values;
var colors = ["#864A1B", "#158F1F", "#8F1580", "#C5993A", "#15158F", "#A5C967", "#616169"];
var dates = [];
data.forEach(function(d,i){if (dates.indexOf(d.date) == -1) {dates.push(d.date)};
    //   colors.push(colorsFun((i+1)/7.0));
});


dates.forEach(function(date,ix){
 bars = svg.selectAll(".bars")
.data(dateD.filter(date).top(Infinity)).enter();

 barContainers = bars.append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + (x(d.ad_category) + ix*x.rangeBand()/dates.length) + ",0)"; });

 bars = barContainers
	.append('rect')
	.attr('width', x.rangeBand() / dates.length)
	.attr('y', function(d){ return y(d.clicks / d.listings)})
	.attr('height', function(d){return height - y(d.clicks / d.listings)})
	.style("fill", colors[ix]);

 values = barContainers
	.append("g")
	.attr("class", "vals")

values
	.append("text")
	.attr("transform",function(d){return "rotate(90)" + "translate("+(-5+y(d.clicks / d.listings))+",-17)"})
    .attr("dy", ".71em")
    .style("text-anchor", "end")
	.style("font", "4px")
	.text(function(d) { return ((d.clicks/d.listings)*100).toString().slice(0,5) })

});

console.log((d3.interpolateHsl("#8FA5DB", "#5C9955"))(0.5))

bars.on('click', function() {redraw()});


function redraw () {
  y.domain([0, d3.max(data, function(d) { return (d.clicks); })]);
  svg.selectAll('rect')
  .transition().duration(1000)
  .attr('y', function(d){return y(d.clicks) })
  .attr('height', function(d){return height - y(d.clicks)}) 

  //svg.selectAll('text').remove()
values.selectAll("text")
.transition().duration(1000)
.attr("transform",function(d){return "rotate(90)" + "translate("+(y(d.clicks)-40)+",-17)"})
.text(function(d) { return d.clicks});
  
}

style.css

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.title {
  font: 300 78px Helvetica Neue;
  fill: #666;
}
.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}