Skip to content

Instantly share code, notes, and snippets.

@jinniluo

jinniluo/.block

Last active February 25, 2018 01:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jinniluo/86aaa16e6330172d9705a75e1b6ede38 to your computer and use it in GitHub Desktop.
Save jinniluo/86aaa16e6330172d9705a75e1b6ede38 to your computer and use it in GitHub Desktop.
Download ZIP
force layout with nodes collision
Raw
.block
license: mit
Raw
README.md

d3.simulationForce
d3.collide
circle size relative to node volumn

Raw
data.csv
website user_name user_id link_share
nytimes.com Catherine Rampell 14348157 67
cnn.com Catherine Rampell 14348157 25
nytimes.com Tim Paluch 14425050 46
nytimes.com Eli Yokley 17827531 73
facebook.com Lioness Julia 18119582 18
foxnews.com Lioness Julia 18119582 8
Fake News Dawn Wildman 19665440 45
breitbart.com Dawn Wildman 19665440 34
foxnews.com Dawn Wildman 19665440 11
facebook.com dominique Higa 20604226 18
Fake News P. Blackshear 21423086 56
breitbart.com Mz. J. 21423086 44
youtube.com Donna4Donald 21423086 38
foxnews.com Kurt Puterbaugh 21423086 15
nytimes.com Felicia Curtin 21662328 40
facebook.com Linda Sylvain 22373561 29
foxnews.com Raymond Trippy 22463719 20
Fake News Dempsey Coleman 22626807 146
youtube.com Alia Abu-Bakr 22626807 70
breitbart.com Larry Kutcher 22626807 28
cnn.com Sanel Babic 23898335 30
facebook.com Deplorable DrNeo 26637474 154
Fake News Mz. J. 26829448 50
nytimes.com Mary Zimnik 27566537 107
Fake News Merienne Lynch 27566537 102
cnn.com phyllis boling 27566537 42
Fake News Raymond Trippy 28399177 181
youtube.com Larry Kutcher 28399177 41
nytimes.com Edward Pisarski 28774145 44
cnn.com Edward Pisarski 28774145 26
cnn.com Maria Resinski 29607690 23
cnn.com Deplorable jill 32443514 32
nytimes.com Christi J. Dickel 32454083 76
nytimes.com StrongerTogether 33235204 62
cnn.com wossene bowler 33504917 21
facebook.com Linda Sylvain 36112656 153
cnn.com Menda Euly 39758722 19
youtube.com wossene bowler 40688260 66
Fake News Kurt Puterbaugh 40688260 58
breitbart.com Catherine Rampell 40688260 26
facebook.com Clifford Klousia 40688260 21
nytimes.com Penny Temeles 43736337 107
youtube.com Mary Zimnik 43736337 66
Fake News Deplorable jill 45123759 156
breitbart.com Linda Sylvain 45123759 70
youtube.com Dawn Wildman 45123759 46
facebook.com Deplorable DrNeo 45123759 27
foxnews.com Lonnie Crider 45123759 25
Fake News Felicia Curtin 56215973 146
foxnews.com Kurt Puterbaugh 112282827 432
breitbart.com Eli Yokley 112282827 74
Fake News Deplorable jill 114872258 248
youtube.com Clifford Glickman 114872258 113
breitbart.com Ralph Mattioli 114872258 106
foxnews.com P. Blackshear 114872258 78
facebook.com Kurt Puterbaugh 114872258 38
nytimes.com Jamiel Pridgen 128892990 112
Fake News Suzanne Stickelman__ 135940948 137
facebook.com Mark Schwab-Bigelow 135940948 17
facebook.com Suzanne Stickelman__ 156829325 24
foxnews.com Mitch Holliday 157900878 9
Fake News KRISTIE CHING 187257145 55
breitbart.com Ashley Boasso 187257145 31
facebook.com Deplorable DrNeo 187551357 72
nytimes.com Jerald Preston 229079486 141
facebook.com Dawn Wildman 242099698 53
cnn.com Dominique Higa 247805429 18
cnn.com Catherine Rampell 253327861 70
nytimes.com wossene bowler 253327861 59
nytimes.com Kurt Puterbaugh 254616535 45
Fake News Deplorable jill 258240944 487
breitbart.com Mz. J. 258240944 266
youtube.com phyllis boling 258240944 168
foxnews.com Geoffrey K. Olufemi 258240944 53
facebook.com Felicia Curtin 258240944 32
foxnews.com Lioness Julia 270527635 9
facebook.com Raymond Trippy 271775853 37
foxnews.com Lisa Sinkko _ 294243278 17
Fake News Raymond Trippy 296545454 130
breitbart.com Wendy Mazaros 296545454 38
foxnews.com Archith Seshadri 296545454 24
cnn.com Merienne Lynch 348554516 19
breitbart.com Susan DeMark 391774028 40
youtube.com Larry Kutcher 391774028 37
foxnews.com Gideon 391774028 28
Fake News Mz. J. 420678292 184
breitbart.com Mary 420678292 105
youtube.com Michael P. Williams 420678292 86
foxnews.com Ralph Mattioli 420678292 23
breitbart.com Darice McGuire 498959173 17
foxnews.com Merienne Lynch 533356713 16
cnn.com Daria Salusbury 544568261 17
youtube.com alex kapetanakis 606033804 61
facebook.com Michael P. Williams 606033804 48
breitbart.com Dawn Wildman 606033804 14
Fake News CAROLYN ZORN 620698212 344
breitbart.com Mz. J. 620698212 194
youtube.com CAROLYN ZORN 620698212 82
foxnews.com Donna4Donald 620698212 62
youtube.com Stacy D VanDeveer 636721122 112
youtube.com Alia Abu-Bakr 838707284 61
breitbart.com Barry Polis 861780540 20
facebook.com Mz. J. 894274440 82
nytimes.com August R. Correia 894274440 48
cnn.com Kaylee Crosley 894274440 18
Fake News Steven Leser 924224208 278
breitbart.com Penny Temeles 924224208 210
youtube.com CAROLYN ZORN 924224208 190
facebook.com Danielle Merckel 924224208 78
foxnews.com KRISTIE CHING 924224208 50
cnn.com Cloud Harrison 924224208 44
nytimes.com Mary 1095902058 111
youtube.com Raymond Trippy 1280291174 48
Fake News Merienne Lynch 1345070202 702
youtube.com Merienne Lynch 1345070202 332
breitbart.com Carolyn Abate 1345070202 100
facebook.com Marc Cirigliano 1345070202 19
foxnews.com Donna4Donald 1345070202 15
nytimes.com Penny Temeles 1347044432 115
cnn.com Humaira Ghilzai 1551225505 122
nytimes.com Teri Genova 1551225505 67
youtube.com StrongerTogether 1551225505 40
Fake News Ralph Mattioli 1607353381 183
breitbart.com StrongerTogether 1607353381 125
foxnews.com Tim Paluch 1607353381 47
youtube.com Dawn Wildman 1607353381 37
cnn.com Oumar Niane 1607353381 20
cnn.com wossene bowler 1659349220 27
nytimes.com Ralph Mattioli 2225723936 88
cnn.com Harold Lafleur 2244289393 23
facebook.com Brittney Dilts 2251995440 19
nytimes.com NJEstates3 REALTOR 2321335220 73
cnn.com Geoffrey K. Olufemi 2753095495 66
Fake News Felicia Curtin 2967626975 337
youtube.com Felicia Curtin 2967626975 327
breitbart.com Darice McGuire 2967626975 141
foxnews.com Larry Kutcher 2967626975 40
facebook.com P. Blackshear 2967626975 32
nytimes.com Mary 3127713395 43
cnn.com January Beeler 3220577634 17
Raw
index.html
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.4;
}
.nodes circle {
stroke: #fff;
stroke-width: 1px;
}
text{
font-family: sans-serif;
text-anchor:middle;
font-size:8px;
}
</style>
</head>
<body>
<script>
//get screen with and height
const w=900,
h=500;
//setup margin and plot area width
const margin={top:20,right:50,bottom:20,left:50},
width=w-margin.left-margin.right,
height=h-margin.top-margin.bottom;
//append div and svg and g - margin convention
$("body").append("<div class='plot'></div>");
const svg=d3.select(".plot").append("svg")
.attr("width",w)
.attr("height",h)
.append("g").attr("transform","translate("+margin.top+","+margin.left+")");
const simulation = d3.forceSimulation()
.velocityDecay(0.8)
.force("links",d3.forceLink().id(function(d){return d.id}))
.force("charge",d3.forceManyBody().strength(-100))
.force("collide",d3.forceCollide())
.force("center",d3.forceCenter(width/2,height/2));
var color = d3.scaleOrdinal(d3.schemeCategory20);
var size =d3.scaleLog().range([1,20])
d3.queue()
.defer(d3.csv,"data.csv",parse)
.await(ready)
function ready (error,data){
if (error) throw error;
const nestByWebsite=d3.nest().key((d)=>{return d.website})
.entries(data);
nestByWebsite.forEach((d)=>{
d.volume=d3.sum(d.values,(d)=>{return d.value});
console.log(d.key,d.volume)
})
const nestByUsername=d3.nest().key((d)=>{return d.username})
.entries(data);
nestByUsername.forEach((d)=>{
d.volume=d3.sum(d.values,(d)=>{return d.value});
})
const nodes=[],
links=[],
graph={};
//push all wesite and username to nodes=[] and remove duplicate value
nestByWebsite.forEach((d)=>{
nodes.push({"id":d.key,"type":"source","volume":d.volume})
})
nestByUsername.forEach((d)=>{
nodes.push({"id":d.key,"type":"target","volume":d.volume})
})
data.forEach((d)=>{
links.push(
{"source":d.website,"target":d.username,"value":d.value}
)
})
graph.nodes=nodes,
graph.links=links;
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", "1");
size.domain(d3.extent(nodes,(d)=>{return d.volume}))
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", (d) =>{ return size(d.volume); })
.attr("fill", (d) =>{ return color(d.type); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
//
var label = svg.append("g")
.attr("class", "label")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.text((d)=>{ if (d.type=="source"){return d.id}else{return}})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
simulation.nodes(graph.nodes).on("tick", ticked);
simulation.force("links").links(graph.links);
simulation.force("collide").radius((d)=>{return size(d.volume)})
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; });
label
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y+2; });
}
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;
}
}
function parse(d){
return {
website:d.website,
username:d.user_name,
value:+d.link_share
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment