Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active August 28, 2019 19:14
Show Gist options
  • Save aaizemberg/68db03c3a5c5c5a3ddd11fccdf9c2c8e to your computer and use it in GitHub Desktop.
Save aaizemberg/68db03c3a5c5c5a3ddd11fccdf9c2c8e to your computer and use it in GitHub Desktop.
Download ZIP
barras (w35) -
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>d3js</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 0px;
margin: 5px;
color: white;
height: 12px;
}
</style>
</head>
<body>
<div id="parrafos"></div>
<div class="chart"></div>
<div id="svg"></div>
<script>
var datos = [{"platform":"Mobile Games","earnings":538308},
{"platform":"Console Games","earnings":334596},
{"platform":"PC Games","earnings":317755}];
d3.select("div#parrafos").selectAll("p").data(datos).enter().append("p")
.attr("class","p1")
.text( function(d,i) {return i+1 + ". " + d.platform + " " + d.earnings.toLocaleString(); } )
// .text( (d,i) => i+1 + ". " + d.platform + " " + d.earnings.toLocaleString() )
var color = "#7BAAF7";
d3.select("div.chart").selectAll("div").data(datos).enter().append("div")
.style("width", function(d) { return d.earnings/3000 + "px"; })
.text(function(d) { return d.platform; })
.attr("title", function(d) { return "u$s " + d.earnings.toLocaleString(); } );
// TODO (para la proxima clase)
// 1. agregar las escalas lineales
// 2. dibujar las barras con SVG (rect y text)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment