Skip to content

Instantly share code, notes, and snippets.

@mauroSolis

mauroSolis/data.json

Created April 29, 2013 04:57
Show Gist options
  • Save mauroSolis/5479782 to your computer and use it in GitHub Desktop.
Save mauroSolis/5479782 to your computer and use it in GitHub Desktop.
Download ZIP
Practica 7 TreeMap utilizando los datos de la division territorial administrativa de Costa Rica por cantones data.json contiene algunos datos de la division territorial de costa rica para el grafico, pero no esta completo
Raw
data.json
{
"name": "Costa Rica",
"children": [
{
"name": "San Jose",
"children": [
{
"name": "Carmen",
"children": [
{"name": "Amon", "size": 3938},
{"name": "Aranjuez", "size": 3812},
{"name": "California", "size": 6714},
{"name": "Carmen", "size": 743}
]
},
{
"name": "Merced",
"children": [
{"name": "Bajos de la Union", "size": 3534},
{"name": "Claret", "size": 5731},
{"name": "Coca Cola", "size": 7840},
{"name": "Iglesias Flores", "size": 5914},
{"name": "Mantica", "size": 3416}
]
},
{
"name": "Hospital",
"children": [
{"name": "Almendarez", "size": 7074},
{"name": "Angeles", "size": 2043},
{"name": "Bolivar", "size": 3029},
{"name": "Carit", "size": 1023}
]
},
{
"name": "Catedral",
"children": [
{"name": "Bellavista", "size": 3534},
{"name": "California", "size": 5731},
{"name": "Carlos María", "size": 7840},
{"name": "Dolorosa", "size": 5914},
{"name": "Merced", "size": 3416}
]
},
{
"name": "Catedral",
"children": [
{"name": "Bellavista", "size": 3534},
{"name": "California", "size": 5731},
{"name": "Carlos María", "size": 7840},
{"name": "Dolorosa", "size": 5914},
{"name": "Merced", "size": 3416}
]
}
]
},
{
"name": "Alajuela",
"children": [
{
"name": "Alajuela",
"children": [
{"name": "Acequia Grande", "size": 3938},
{"name": "Carme", "size": 3812},
{"name": "Villa Bonita", "size": 6714},
{"name": "Tropicana", "size": 743}
]
},
{
"name": "San Jose",
"children": [
{"name": "Amistad", "size": 938},
{"name": "CopaBlanca", "size": 3812},
{"name": "Jocote", "size": 10714},
{"name": "Maravilla", "size": 243}
]
}
]
}
]
}
Raw
practica7.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect { fill: none; stroke: #fff; \}
text { font: 10px sans-serif;}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.padding(4)
.size([width, height])
.value(function(d) { return d.size; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(-.5,-.5)");
d3.json("data.json", function(error, json) {
var cell = svg.data([json]).selectAll("g")
.data(treemap.nodes)
.enter().append("g")
.attr("class", "cell")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
cell.append("rect")
.attr("width", function(d) { return d.dx; })
.attr("height", function(d) { return d.dy; })
.style("fill", function(d) { return d.children ? color(d.name) : null; });
cell.append("text")
.attr("x", function(d) { return d.dx / 2; })
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.children ? null : d.name; });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment