Published
Edited
Oct 15, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function data_gen(csv, list)
{
var node = {};
var links = [];
var link = {};
var nodes = [];
var csv2 = csv.slice();
for (var j = 0; j < list.length; j++) {
for (var i = 0; i < csv2.length; i++) {
var row = csv2[i];
if (row[list[j]] == "0") {
csv2.splice(i,1);
i--;
}
}
}
for(var i = 0; i < csv2.length; i++) {
var row = csv2[i];
for (var key in row) {
if (row[key] == "1") {
node[key] = 1;
for (var k = 0; k < Math.max(nodes.length, 1); k++) {
if (nodes.length > 0 && nodes[k].id == key) {
break;
}
else if (k == Math.max(nodes.length, 1) - 1) {
nodes.push({id:key, group:1});
}
}
}
}
var j1 = 0;
for (var key1 in node) {
var j2 = 0;
for (var key2 in node) {
link = {};
if (j1 < j2) {
for (var k = 0; k < Math.max(links.length, 1); k++) {
if (links.length > 0 && links[k].source == key1 && links[k].target == key2) {
links[k].value += .1;
break;
}
else if (k == Math.max(links.length, 1) - 1) {
link.source = key1;
link.target = key2;
link.value = .1;
links.push(link);
}
}
}
j2++;
}
j1++;
}
node = {};
}
var data = {nodes: nodes, links: links};
return data;
}

Insert cell
height = 600
Insert cell
color = {
const scale = d3.scaleOrdinal()
.domain(["1", "2", "3", "4", "5", "6"])
.range(["#8A420B", "#E23E95" , "#E22929", "#1C8D0B", "#169EC7", "#9216C7"]);
return d => scale(d.__proto__.group);
}
Insert cell
drag = simulation => {
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;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
Insert cell
d3 = require("d3@5")
Insert cell
/*
TODO - investigate ways of making the variable relationships clearer: could we do the 3D version of this anne laure found? Should we implement the feature that when you hover over a node it darkens all of that node's connections? Should we implement labels of the nodes? Color coding nodes?

Thoughts - I think it might be a good idea to add in the extraneous columns we deleted (palm trees for example), because I don't think adding more nodes will hurt the visualization. Also, I think the portrait column should be deleted because it has no connections to any other nodes.


link highlight:
https://stackoverflow.com/questions/41244508/js-d3-js-steps-to-highlighting-of-adjacent-links



*/
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more