Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/app.js

Last active March 18, 2017 17:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/9f019dafedb7f65bbb99a55eac9797fe to your computer and use it in GitHub Desktop.
Save aaizemberg/9f019dafedb7f65bbb99a55eac9797fe to your computer and use it in GitHub Desktop.
Download ZIP
tarea: filtrar las barras mostradas, según el slider
Raw
app.js
var w = 500, h = 600;
var svg = d3.select("div#viz")
.append("svg")
.attr("width",w)
.attr("height",h);
var data = [{"provincia":"Buenos Aires","poblacion":15625084},
{"provincia":"Córdoba","poblacion":3308876},
{"provincia":"Santa Fe","poblacion":3194537},
{"provincia":"Ciudad Autónoma de Buenos Aires","poblacion":2890151},
{"provincia":"Mendoza","poblacion":1738929},
{"provincia":"Tucumán","poblacion":1448188},
{"provincia":"Entre Ríos","poblacion":1235994},
{"provincia":"Salta","poblacion":1214441},
{"provincia":"Misiones","poblacion":1101593},
{"provincia":"Chaco","poblacion":1055259},
{"provincia":"Corrientes","poblacion":992595},
{"provincia":"Santiago del Estero","poblacion":874006},
{"provincia":"San Juan","poblacion":681055},
{"provincia":"Jujuy","poblacion":673307},
{"provincia":"Río Negro","poblacion":638645},
{"provincia":"Neuquén","poblacion":551266},
{"provincia":"Formosa","poblacion":530162},
{"provincia":"Chubut","poblacion":509108},
{"provincia":"San Luis","poblacion":432310},
{"provincia":"Catamarca","poblacion":367828},
{"provincia":"La Rioja","poblacion":333642},
{"provincia":"La Pampa","poblacion":318951},
{"provincia":"Santa Cruz","poblacion":273964},
{"provincia":"Tierra del Fuego","poblacion":127205}];
// cargar el JSON desde un archivo externo, usar d3.json(...)
// selectAll, select, data, enter, append
var data_filtered = _.filter(data, function(o) { return o.poblacion > 1; });
// Tutoriales JS para gatos
// http://jsforcats.com/ , https://jsparagatos.com/
// http://learnjsdata.com/
svg.append("g").style("font-weight","normal").style("fill","grey")
.selectAll("text.lprov").data(data_filtered).enter().append("text")
.attr("class","lprov")
.attr("x",230)
.attr("y", function(d,i) { return (i+1)*15;} )
.text( function(d,i) { return d.provincia;} )
.attr("text-anchor","end");
var max = d3.max(data.map(function(o) { return o.poblacion; }));
var escala = d3.scaleLinear()
.domain([0, max ])
.range([10, w-240]);
var color = d3.scaleOrdinal(d3.schemeCategory20);
svg.append("g")
.selectAll("rect").data(data_filtered).enter().append("rect")
.attr("x",240)
.attr("y", function(d,i) { return (i*15)+2;} )
.attr("width", 0 )
.attr("height", 14)
.attr("fill",function (d,i) { return color(i); } )
.append("title")
.text( function(d,i) { return d.poblacion.toLocaleString() + ' habitantes';} );
d3.selectAll("rect")
.transition().duration(1000)
.delay( function(d,i) {return Math.sqrt(i*10000);} )
.attr("width", function(d,i) { return escala(d.poblacion);} )
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</head>
<body>
<!-- tarea, usar este slider, para filtrar el grafico de barras -->
<input id="rango" type="range" min="0" max="15625084" value="15625084" />
<!-- dentro de este DIV, esta el SVG generado desde D3.js -->
<div id="viz"></div>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment