Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Created May 14, 2020 23:39
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/6e3aba34462152348f555083e0a88d54 to your computer and use it in GitHub Desktop.
Save aaizemberg/6e3aba34462152348f555083e0a88d54 to your computer and use it in GitHub Desktop.
Download ZIP
mom w19 tomando los datos de data.world (d3js, divs)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>d3.js barchart divs</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div id="top10"></div>
<script>
var url = "https://download.data.world/s/so6fbu7jjvdoagcun3fvwssca4xj36";
d3.csv( url ).then(function(data) {
data.forEach(function(d) {
d.score = Math.round((+d.ladder_score-7)*390);
});
d3.select("div#top10").selectAll("div").data(data)
.enter()
.append("div")
.style("width", (d) => d.score + "px")
.style("background","steelblue")
.style("padding","2px")
.style("margin","2px")
.style("color","white")
.text( (d) => d.country_name );
})
.catch(function(error){
// handle error
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment