Skip to content

Instantly share code, notes, and snippets.

@mrtriangle

mrtriangle/flare.json

Last active August 29, 2015 14:00
Show Gist options
  • Save mrtriangle/11221851 to your computer and use it in GitHub Desktop.
Save mrtriangle/11221851 to your computer and use it in GitHub Desktop.
Download ZIP
Bubbles!
Raw
flare.json
{
"name": "Music",
"children": [
{
"name": "Punk",
"children": [
{
"name": "Hardcore",
"children": [
{"name": "Black Flag", "size": 3938},
{"name": "Bad Brains", "size": 3812},
{"name": "Cro-Mags", "size": 743}
]
},
{
"name": "Glam",
"children": [
{"name": "New York Dolls", "size": 3534},
{"name": "Iggy Pop", "size": 5731}
]
},
{
"name": "Anarcho Punk",
"children": [
{"name": "Crass", "size": 7074}
]
}
]
},
{
"name": "Hip Hop",
"children": [
{"name": "Easing", "size": 17010},
{"name": "FunctionSequence", "size": 5842},
{
"name": "Producers",
"children": [
{"name": "J Dilla", "size": 1983},
{"name": "Dan The Automater", "size": 2047},
{"name": "Nujabes", "size": 1375},
{"name": "Dj Muro", "size": 8746},
{"name": "Hino Idefumi", "size": 2202},
{"name": "Madlib", "size": 1382},
{"name": "Dj Premier", "size": 1629}
]
},
{
"name": "Golden Age Hip-Hop",
"children": [
{"name": "Wu-Tang",
"children": [
{"name": "RZA", "size": 2047},
{"name": "GZA", "size": 1375},
{"name": "Inspectah Deck", "size": 8746},
{"name": "Ghostface Killa", "size": 2202},
{"name": "Ol' Dirty Bastard", "size": 1382}
]
},
{"name": "Gang Starr", "size": 2047},
{"name": "Big L", "size": 1375},
{"name": "Dr Octogon", "size": 8746},
{"name": "Dr Dre", "size": 2202},
{"name": "Eazy-E", "size": 1382},
{"name": "Common Sense", "size": 1629}
]
}
]
}
]
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bubbles</title>
<style>
body {
font-family: "helvetica";
}
button {
margin: 0 7px 0 0;
background-color: #f5f5f5;
border: 1px solid #dedede;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
font-size: 12px;
line-height: 130%;
text-decoration: none;
font-weight: bold;
color: #565656;
cursor: pointer;
}
.single-bar {
min-height: 1px;
min-width: 30px;
background-color: #4682b4;
margin-right: 1px;
font-size: 10px;
color: #f0f8ff;
text-align: center;
width: 15px;
display: inline-block;
}
.baseline {
height: 1px;
background-color: black;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font: 10px sans-serif;
}
.axis .grid-line{
stroke: black;
shape-rendering: crispEdges;
stroke-opacity: .2;
}
.line{
fill: none;
stroke: #000;
stroke-width: 2;
}
.dot {
fill: #fff;
stroke: #000;
}
.area {
stroke: none;
fill: steelblue;
fill-opacity: .2;
}
.pie text{
fill: white;
font-weight: bold;
}
.bubble{
fill-opacity: .3;
}
.bar{
stroke: none;
fill: steelblue;
}
text {
font-size: 11px;
pointer-events: none;
}
text.parent {
fill: steelblue;
}
circle {
fill: #ccc;
stroke: #999;
pointer-events: all;
}
circle.parent {
fill: steelblue;
fill-opacity: .1;
stroke: steelblue;
}
circle.parent:hover {
stroke-width: .5px;
}
circle.child {
pointer-events: none;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
function pack() {
var _chart = {};
var _width = 1280, _height = 800,
_svg,
_r = 720,
_x = d3.scale.linear().range([0, _r]),
_y = d3.scale.linear().range([0, _r]),
_nodes,
_bodyG;
_chart.render = function () {
if (!_svg) {
_svg = d3.select("body").append("svg")
.attr("height", _height)
.attr("width", _width);
}
renderBody(_svg);
};
function renderBody(svg) {
if (!_bodyG) {
_bodyG = svg.append("g")
.attr("class", "body")
.attr("transform", function (d) {
return "translate(" + (_width - _r) / 2 + "," + (_height - _r) / 2 + ")";
});
}
var pack = d3.layout.pack()
.size([_r, _r])
.value(function (d) {
return d.size;
});
var nodes = pack.nodes(_nodes);
console.log(nodes);
renderCircles(nodes);
renderLabels(nodes);
}
function renderCircles(nodes) {
var circles = _bodyG.selectAll("circle")
.data(nodes);
circles.enter().append("svg:circle");
circles.transition()
.attr("class", function (d) {
return d.children ? "parent" : "child";
})
.attr("cx", function (d) {return d.x;})
.attr("cy", function (d) {return d.y;})
.attr("r", function (d) {return d.r;});
circles.exit().transition()
.attr("r", 0)
.remove();
}
function renderLabels(nodes) {
var labels = _bodyG.selectAll("text")
.data(nodes);
labels.enter().append("svg:text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("opacity", 0);
labels.transition()
.attr("class", function (d) {
return d.children ? "parent" : "child";
})
.attr("x", function (d) {return d.x;})
.attr("y", function (d) {return d.y;})
.text(function (d) {return d.name;})
.style("opacity", function (d) {
return d.r > 20 ? 1 : 0;
});
labels.exit().remove();
}
_chart.width = function (w) {
if (!arguments.length) return _width;
_width = w;
return _chart;
};
_chart.height = function (h) {
if (!arguments.length) return _height;
_height = h;
return _chart;
};
_chart.r = function (r) {
if (!arguments.length) return _r;
_r = r;
return _chart;
};
_chart.nodes = function (n) {
if (!arguments.length) return _nodes;
_nodes = n;
return _chart;
};
return _chart;
}
var chart = pack();
function largeFlare() {
d3.json("flare.json", function (nodes) {
chart.nodes(nodes).render();
});
}
</script>
<div class="control-group">
<button onclick="largeFlare()">Bubbles!</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment