Runs Per Over

_.md

[ Launch: Runs Per Over ] c51f4edc368c12e48128 by paulosborne

config.json

{"description":"Runs Per Over","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.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},"index.html":{"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/fxTNK6E.png"}

inlet.js

var x = d3.scale.ordinal();
var y = d3.scale.linear();
var yAxis = d3.svg.axis();
var xAxis = d3.svg.axis();
var margin = { top: 40, right: 10, bottom: 40, left: 40 };
var width = tributary.sw - margin.left - margin.right;
var height = tributary.sh - margin.top - margin.bottom;
var overs = [ ];

for (var i = 1; i < 50; i+=1) {
  overs.push({
    balls: [
      { value: Math.random() * 6 },
      { value: Math.random() * 6 },
      { value: Math.random() * 6 },
      { value: Math.random() * 6 },
      { value: Math.random() * 6 },
      { value: Math.random() * 6 }
    ]
  })
}

/**
 * Runs Per Over
 */
var runsPerOver = overs.map(function (over) {
  return over.balls.reduce(function (n, i) {
    return n += i.value
  }, 0)
})

/**
 * Total Score
 */
var total = runsPerOver.reduce(function (sum, over, i) {
  return sum += over
}, 0)

var svg = d3.select('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform',"translate("+ margin.left +","+ margin.top+")")

/*
 * Y-SCALE
 */
y.domain([d3.max(runsPerOver),0])
y.range([0, height]);

/*
 * Y-AXIS
 */

xAxis.scale(x).orient('bottom')
yAxis.scale(y)
yAxis.orient('left')
yAxis.ticks(10)

svg.append('g')
    .attr("class","y axis")
    .call(yAxis)
    .append("text")
    .attr("transform","rotate(0)")
    .attr("y", -22)
    .attr("x", -20)
    .attr("dy", ".71em")
    .style("font-size","12")
    .style("text-anchor","top")
    .style("font-weight","bold")
    .text("Runs Scored Per Over")     


x.domain(d3.range(0,50));
x.rangeRoundBands([0, width],0.2)

svg.append("g")
    .attr("class","x axis")
    .attr("transform","translate(0,"+ height +")")
    .call(xAxis)
    .append("text")
    .attr("y", 10)
    .attr("dy", ".71em")
    .style("text-anchor","end")
    .text("Overs")   

var bars = svg.selectAll(".bar")
   .data(runsPerOver)
   .enter()
   .append("rect")
   .attr('class','bar')
   .attr('x', function (d,i) { return x(i) })
   .attr('y', y)
   .attr('width', x.rangeBand())
   .attr('height', function (d,i) { return (height - 1) - y(d) })

style.css

#runs-per-over {
  border: 1px solid #efefef;
  background-color: white;
  width: 750px;
  height: 500px;
  margin: 50px auto;
}

.axis {
  font: 10px sans-serif;
}

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


.bar {
  fill: steelblue;
}

.bar:hover {
  fill: orange;
}