Tributary inlet

_.md

[ Launch: Tributary inlet ] 54969ca3a481df784e2d by ramnathv

app.css

.axis path,
.axis line{
  fill: none;
  stroke: black;
}

text {
  font-size: 11px; 
}

.y.axis path,
.y.axis line {
   stroke: transparent; 
}

g.tick line {
  stroke: transparent; 
}

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"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}},"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/aMfLPPh.png"}

inlet.js

var data = [{"x":1970,"r":1,"v":"y1","y":"G1"},{"x":1975,"r":2,"v":"y1","y":"G1"},{"x":1980,"r":3,"v":"y1","y":"G1"},{"x":1985,"r":4,"v":"y1","y":"G1"},{"x":1990,"r":5,"v":"y1","y":"G1"},{"x":1995,"r":6,"v":"y1","y":"G1"},{"x":2000,"r":7,"v":"y1","y":"G1"},{"x":2005,"r":8,"v":"y1","y":"G1"},{"x":2010,"r":9,"v":"y1","y":"G1"},{"x":1970,"r":1,"v":"y2","y":"G2"},{"x":1975,"r":2,"v":"y2","y":"G2"},{"x":1980,"r":3,"v":"y2","y":"G2"},{"x":1985,"r":4,"v":"y2","y":"G2"},{"x":1990,"r":5,"v":"y2","y":"G2"},{"x":1995,"r":6,"v":"y2","y":"G2"},{"x":2000,"r":7,"v":"y2","y":"G2"},{"x":2005,"r":8,"v":"y2","y":"G2"},{"x":2010,"r":9,"v":"y2","y":"G2"},{"x":1970,"r":1,"v":"y3","y":"G3"},{"x":1975,"r":2,"v":"y3","y":"G3"},{"x":1980,"r":3,"v":"y3","y":"G3"},{"x":1985,"r":4,"v":"y3","y":"G3"},{"x":1990,"r":5,"v":"y3","y":"G3"},{"x":1995,"r":6,"v":"y3","y":"G3"},{"x":2000,"r":7,"v":"y3","y":"G3"},{"x":2005,"r":8,"v":"y3","y":"G3"},{"x":2010,"r":9,"v":"y3","y":"G3"}] 

var margin = {top: 92, right: 158, bottom: 30, left: 50},
    width = 501 - margin.left - margin.right,
    height = 332 - margin.top - margin.bottom;

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 + ")")



var x = d3.scale.linear()
  .range([0, width])
  .domain([1970, 2010]);
         
 
var xAxis = d3.svg.axis()
  .scale(x)
  .orient('bottom')
  .tickFormat(function(d){return d})


svg.append('g')
  .attr('class', 'x axis')
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)

var y = d3.scale.ordinal()
  .rangeBands([height, 0])
  .domain(["Group 1", "Group 2", "Group 3"])

var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left')

var color = d3.scale.category10()
  .domain(["Group 1", "Group 2", "Group 3"])

svg.append('g')
  .attr('class', 'y axis')
  .attr("transform", "translate(" + width*1.3 + ",0)")
  .call(yAxis)

var circles = svg.append('g')
  .attr('class', 'circles')
  .selectAll('circle')
  .data(data).enter()
  .append('circle')
    .attr('cx', function(d){return x(d.x)})
    .attr('cy', function(d){return y.rangeBand()/2 + y(d.y)})
    .attr('r', function(d){return Math.sqrt(d.r)*4})
    .attr('fill', function(d){return color(d.y)})

circles.on("mouseover", function(){
  d3.select(this)
    .attr("fill-opacity", 0.74)
})

circles.on("mouseout", function(){
  d3.select(this)
    .attr("fill-opacity", 1)
})