Skip to content

Instantly share code, notes, and snippets.

@mishuagopian

mishuagopian/data.json

Created March 23, 2017 01:19
Show Gist options
  • Save mishuagopian/03ba13326bdae9cc1bf5cd907054621e to your computer and use it in GitHub Desktop.
Save mishuagopian/03ba13326bdae9cc1bf5cd907054621e to your computer and use it in GitHub Desktop.
Download ZIP
Extender del gráfico de barras - Agopian
Raw
data.json
[
{ "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}
]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Visualización</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://rawgit.com/Caged/d3-tip/master/index.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
</head>
<body>
<div id="viz"></div>
</body>
<script src="script.js"></script>
</html>
Raw
script.js
d3.json("data.json", function(data) {
var w = 800, h = 600 , pad = 250;
var svg = d3.select("div#viz").append("svg").attr("width", w).attr("height", h);
svg.selectAll("text").data(data).enter().append("text")
.attr("x", 245)
.attr("y", function(d,i) { return 15 + (i*20); })
.style("text-anchor", "end")
.text( function(d,i) { return d.provincia; })
var max = _.max(data, function(d) { return d.poblacion; }).poblacion
var escala = d3.scaleLinear().domain([0,max]).range([0,w-pad]);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([80, 0])
.html(function(d) { return "<strong>" + d.provincia + "</strong><br/><span style='color:red'>" + d.poblacion .toLocaleString()+ "</span>"; })
svg.call(tip)
svg.selectAll("rect").data(data).enter().append("rect")
.attr("x", 250)
.attr("y", function(d,i) {return (i*20);} )
.attr("width", function(d,i) { return escala(d.poblacion) })
.attr("height", 18)
.on("mouseover", tip.show )
.on("mousout", tip.hide );
});
Raw
style.css
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(255, 255, 255, 0.9);
border-radius: 2px;
border: 1px solid black;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment