Bubble example

by maxibaezpy

CSS

body{font-family: Arial, sans-serif;font-size:10px;}
.axis path,.axis line {fill: none;stroke:#b6b6b6;shape-rendering: crispEdges;}
/*.tick line{fill:none;stroke:none;}*/
.tick text{fill:#999;}
g.journal.active{cursor:pointer;}
text.label{font-size:12px;font-weight:bold;cursor:pointer;}
text.value{font-size:12px;font-weight:bold;}

JavaScript

var dataset = [
 {
 "total": 51,
 "name": "The Journal of neuroscience",
 "articles": [
      {year:2010, size:6}, 
      {year:2011, size:10}, 
      {year:2012, size:11}, 
      {year:2013, size:23}, 
      {year:2006, size:1}
  ]
 },
 {
 "total": 51,
 "name": "The Journal 2",
 "articles": [
      {year:2010, size:6}, 
      {year:2011, size:10}, 
      {year:2012, size:11}, 
      {year:2013, size:23}, 
      {year:2004, size:1}
  ]
 },
 {
 "total": 51,
 "name": "The Journal 3",
 "articles": [
      {year:2010, size:6}, 
      {year:2011, size:10}, 
      {year:2012, size:11}, 
      {year:2007, size:23}, 
      {year:2004, size:1}
  ]
 }
 ]


var margin = {top: 20, right: 200, bottom: 0, left: 20},
	width = 300,
	height = 650;

var start_year = 2004,
	end_year = 2013;

var c = d3.scale.category20c();

var x = d3.scale.linear()
	.range([0, width]);

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

xAxis.tickFormat(d3.format("0000"));

x.domain([start_year, end_year]);
var xScale = d3.scale.linear()
		.domain([start_year, end_year])
		.range([0, width]);
   
var svg;
var rMax = 20;
var padding = 5;
var j=0;
function circle (g, data){
		var rscale = scale(data);
		return  g
    		.selectAll("g")
        .data(data["articles"])
        .enter()
        .append("circle")
  		  .attr("cx", function(d, i) { 
      		return xScale(d.year); 
        })
			  .attr("cy", data.y)
			  .attr("r", function(d) { 
      	 	return rscale(d.size);
        })
}

function text(g, data){
   return  g
    		.selectAll("g")
        .data(data["articles"])
        .enter()
    		.append("text")
        .attr("y", data.y)
			  .attr("x",function(d, i) { 
      	    return xScale(d.year); 
         })
			  .attr("class","value")
			  .text(function(d){
      	  return d.size;
        })
			  .style("display","none");
}

function scale(data){
		return d3.scale.linear()
			.domain([0, d3.max(data['articles'], function(d) {
      	return d.size; 
     	})])
     .range([2,...