Skip to content

Instantly share code, notes, and snippets.

@maritrinez

maritrinez/data_hive.json

Created May 25, 2017 16:52
Show Gist options
  • Save maritrinez/2af35f48d13b3172967391ea8cb242e5 to your computer and use it in GitHub Desktop.
Save maritrinez/2af35f48d13b3172967391ea8cb242e5 to your computer and use it in GitHub Desktop.
Download ZIP
Hive plot
Raw
data_hive.json
[
{"name":"Arte","group":1, "y": 1},
{"name":"Música","group":1, "y": 3},
{"name":"Etnoeducación","group":1, "y": 5},
{"name":"Cine y paisaje","group":2, "y": 1, "targets": [{"node": 0, "value": 20}]},
{"name":"Inicia (Encerazados)","group":2, "y": 2, "targets": [{"node": 0, "value": 20}, {"node": 1, "value": 10}, {"node": 2, "value": 30}]},
{"name":"Teatro","group":2, "y": 3, "targets": [{"node": 1, "value": 28}]},
{"name":"Talleres de Invierno","group":2, "y": 4, "targets": [{"node": 2, "value": 28}, {"node": 0, "value": 18}]},
{"name":"Talleres de Otoño","group":2, "y": 5, "targets": [{"node": 1, "value": 14}, {"node": 1, "value": 27}]},
{"name":"Talleres de Primavera","group":2, "y": 6, "targets": [{"node": 0, "value": 18}, {"node": 2, "value": 5}]},
{"name":"Talleres de Verano","group":2, "y": 7, "targets": [{"node": 0, "value": 23}, {"node": 1, "value": 30}, {"node": 2, "value": 12}]},
{"name":"Programación didáctica en Centros Escolares","group":2, "y": 8, "targets": [{"node": 0, "value": 8}, {"node": 1, "value": 15}]},
{"name":"Programación didáctica Educación Especial","group":2, "y": 9, "targets": [{"node": 1, "value": 8}, {"node": 2, "value": 25}]},
{"name":"Orientación","group":2, "y": 10, "targets": [{"node": 2, "value": 10}]},
{"name":"Herbarium","group":2, "y": 11, "targets": [{"node": 2, "value": 5}]},
{"name":"Música en navidad","group":2, "y": 12, "targets": [{"node": 1, "value": 10}]},
{"name":"Sonidos de Primavera","group":2, "y": 13, "targets": [{"node": 1, "value": 15}]},
{"name":"Cartofonías","group":2, "y": 14, "targets": [{"node": 1, "value": 3}]},
{"name":"Música Independiente","group":2, "y": 15, "targets": [{"node": 1, "value": 3}]},
{"name":"JazzFestival","group":2, "y": 16, "targets": [{"node": 1, "value": 15}]},
{"name":"Sendas","group":2, "y": 17, "targets": [{"node": 2, "value": 5}]},
{"name":"Exposiciones","group":2, "y": 18, "targets": [{"node": 1, "value": 50}]},
{"name":"Lunes micológicos","group":2, "y": 19, "targets": [{"node": 2, "value": 30}]},
{"name":"Lunes a Pájaros","group":2, "y": 20, "targets": [{"node": 2, "value": 30}]},
{"name":"ArtTítere","group":2, "y": 21, "targets": [{"node": 1, "value": 20}]},
{"name":"En ruta","group":2, "y": 22, "targets": [{"node": 2, "value": 15}]},
{"name":"Actuaciones teatrales","group":3, "y": 1, "targets": [{"node": 23, "value": 20}]},
{"name":"Carreras de orientación","group":3, "y": 2, "targets": [{"node": 12, "value": 35}]},
{"name":"CineFórum","group":3, "y": 3, "targets": [{"node": 3, "value": 35}]},
{"name":"Conciertos","group":3, "y": 4, "targets": [{"node": 14, "value": 24}]},
{"name":"Conferencias","group":3, "y": 5, "targets": [{"node": 15, "value": 10}, {"node": 18, "value": 46}]},
{"name":"Exposiciones","group":3, "y": 6, "targets": [{"node": 19, "value": 46}, {"node": 7, "value": 34}]},
{"name":"Filandones","group":3, "y": 7, "targets": [{"node": 20, "value": 34}]},
{"name":"Publicaciones","group":3, "y": 8, "targets": [{"node": 7, "value": 16}, {"node": 6, "value": 18}]},
{"name":"Salidas","group":3, "y": 9, "targets": [{"node": 16, "value": 28}]},
{"name":"Talleres","group":3, "y": 10, "targets": [{"node": 9, "value": 23}, {"node": 19, "value": 30}, {"node": 7, "value": 12}]},
{"name":"Visitas guiadas","group":3, "y": 11, "targets": [{"node": 10, "value": 5}]}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis {
stroke: #2E2E2E;
stroke-width: 1px;
}
.link {
fill: none;
stroke: #999;
stroke-opacity: .3;
}
.link.active {
stroke: #00BFFF;
stroke-opacity: .5;
}
.node.active {
stroke: #00BFFF !important;
stroke-width: 3px;
}
.text {
font-family: sans-serif;
font-size: 10px;
fill: #999;
opacity: 1;
}
.text.active {
fill: #000;
opacity: 1;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hive.v0.min.js"></script>
<script>
var width = 960,
height = 500,
innerRadius = 40,
outerRadius = 340; // axis length
var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]),
radius = d3.scale.linear().range([innerRadius, outerRadius]);
var color = d3.scale.linear()
.range(["#8A0868", "#FA58D0"])
.domain([1,3])
var r = d3.scale.linear()
.range([5, 10])
.domain([3, 1]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.selectAll(".axis")
.data(d3.range(3))
.enter().append("line")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
.attr("x1", radius.range()[0])
.attr("x2", radius.range()[1]+20);
var nodes = [];
var links = [];
d3.json("data_hive.json", function(error, graph) {
nodes = graph;
graph.forEach(function(node) {
if (node.targets !== undefined) {
node.targets.forEach(function(target){
links.push({source: {group: node.group, y: node.y},
target: {group: graph[target.node].group, y: graph[target.node].y},
value: target.value});
});
}
});
radius.domain([0, d3.max(graph, function(d) {return d.y;})]);
svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", d3.hive.link()
.angle(function(d) { return angle(d.group); })
.radius(function(d) { return radius(d.y); }))
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
.on("mouseover", linkMouseover)
.on("mouseout", mouseout);
svg.selectAll(".node")
.data(graph)
.enter().append("circle")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + degrees(angle(d.group)) + ")"; })
.attr("cx", function(d) { return radius(d.y); })
.attr("r", function(d) {return r(d.group)})
.style("fill", function(d) { return color(d.group); })
.style("stroke", function(d) { return d3.rgb(color(d.group)).darker(1); })
.on("mouseover", nodeMouseover)
.on("mouseout", mouseout);
svg.selectAll(".text")
.data(graph)
.enter()
.append("text")
.attr("class", "text")
.text(function(d) {return d.name;})
.attr("y", function(d) {
if (d.group === 3) {
return -radius(d.y);
} else {
return radius(d.y);
}
})
.attr("transform", function(d) {
if (d.group !== 3) {
return "rotate(" + (degrees(angle(d.group)) - 90) + ")";
}
})
.attr("dx", function(d) {return r(d.group)});
// Highlight the link and connected nodes on mouseover.
function linkMouseover(d) {
svg.selectAll(".link").classed("active", function(p) { return p === d; });
svg.selectAll(".node, .text").classed("active", function(p) {
return p.group === d.source.group && p.y === d.source.y || p.group === d.target.group && p.y === d.target.y; } );
// info.text(d.source.node.name + " → " + d.target.node.name);
}
// Highlight the node and connected links on mouseover.
function nodeMouseover(d, i) {
svg.selectAll(".link").classed("active", function(p) { return p.target.group === d.group && p.target.y === d.y || p.source.group === d.group && p.source.y === d.y; });
svg.selectAll(".node, .text").classed("active", function(q,j) {
var sources = [];
if (q.targets !== undefined) {
q.targets.forEach(function(y) {
sources.push(y.node);
})
}
if (sources.indexOf(i) !== -1) {
return d;
}
var targets = [];
if (d.targets !== undefined) {
d.targets.forEach(function(x) {
targets.push(x.node);
});
}
if (targets.indexOf(j) !== -1) {
return q;
}
return d.name === q.name;
});
d3.select(this).classed("active", true);
//info.text(d.node.name);
};
// Clear any highlighted nodes or links.
function mouseout() {
svg.selectAll(".active").classed("active", false);
//info.text(defaultInfo);
}
});
function degrees(radians) {
return radians / Math.PI * 180 - 90;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment