Skip to content

Instantly share code, notes, and snippets.

@qcho

qcho/.block

Last active March 5, 2018 15:06
Show Gist options
  • Save qcho/781957772278939681b853eb455590e6 to your computer and use it in GitHub Desktop.
Save qcho/781957772278939681b853eb455590e6 to your computer and use it in GitHub Desktop.
Download ZIP
Infoviz - TP1
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
</head>
<body>
<h1>InfoViz - Clase1</h1>
<h2>SVG</h2>
<div id="viz"/></div>
<br/>
<h2>Tablas</h2>
<div id="content"/></div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
let data = [
{"provincia":"BUENOS AIRES","poblacion":15625084},
{"provincia":"CORDOBA","poblacion":3308876},
{"provincia":"SANTA FE","poblacion":3194537},
{"provincia":"CABA","poblacion":2890151},
{"provincia":"MENDOZA","poblacion":1738929},
{"provincia":"TUCUMAN","poblacion":1448188},
{"provincia":"ENTRE RIOS","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":"RIO NEGRO","poblacion":638645},
{"provincia":"NEUQUEN","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}
];
// SVG
let barHeight = 25,
barWidth = 400,
textWidth = 200,
linearScale = d3.scaleLinear()
.domain([0,d3.max(data, (d) => d.poblacion)])
.range([0,barWidth])
populationFormat = d3.format(".4s")
let subSvg = d3.select("#viz")
.append("svg")
.attr("width", 800)
.attr("height", 600)
.selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("y", (d, i) => (i * (barHeight + 5)))
subSvg.append("rect")
.attr("x", textWidth)
.attr("height", barHeight)
.attr("fill", "orange")
.attr("width", 0)
.transition().duration(2000)
.attr("width", (d, i) => linearScale(d.poblacion))
subSvg.append("text")
.attr("font-family", "sans-serif")
.attr("text-anchor", "end")
.attr("x", textWidth - 5)
.attr("y", barHeight - 5)
.text((d, i) => d.provincia)
subSvg.append("text")
.attr("font-family", "sans-serif")
.attr("fill", "blue")
.attr("text-anchor", (d, i) => i == 0 ? "end" : "start")
.attr("x", (d, i) => textWidth + linearScale(d.poblacion) + (i == 0 ? -5 : 5))
.attr("y", (d, i) => barHeight - 5)
.text((d, i) => populationFormat(d.poblacion))
// TABLAS
let row = d3.select("#content").append("table")
.selectAll("tr")
.data(data).enter()
.append("tr").attr("class", "prov")
row.append("td").text((d, i) => d.provincia)
row.append("td").text((d, i) => d.poblacion)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment