No todos los gráficos son iguales.

Integrar los datos en el script

<script type="application/json" id='this-data'>
{"x":{
  "data":[{"x":[1,2,3,4,7,10,13,16,18,21,23],
  "y":[18208995,16873318,20947219,20081733,20351887,23403185,
       24802931,22814451,25483504,25448684,24015425],
  "text":["votos: 18208995
Tipo:  Congreso
partidos: 70",...
	    

var my_data_text = document.getElementById("this-data").textContent;
var my_data = JSON.parse(my_data_text);
console.log(my_data)

    d3.select("#bar1")
    .selectAll("div")
    .data(my_data.x.data[0].y).enter()
    .append("div")
    .style("width", function(d) { console.log(d);return d/50000 + "px"; })
      .text(function(d) { return d; });

var bar1 = d3.select("#bar1")

Seleccionando por tipo de elemento

var all_divs = bar1.selectAll("div")

D3 → funcional

Los data joins declaran qué se quiere hacer con los datos.

var times = time_div.selectAll("div").data(data);

divs no existen...

... todavía

times.enter().append("div")
			   .style("width", function(d) { 
			     console.log("ENTER"+d);
			     return d/100 + "px"; 
			   })
			   .text(function(d) { return d; });
	    

¿Y si ya existen?

times.style("width", function(d) { 
		     console.log("ENTER+UPDATE"+d);
		     return d/100 + "px"; 
		   })
		    	.text(function(d) { return d; });

¿Y si ya se fueron?

times.exit().remove();

Leyendo JSON de un servidor

d3.json("https://raw.githubusercontent.com/JJ/top-github-users-data/master/data/user-data-Granada.json"
		 , function( error,json) {
		     if (error) return console.warn(error);
		     github_granada = json;

		});

Viendo los círculos

Obteniendo los datos

github_granada = json.map( function (obj) {
		 var this_obj = { x: obj.contributions/10,
		 y: obj.followers,
		 r: obj.stars/20 };
		 return this_obj;
		});

El mapa de las estrellas

var this_canvas = d3.select("#github");
		this_canvas.attr("width",900).attr("height",700);

this_canvas.selectAll("circle")
		 .data(github_granada)
		 .enter().append("circle")
		 .attr("cx", function(d) { return d.x })
		 .attr("cy", function(d) { return d.y })
		 .attr("r", function(d) { return d.r })
		.attr("fill","orange");

Leyendo también CSV

d3.csv("http://opendata.ugr.es/dataset/604c78f6-f12f-4dbf-9d58-45402cfa91f3/resource/5646d07c-ffee-4231-a556-a69e82551336/download/demandadegrado20142015.csv",
		 function( error, datos) {
		 if (error) return console.warn(error);
		console.log(datos);});
	    

Usemos los ejes

A escala humana

var x_axis_scale = d3.scale.linear()
                 .domain([0,600])
		 .range([padding,h-padding*2]);

var x_axis = d3.svg.axis()
		 .scale(x_axis_scale)
		 .orient("bottom").ticks(5);

Añadiendo gráfico

this_canvas.append("g")
		 .attr("class","x axis")
		 .attr("transform"
		   , "translate(" + padding + "," + padding + ")")
		 .call(x_axis);

this_canvas.selectAll("circle")
		 .data(matriculas)
		 .enter().append("circle")
		 .attr("cx", function(d) { return x_axis_scale(d.x) })
		 .attr("cy", function(d) { return y_axis_scale(d.y) })
		 .attr("r", function(d) { return d.r*10 })
		 .attr("fill","orange");
		 });