Skip to content

Commit

Permalink
flip scopeMain logic, refactor force-directed
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffreylancaster
jeffreylancaster committed Dec 28, 2018
1 parent 3be7a47 commit 77d9d0a
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 82 deletions.
238 changes: 159 additions & 79 deletions force-directed/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,42 +40,127 @@

var config = {
"scopeMain": false,
"all": {
"size": 1200,
"file": "matrixObject-all.json"
},
"main": {
"size": 800,
"file": "matrixObject-main.json"
}
"all": 1200,
"main": 800,
"margin": 30
}

var matrix = {"nodes":[], "links":[]}

/* IMPORT DATA */
d3.queue()
.defer(d3.json, '../data/episodes.json')
.defer(d3.json, '../data/characters-groups.json')
.await(ready);

function ready(error, e) {
function ready(error, e, g) {
if (error) throw error;
console.log("now that the files are loaded... do magic.");

episodesData = e.episodes;

var file, width, height;

if(config.scopeMain){
width = config.main.size;
height = config.main.size;
file = config.main.file;
var groups = {};
g.groups.forEach(function(val, ind){
val.characters.forEach(function(v, i){
groups[v] = ind + 1;
})
})

// put all scenes in one array
var scenes = e.episodes.reduce(function(acc, val, ind){
var scene = val.scenes.reduce(function(a, v, i){
var sceneLength = Math.abs(sec(v.sceneEnd) - sec(v.sceneStart));
var s = Object.assign({}, v, {
"seasonNum":val.seasonNum,
"episodeNum":val.episodeNum,
"sceneLength": sceneLength});
return a.concat(s);
}, []);
return [...acc, ...scene];
}, []);

// put all characters in one array, make object to count character time
var characters = [];
if(!config.scopeMain){
characters = scenes.reduce(function(acc, val, ind){
var c = val.characters.reduce(function(a, v, i){
// return (val.characters.length > 1) ? a.concat(v.name) : '';
return a.concat(v.name);
}, []);
return [...acc, ...c];
}, [])
.filter(onlyUnique)
.map(function(cur, ind){
return Object.assign({}, {"name": cur});
});
} else {
width = config.all.size;
height = config.all.size;
file = config.all.file;
g.groups.forEach(function(val, ind){
val.characters.forEach(function(v, i){
characters.push({"name": v});
})
})
}

// Compute index per node.
var matrixArr = [];
characters.forEach(function(val, ind) {
group = (groups[val.name]) ? groups[val.name] : g.groups.length + 1;
matrix.nodes.push({
"name": val.name,
"group": group,
"id": ind,
"index": ind,
"count": 0
});
matrixArr[ind] = d3.range(characters.length).map(function(j) { return {x: j, y: ind, z: 0}; });
});

// go through scenes and add sceneLength values to characters' counts
scenes.forEach(function(val, ind){
val.characters.forEach(function(v, i){
var a = characters.findIndex(function(value){
return value.name == v.name;
});
if(a > -1){
matrix.nodes[a].count += val.sceneLength;
}
val.characters.forEach(function(w, j){
var b = characters.findIndex(function(value){
return value.name == w.name;
});
if(a > -1 && b > -1 && a !== b){
matrixArr[a][b].z += val.sceneLength;
}
})
})
})

matrixArr.forEach(function(val, ind){
val.forEach(function(v, i){
if(v.z > 0){
matrix.links.push({
"source": v.x,
"target": v.y,
"value": v.z
})
}
})
})

console.log(matrixArr);

// build the visualization

var width = (!config.scopeMain) ? config.all - 2*config.margin : config.main - 2*config.margin;
var height = width;

// build the visualization
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
.attr("height", height)
.attr("transform", function(d){
return `translate(${config.margin},${config.margin})`
})
.style("margin-bottom", config.margin)
.style("margin-right", config.margin);

var radius = 5;

Expand All @@ -86,64 +171,59 @@
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));

d3.json("../data/"+file, function(error, graph) {
console.log(graph);
if (error) throw error;

var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
// .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
.attr("stroke-width", "1px");

var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")

var circles = node.append("circle")
.attr("r", radius)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));

var lables = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 6)
.attr('y', 3);

node.append("title")
.text(function(d) { return d.name; });

simulation
.nodes(graph.nodes)
.on("tick", ticked);

simulation.force("link")
.links(graph.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 = Math.max(radius, Math.min(width - radius, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
});
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(matrix.links)
.enter().append("line")
// .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
.attr("stroke-width", "1px");

var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(matrix.nodes)
.enter().append("g")

var circles = node.append("circle")
.attr("r", radius)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));

var lables = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 6)
.attr('y', 3);

node.append("title")
.text(function(d) { return d.name; });

simulation
.nodes(matrix.nodes)
.on("tick", ticked);

simulation.force("link")
.links(matrix.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 = Math.max(radius, Math.min(width - radius, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}

function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
Expand Down
6 changes: 3 additions & 3 deletions matrix/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

var config = {
"title":"Co-Occurrence",
"scopeMain": false,
"scopeMain": true,
"all": 5000,
"main": 1600,
"margin": {
Expand Down Expand Up @@ -91,7 +91,7 @@

// put all characters in one array, make object to count character time
var characters = [];
if(config.scopeMain){
if(!config.scopeMain){
characters = scenes.reduce(function(acc, val, ind){
var c = val.characters.reduce(function(a, v, i){
return a.concat(v.name);
Expand Down Expand Up @@ -146,7 +146,7 @@

// build the visualization

var width = height = (config.scopeMain) ? config.all : config.main;
var width = height = (!config.scopeMain) ? config.all : config.main;

var x = d3.scaleBand().range([0, width]),
z = d3.scaleLinear().domain([0, 100]).clamp(true),
Expand Down

0 comments on commit 77d9d0a

Please sign in to comment.