Built with blockbuilder.org
forked from nbonneel's block: TP 6 DataViz
forked from RomyRatolojanahary's block: TP 6 DataViz
forked from RomyRatolojanahary's block: TP 6 DataViz
license: mit |
Built with blockbuilder.org
forked from nbonneel's block: TP 6 DataViz
forked from RomyRatolojanahary's block: TP 6 DataViz
forked from RomyRatolojanahary's block: TP 6 DataViz
Consequence | Antecedent | ItemSetSupport | |
---|---|---|---|
Adventure | Action | 972 | |
Crime | Action | 767 | |
Thriller | Action | 1109 | |
Comedy | Action | 719 | |
Drama | Action | 1203 | |
Romance | Comedy | 1895 | |
Drama | Comedy | 2546 | |
Action | Crime | 767 | |
Thriller | Crime | 1232 | |
Comedy | Crime | 692 | |
Drama | Crime | 1712 | |
Comedy | Romance | 1895 | |
Drama | Romance | 2573 | |
Horror | Thriller | 1073 | |
Crime | Thriller | 1232 | |
Action | Thriller | 1109 | |
Drama | Thriller | 1868 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.links line { | |
stroke: #999; | |
stroke-opacity: 0.6; | |
} | |
.nodes circle { | |
stroke: #fff; | |
stroke-width: 1.5px; | |
} | |
</style> | |
<svg width="960" height="600"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var color = d3.scaleOrdinal(d3.schemeCategory20); | |
var simulation = d3.forceSimulation() | |
.force("link", d3.forceLink().id(function(d) { return d.genre; })) | |
.force("charge", d3.forceManyBody()) | |
.force("center", d3.forceCenter(width / 2, height / 2)); | |
d3.csv("recommandations.csv", function(graph) { | |
nodes = new Set() | |
links = []; | |
for(var i=0; i<graph.length; i++){ | |
links.push({source: graph[i].Consequence, target: graph[i].Antecedent, value: graph[i].ItemSetSupport}) | |
nodes.add(graph[i].Consequence) | |
nodes.add(graph[i].Antecedent) | |
} | |
nodesArray = Array.from(nodes).map(function(e){return {genre: e}}); | |
var link = svg.append("g") | |
.attr("class", "links") | |
.selectAll("line") | |
.data(links) | |
.enter().append("line") | |
.attr("stroke-width", 1); | |
var node = svg.append("g") | |
.attr("class", "nodes") | |
.selectAll("circle") | |
.data(nodesArray) | |
.enter().append("circle") | |
.attr("r", 5) | |
.attr("fill", function(d) { return color(d.genre); }) | |
.call(d3.drag() | |
.on("start", dragstarted) | |
.on("drag", dragged) | |
.on("end", dragended)); | |
node.append("title") | |
.text(function(d) { return d.genre; }); | |
simulation | |
.nodes(nodesArray) | |
.on("tick", ticked); | |
simulation.force("link") | |
.links(links); | |
function ticked() { | |
link | |
.attr("x1", function(d) { return d.source.x; }) | |
.attr("y1", function(d) { return d.source.y; }) | |
.attr("x2", function(d) { return d.target.x; }) | |
.attr("y2", function(d) { return d.target.y; }); | |
node | |
.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }); | |
} | |
}); | |
function dragstarted(d) { | |
if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
d.fx = d.x; | |
d.fy = d.y; | |
} | |
function dragged(d) { | |
d.fx = d3.event.x; | |
d.fy = d3.event.y; | |
} | |
function dragended(d) { | |
if (!d3.event.active) simulation.alphaTarget(0); | |
d.fx = null; | |
d.fy = null; | |
} | |
</script> |