index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<head>
<meta name="description" content="">
<link href="sunburst.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="row-fluid">
<div class="span5">
<div class="row">
<div class="brand">La Vida en Bici</div>
<div class="blob">
<p><strong>BIKESTORMING DATA ARCADE</strong> permite identificar los principales problemas para usar la bici como transporte en tu ciudad</p>
</div>
<div class="bronco"></div>
</div>
</div>
<div class="span7">
<div id="vis"></div>
</div>
</div>
<script type="text/javascript" src="//d3js.org/d3.v2.js"></script>
<script src="sunburst.js"></script>
</body>
</html>
blob.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="250px" height="332px" viewBox="0 0 250 332" enable-background="new 0 0 250 332" xml:space="preserve">
<g>
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M246.216,258.284c-5.861,40.096-51.399,20.435-76.396,25.603
c-16,22.853-43.281,26.803-61.128,47.469c-4.583-23.626,20.876-18.927,19.033-43.523c-42.218-4.89-118.462,19.677-124.798-36.08
c-3.171-27.908-1.087-47.375-1.087-74.91c0-24.533-6.522-160.739,13.591-171.484c12.446-6.649,41.633-5.186,56.61-5.186
c37.988,0,68.915,0,107.707,0c29.521,0,62.599-4.426,67.556,31.705C252.747,71.563,244.376,220.212,246.216,258.284"/>
</g>
</g>
</g>
</svg>
datos-color.json
[
{
"name": "Problemas a resolver en BA",
"children": [
{
"name": "para que sea ACCESIBLE",
"children": [
{
"name": "Estacionar bicicletas es caro", "colour": "#61D1E2"
},
{
"name": "Falta acceso a Bicicletas", "colour": "#61D1E2"
},
{
"name": "Falta acceso a Bicicletas Públicas", "colour": "#61D1E2"
},
{
"name": "Impuestos favorables a la movilidad motorizada", "colour": "#61D1E2"
},
{
"name": "Los insumos para Bicicletas no son accesibles", "colour": "#61D1E2"
},
{
"name": "No poder usar la bicicleta en viajes", "colour": "#61D1E2"
},
{
"name": "No puedo reparar mi Bicicleta fácilmente", "colour": "#61D1E2"
}
]
},
{
"name": "para que sea ATRACTIVO",
"children": [
{
"name": "Falta cultura para combinar bicicleta y estilo personal", "colour": "#FA5655"
},
{
"name": "Falta de infraestructura para bicicletas en el trabajo", "colour": "#FA5655"
},
{
"name": "Me resulta difícil andar en Bicicleta", "colour": "#FA5655"
},
{
"name": "No me resulta interesante la Bicicleta", "colour": "#FA5655"
}
]
},
{
"name": "para que sea EFICIENTE",
"children": [
{
"name": "Bloqueo de Ciclovías", "colour": "#8dffe1"
},
{
"name": "Falta de integración de Bicicleta con otros Transportes", "colour": "#8dffe1"
},
{
"name": "Falta de legislación específica sobre Bicicletas", "colour": "#8dffe1"
},
{
"name": "Faltan Ciclovías", "colour": "#8dffe1"
},
{
"name": "Faltan estacionamientos de Bicicletas", "colour": "#8dffe1"
},
{
"name": "Las personas mayores tienen dificultades para moverse en bicicleta", "colour": "#8dffe1"
},
{
"name": "Mal estado de las ciclovías", "colour": "#8dffe1"
},
{
"name": "Mala integración de Bicicleta con otros Transportes", "colour": "#8dffe1"
},
{
"name": "No se cumple la legislación específica sobre Bicicletas", "colour": "#8dffe1"
}
]
},
{
"name": "para que sea SEGURO",
"children": [
{
"name": "Bloqueo de Ciclovías", "colour": "#D7F8FC"
},
{
"name": "Falta de convivencia entre peatones y ciclistas", "colour": "#D7F8FC"
},
{
"name": "Falta de educación vial para ciclistas", "colour": "#D7F8FC"
},
{
"name": "Falta de señalización en las ciclovías", "colour": "#D7F8FC"
},
{
"name": "Faltan Ciclovías", "colour": "#D7F8FC"
},
{
"name": "Inseguridad en las Ciclovías", "colour": "#D7F8FC"
},
{
"name": "Sensación de inseguridad física", "colour": "#D7F8FC"
}
]
}
]
}
]
sunburst.css
body {
background: url(http://www.bikestorming.org/wp-content/uploads/2012/08/bikestorming-pattern-paper1.jpg);
background-repeat: repeat;
font-family: Courier, sans-serif;
}
path {
stroke: #000;
stroke-width: 1.5;
cursor: pointer;
}
text {
font: 11px sans-serif;
cursor: pointer;
}
body {
}
h1 {
text-align: center;
margin: .5em 0;
}
p#intro {
text-align: center;
margin: 1em 0;
}
#breadcrumbs { display: none; }
.brand {
display: block;
background: url('header.svg');
width: 226px;
height: 461px;
text-indent: -5000px;
margin-left: 70px;
margin-top: -15px;
position: absolute;
}
.bronco {
display: block;
background: url('bronco.svg');
background-repeat: no-repeat;
width: 406px;
height: 347px;
text-indent: -5000px;
position: absolute;
bottom: 0;
left: -20px;
}
.blob {
position: absolute;
top: 60px;
left: 285px;
z-index: 20;
display: block;
font-family: Courier, sans-serif;
background: url('blob.svg');
background-repeat: no-repeat;
width: 250px; height: 332px;
margin: 5px;
}
.blob a {
font-size: 14px;
color: black;
margin: 20px;
line-height: 20px;
}
.blob p {
font-size: 18px;
margin: 20px;
line-height: 29px;
}
sunburst.js
var w = 710,
h = w,
r = w / 2,
x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, r]),
p = 15,
duration = 2000;
var div = d3.select("#vis");
var vis = div.append("svg")
.attr("width", w + p * 1.5)
.attr("height", h + p * 2)
.append("g")
.attr("transform", "translate(" + (r + p) + "," + (r + p) + ")");
var partition = d3.layout.partition()
.sort(null)
.value(function(d) { return 5.8 - d.depth; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
d3.json("datos-color.json", function(json) {
var nodes = partition.nodes({children: json});
var path = vis.selectAll("path").data(nodes);
path.enter().append("path")
.attr("id", function(d, i) { return "path-" + i; })
.attr("d", arc)
.style("stroke-width", "0")
.style("stroke", 333)
.attr("fill-rule", "evenodd")
.style("fill", colour)
.on("click", click);
var text = vis.selectAll("text").data(nodes);
var textEnter = text.enter().append("text")
.style("fill-opacity", 1)
.style("font-family", "Courier")
.style("font-size", "10")
.style("font-weight", "bold")
.style("fill", function(d) {
return brightness(d3.rgb(colour(d))) < 9 ? "#333" : "#000";
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", "-.7em")
.attr("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("click", click);
textEnter.append("tspan")
.attr("x", 0)
.style("font-size", "11")
.text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", ".8em")
.style("font-size", "11")
.text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", ".8em")
.style("font-size", "11")
.text(function(d) { return d.depth ? d.name.split(" ")[2] || "" : ""; });
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.style("font-size", "11")
.text(function(d) { return d.depth ? d.name.split(" ")[3] || "" : ""; });
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.style("font-size", "11")
.text(function(d) { return d.depth ? d.name.split(" ")[5] || "" : ""; });
function click(d) {
path.transition()
.duration(duration)
.attrTween("d", arcTween(d));
text
.style("visibility", function(e) {
return isParentOf(d, e) ? null : d3.select(this).style("visibility");
})
.transition().duration(duration)
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
.attrTween("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1;
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; })
.each("end", function(e) {
d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
});
}
});
function isParentOf(p, c) {
if (p === c) return true;
if (p.children) {
return p.children.some(function(d) {
return isParentOf(d, c);
});
}
return false;
}
function colour(d) {
if (d.children) {
var colours = d.children.map(colour),
a = d3.hsl(colours[0]),
b = d3.hsl(colours[1]);
return d3.hsl((a.h + b.h) / 5, a.s * 1.2, a.l / 1.2);
}
return d.colour || "#fff";
}
function arcTween(d) {
var my = maxY(d),
xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, my]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
return function(d) {
return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function maxY(d) {
return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
}
function brightness(rgb) {
return rgb.r * .299 + rgb.g * .1 + rgb.b * .114;
}