Skip to content

Instantly share code, notes, and snippets.

@mayblue9

mayblue9/edgelist2.csv

Created August 8, 2016 04:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mayblue9/aed5864c319018541bb5a38c453902be to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mayblue9/aed5864c319018541bb5a38c453902be to your computer and use it in GitHub Desktop.
Download ZIP
arc_test
Raw
edgelist2.csv
source,target,weight
sam,tully,3
sam,pat,8
sam,kim,2
sam,pris,1
roy,pris,5
roy,sam,1
tully,sam,1
tully,pris,5
tully,kim,3
tully,pat,1
tully,mo,3
kim,pat,2
kim,mo,1
mo,tully,7
mo,pat,1
mo,sam,4
mo,pris,1
pat,sam,3
pat,tully,1
pat,kim,2
pat,mo,5
white,sam,10
white,kim,15
sam,white,20
kim,white,20
white,jerry,14
Raw
index.html
<html>
<head>
<title>D3 in Action Chapter 6 - Example 2</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
</head>
<style>
svg {
height: 700px;
width: 700px;
fill: #ff5232;
fill: #334fcc;
/* border: 1px solid gray;*/
}
</style>
<body>
<div id="viz">
<svg>
</svg>
</div>
</body>
<footer>
<script>
var dataset= {
"nodes": [{
"token": "Alice",
"count": "15",
"node":0
}, {
"token": "Rabbit",
"count": "2",
"node":1
}, {
"token": "Blue",
"count": "5",
"node":2
}, {
"token": "Book",
"count": "1",
"node":3
}, {
"token": "Queen",
"count": "5",
"node":4
}, {
"token": "Cards",
"count": "9",
"node":5
}, {
"token": "is",
"count": "2",
"node":6
}, {
"token": "in",
"count": "19",
"node":7
}, {
"token": "the",
"count": "20",
"node":8
}, {
"token": "of",
"count": "16",
"node":9
}, {
"token": "very",
"count": "6",
"node":10
}, {
"token": "had",
"count": "4",
"node":11
}, {
"token": "?",
"count": "2",
"node":12
}],
"links": [
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 1
}, {
"source": 0,
"target": 1
}, {
"source": 0,
"target": 1
}, {
"source": 0,
"target": 1
}, {
"source": 0,
"target": 1
}, {
"source": 0,
"target": 1
}, {
"source": 1,
"target": 3
}, {
"source": 1,
"target": 3
}, {
"source": 1,
"target": 3
}, {
"source": 1,
"target": 3
}, {
"source": 1,
"target": 3
}, {
"source": 1,
"target": 2
}, {
"source": 2,
"target": 3
}, {
"source": 3,
"target": 4
}, {
"source": 3,
"target": 4
}, {
"source": 3,
"target": 4
}, {
"source": 3,
"target": 4
}, {
"source": 3,
"target": 4
}, {
"source": 3,
"target": 4
}, {
"source": 4,
"target": 5
}, {
"source": 4,
"target": 6
}, {
"source": 4,
"target": 6
}, {
"source": 4,
"target": 5
}, {
"source": 4,
"target": 5
}, {
"source": 4,
"target": 5
}, {
"source": 5,
"target": 6
}, {
"source": 5,
"target": 6
}, {
"source": 5,
"target": 6
}, {
"source": 6,
"target": 7
}, {
"source": 6,
"target": 7
}, {
"source": 6,
"target": 7
}, {
"source": 6,
"target": 7
}, {
"source": 6,
"target": 7
}, {
"source": 6,
"target": 7
}, {
"source": 7,
"target": 12
}, {
"source": 7,
"target": 12
}, {
"source": 7,
"target": 12
}, {
"source": 7,
"target": 12
}, {
"source": 7,
"target": 12
}, {
"source": 7,
"target": 8
}, {
"source": 8,
"target": 9
}, {
"source": 9,
"target": 10
}, {
"source": 10,
"target": 11
}, {
"source": 9,
"target": 11
}, {
"source": 8,
"target": 11
}, {
"source": 12,
"target": 11
}]
};
var graph2 = { "nodes":[
{
"betweenness": 0.0006251963636068658,
"degree": 156,
"degree_cent": 0.09494826536822885,
"eigen_cent": 0.05654309030111921,
"count": 2,
"epika": 1187,
"name": "no0",
"liryka": 307,
"display": "Kobieta",
"display_en": "Woman",
"dramat": 201,
"cent": 0.1
},
{ "betweenness": 0.0015825813707540817, "degree": 147, "degree_cent": 0.0894704808277541, "eigen_cent": 0.05790529206786597,
"count": 1,
"epika": 1187,
"name": "no1",
"liryka": 307,
"display": "sky",
"display_en": "Woman",
"dramat": 201,
"cent": 0.2
},
{ "betweenness": 0.0015351676734118565, "degree": 229, "degree_cent": 0.1393791844187462, "eigen_cent": 0.09266284757904542,
"count": 7,
"epika": 1187,
"name": "no2",
"liryka": 307,
"display": "sky",
"display_en": "Woman",
"dramat": 201,
"cent": 0.3
},
{ "betweenness": 0.022175849027791853, "degree": 529, "degree_cent": 0.3219720024345709, "eigen_cent": 0.07427387664575323,
"count": 9,
"epika": 1187,
"name": "no3",
"liryka": 307,
"display": "Number 4",
"display_en": "Woman",
"dramat": 201,
"cent": 0.4
},
{ "betweenness": 0.00010120729619158677, "degree": 112, "degree_cent": 0.06816798539257456, "eigen_cent": 0.056069017285033176,
"count": 7,
"epika": 1121,
"name": "no4",
"liryka": 307,
"display": "5",
"display_en": "Woman",
"dramat": 201,
"cent": 0.5
},
{
"count": 9,
"epika": 1187,
"name": "no5",
"liryka": 307,
"display": "Number 4",
"display_en": "Woman",
"dramat": 201,
"cent": 0.6
},
{ "betweenness": 0.0025662163080805906, "degree": 172, "degree_cent": 0.10468654899573951, "eigen_cent": 0.06011316480890498,
"count": 7,
"epika": 1187,
"name": "no6",
"liryka": 307,
"display": "7",
"display_en": "Woman",
"dramat": 201,
"cent": 0.7
},
{ "betweenness": 0.02819485703154098, "degree": 611, "degree_cent": 0.371880706025563, "eigen_cent": 0.10243802449713031,
"count": 9,
"epika": 1187,
"name": "no7",
"liryka": 307,
"display": "Number 4",
"display_en": "Woman",
"dramat": 201,
"cent": 0.8
},
{ "betweenness": 0.035122146966715104, "degree": 597, "degree_cent": 0.3633597078514912, "eigen_cent": 0.14024392050249096,
"count": 9,
"epika": 1187,
"name": "no8",
"liryka": 307,
"display": "Number 4",
"display_en": "Woman",
"dramat": 201,
"cent": 0.9
}
],
"links":[
{"source":0,"target":1,"value":"friend", "weight":7}, {"source":0,"target":2,"value":"friend", "weight":2},
{"source":1,"target":0,"value":"family", "weight":3}, {"source":1,"target":2,"value":"company", "weight":1},
{"source":2,"target":0,"value":"family", "weight":3}, {"source":2,"target":1,"value":"company", "weight":1},
{"source":6,"target":7,"value":"company", "weight":10}, {"source":7,"target":6,"value":"company", "weight":2}
]
};
queue()
.defer(d3.csv, "nodelist2.csv")
.defer(d3.csv, "edgelist2.csv")
.await(function(error, file1, file2) { createArcDiagram(file1, file2); });
function createArcDiagram(nodes,edges) {
var nodeHash = {};
for (x in nodes) {
nodeHash[nodes[x].id] = nodes[x];
nodes[x].x = parseInt(x) * 60;
}
for (x in edges) {
edges[x].weight = parseInt(edges[x].weight);
edges[x].source = nodeHash[edges[x].source];
edges[x].target = nodeHash[edges[x].target];
}
linkScale = d3.scale.linear().domain(d3.extent(edges, function (d) {return d.weight})).range([5,10])
var arcG = d3.select("svg").append("g").attr("id", "arcG").attr("transform", "translate(50,250)");
arcG.selectAll("path")
.data(edges)
.enter()
.append("path")
.style("stroke", "#575757")
.style("stroke-width", function(d) {return d.weight * 0.9})
.style("opacity", .25)
.style("fill", "none")
.attr("d", arc)
.on("mouseover", edgeOver)
arcG.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r", 5)
.style("fill", "lightgray")
.style("stroke", "#575757") //black
.style("stroke-width", "1px")
.attr("cx", function (d) {return d.x})
.on("mouseover", nodeOver)
.append("text")
.attr("font-weight","bold")
.attr("x", 13)
.attr("dy", ".35em")
.attr("color","#ff5232") //#ff423c
.text(function(d) { return d.x; })
.attr ("fill","#ff5232");
console.log(nodes)
function arc(d,i) {
var draw = d3.svg.line().interpolate("basis");
var midX = (d.source.x + d.target.x) / 2;
var midY = (d.source.x - d.target.x) * 0.7;
return draw([[d.source.x,0],[midX,midY],[d.target.x,0]])
}
function shapedEdge(d,i) {
var draw = d3.svg.line().interpolate("basis");
var sw = linkScale(d.weight)
var midX = (d.source.x + d.target.x) / 2;
var midY = d.source.x - d.target.x - sw;
var midY2 = d.source.x - d.target.x + sw;
return draw([[d.source.x,0],[midX,midY],[d.target.x + (sw*1.5),0],[d.target.x - (sw*1.5),0],[midX,midY2],[d.source.x,0]])
}
function nodeOver(d,i) {
d3.selectAll("circle").style("fill", function (p) {return p == d ? " #ff5232" : "lightgray"})
d3.selectAll("path").style("stroke", function (p) {return p.source == d || p.target == d ? " #ff5232" : "#575757"})
}
function edgeOver(d) {
d3.selectAll("path").style("stroke", function(p) {return p == d ? "red" : "black"})
d3.selectAll("circle").style("fill", function(p) {return p == d.source ? "#334fcc" : p == d.target ? "#345720" : "lightgray"})}
}
</script>
</footer>
</html>
Raw
nodelist2.csv
id,followers,following
sam,17,500
roy,83,80
pris,904,15
tully,7,5
kim,11,50
mo,80,85
pat,150,300
white,20,30
jerry,20,30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment