Skip to content

Instantly share code, notes, and snippets.

/force.css Secret

Created November 30, 2014 08:55
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 anonymous/4edbc373e2fc5b63ad0d to your computer and use it in GitHub Desktop.
Save anonymous/4edbc373e2fc5b63ad0d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
force.css
circle.node {
stroke: #fff;
stroke-width: 1.5px;
}
line.link {
stroke: #999;
stroke-opacity: .6;
}
Raw
force.js
//references:
//http://bl.ocks.org/mbostock/950642
//http://bl.ocks.org/mbostock/4062045
//http://bost.ocks.org/mike/miserables/
var w = 1200,
h = 600,
fill = d3.scale.category20();
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.json("graph_sicp.json", function(json) {
var force = d3.layout.force()
.charge(-120)
.linkDistance(40)
//.linkDistance(function(d) { return 10/d.weight; })
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.start();
var link = vis.selectAll("line.link")
.data(json.links)
.enter().append("svg:line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
.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; });
// based on http://bl.ocks.org/mbostock/2706022
var node = vis.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.call(force.drag);
// source or target properties match the hovered node.
node.on('mouseover', function(d) {
link.style('stroke-width', function(l) {
if (d === l.source || d === l.target)
return 3;
else
return 1;
});
});
// Set the stroke width back to normal when mouse leaves the node.
node.on('mouseout', function() {
link.style('stroke-width', 1);
});
node.append("circle")
.attr("r", 5)
.style("fill", function(d) { return fill(d.group); })
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
force.on("tick", function() {
// Update the links
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; });
//gnodes.attr("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; });
node.attr("transform", function(d) { return 'translate(' + [d.x, d.y] + ')'; });
});
});
Raw
force_repelling_label.js
var w = 1000,
h = 1000,
fill = d3.scale.category20();
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
//d3.json("force.json", function(json) {
d3.json("hackathonideas.json", function(json) {
var force = d3.layout.force()
.charge(-120)
//.linkDistance(function(d) { return 10/d.weight; })
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.start();
var link = vis.selectAll("line.link")
.data(json.links)
.enter().append("svg:line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
.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; });
// based on http://bl.ocks.org/mbostock/2706022
var node = vis.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.call(force.drag);
// source or target properties match the hovered node.
node.on('mouseover', function(d) {
link.style('stroke-width', function(l) {
if (d === l.source || d === l.target)
return 3;
else
return 1;
});
});
// Set the stroke width back to normal when mouse leaves the node.
node.on('mouseout', function() {
link.style('stroke-width', 1);
});
node.append("circle")
.attr("r", 5)
.style("fill", function(d) { return fill(d.group); })
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
force.on("tick", function() {
// Update the links
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; });
//gnodes.attr("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; });
node.attr("transform", function(d) { return 'translate(' + [d.x, d.y] + ')'; });
});
});
Raw
graph_sicp.json
{
"directed": false,
"graph": [
[
"node_list",
[
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35,
36,
37
]
]
],
"nodes": [
{
"group": "1",
"name": "1.1",
"id": 0
},
{
"group": "1",
"name": "1.2",
"id": 1
},
{
"group": "1",
"name": "1.3",
"id": 2
},
{
"group": "2",
"name": "2. Building Abstractions with Data",
"id": 3
},
{
"group": "2",
"name": "2.1",
"id": 4
},
{
"group": "2",
"name": "2.2",
"id": 5
},
{
"group": "2",
"name": "2.3",
"id": 6
},
{
"group": "2",
"name": "2.4",
"id": 7
},
{
"group": "2",
"name": "2.5",
"id": 8
},
{
"group": "3",
"name": "3. Modularity",
"id": 9
},
{
"group": 0,
"name": "titlepage",
"id": 10
},
{
"group": "3",
"name": "3.1",
"id": 11
},
{
"group": "3",
"name": "3.2",
"id": 12
},
{
"group": "3",
"name": "3.3",
"id": 13
},
{
"group": "3",
"name": "3.4",
"id": 14
},
{
"group": "3",
"name": "3.5",
"id": 15
},
{
"group": "4",
"name": "4. Metalinguistic Abstraction",
"id": 16
},
{
"group": "4",
"name": "4.1",
"id": 17
},
{
"group": "4",
"name": "4.2",
"id": 18
},
{
"group": "4",
"name": "4.3",
"id": 19
},
{
"group": "4",
"name": "4.4",
"id": 20
},
{
"group": 0,
"name": "license",
"id": 21
},
{
"group": "5",
"name": "5. Computing with Register Machines",
"id": 22
},
{
"group": "5",
"name": "5.1",
"id": 23
},
{
"group": "5",
"name": "5.2",
"id": 24
},
{
"group": "5",
"name": "5.3",
"id": 25
},
{
"group": "5",
"name": "5.4",
"id": 26
},
{
"group": "5",
"name": "5.5",
"id": 27
},
{
"group": 0,
"name": "References",
"id": 28
},
{
"group": 0,
"name": "List of Exercises",
"id": 29
},
{
"group": 0,
"name": "Index",
"id": 30
},
{
"group": 0,
"name": "This book is dedicated, in respect and admiration, to the spirit that lives in the computer",
"id": 31
},
{
"group": 0,
"name": "Table of contents",
"id": 32
},
{
"group": 0,
"name": "Foreword",
"id": 33
},
{
"group": 0,
"name": "Preface to the Second Edition",
"id": 34
},
{
"group": 0,
"name": "Preface to the First Edition",
"id": 35
},
{
"group": 0,
"name": "Acknowledgements",
"id": 36
},
{
"group": "1",
"name": "1. Building Abstractions with Procedures",
"id": 37
}
],
"links": [
{
"source": 0,
"target": 0,
"weight": 0.7545952796936035
},
{
"source": 0,
"target": 1,
"weight": 0.23227068781852722
},
{
"source": 0,
"target": 2,
"weight": 0.37588760256767273
},
{
"source": 0,
"target": 3,
"weight": 0.2821003198623657
},
{
"source": 0,
"target": 4,
"weight": 0.27798333764076233
},
{
"source": 0,
"target": 5,
"weight": 0.3231448531150818
},
{
"source": 0,
"target": 6,
"weight": 0.2307361662387848
},
{
"source": 0,
"target": 7,
"weight": 0.2661520540714264
},
{
"source": 0,
"target": 8,
"weight": 0.24510957300662994
},
{
"source": 0,
"target": 11,
"weight": 0.2997085750102997
},
{
"source": 0,
"target": 12,
"weight": 0.2948687970638275
},
{
"source": 0,
"target": 13,
"weight": 0.27220815420150757
},
{
"source": 0,
"target": 17,
"weight": 0.35025280714035034
},
{
"source": 0,
"target": 18,
"weight": 0.3479713499546051
},
{
"source": 0,
"target": 19,
"weight": 0.30114156007766724
},
{
"source": 0,
"target": 20,
"weight": 0.242641419172287
},
{
"source": 0,
"target": 26,
"weight": 0.3187388479709625
},
{
"source": 0,
"target": 27,
"weight": 0.23961056768894196
},
{
"source": 1,
"target": 1,
"weight": 0.7064133286476135
},
{
"source": 1,
"target": 2,
"weight": 0.28128814697265625
},
{
"source": 2,
"target": 2,
"weight": 0.6953052878379822
},
{
"source": 2,
"target": 3,
"weight": 0.2511286437511444
},
{
"source": 2,
"target": 4,
"weight": 0.24366989731788635
},
{
"source": 2,
"target": 5,
"weight": 0.24175557494163513
},
{
"source": 2,
"target": 17,
"weight": 0.2583421766757965
},
{
"source": 3,
"target": 3,
"weight": 0.7073459029197693
},
{
"source": 3,
"target": 4,
"weight": 0.4550090432167053
},
{
"source": 3,
"target": 7,
"weight": 0.31679773330688477
},
{
"source": 3,
"target": 8,
"weight": 0.4152126908302307
},
{
"source": 4,
"target": 8,
"weight": 0.2889311909675598
},
{
"source": 4,
"target": 4,
"weight": 0.750910222530365
},
{
"source": 5,
"target": 5,
"weight": 0.6901394128799438
},
{
"source": 5,
"target": 6,
"weight": 0.32630303502082825
},
{
"source": 5,
"target": 12,
"weight": 0.252251535654068
},
{
"source": 5,
"target": 17,
"weight": 0.28743812441825867
},
{
"source": 6,
"target": 6,
"weight": 0.753241777420044
},
{
"source": 7,
"target": 8,
"weight": 0.3478218615055084
},
{
"source": 7,
"target": 17,
"weight": 0.24412544071674347
},
{
"source": 7,
"target": 7,
"weight": 0.709087610244751
},
{
"source": 8,
"target": 8,
"weight": 0.7334079742431641
},
{
"source": 9,
"target": 9,
"weight": 0.6595379114151001
},
{
"source": 10,
"target": 10,
"weight": 0.8747879862785339
},
{
"source": 10,
"target": 28,
"weight": 0.23541539907455444
},
{
"source": 10,
"target": 21,
"weight": 0.3451404571533203
},
{
"source": 11,
"target": 17,
"weight": 0.24842989444732666
},
{
"source": 11,
"target": 11,
"weight": 0.7237766981124878
},
{
"source": 11,
"target": 12,
"weight": 0.40586042404174805
},
{
"source": 11,
"target": 14,
"weight": 0.36418086290359497
},
{
"source": 12,
"target": 12,
"weight": 0.8184931874275208
},
{
"source": 12,
"target": 14,
"weight": 0.2977455258369446
},
{
"source": 12,
"target": 17,
"weight": 0.40237945318222046
},
{
"source": 12,
"target": 20,
"weight": 0.297526478767395
},
{
"source": 13,
"target": 17,
"weight": 0.26006630063056946
},
{
"source": 13,
"target": 13,
"weight": 0.6725225448608398
},
{
"source": 14,
"target": 14,
"weight": 0.8139103055000305
},
{
"source": 15,
"target": 32,
"weight": 0.2685088515281677
},
{
"source": 15,
"target": 18,
"weight": 0.22978080809116364
},
{
"source": 15,
"target": 20,
"weight": 0.30706942081451416
},
{
"source": 15,
"target": 15,
"weight": 0.9253212213516235
},
{
"source": 16,
"target": 16,
"weight": 0.5713714957237244
},
{
"source": 16,
"target": 35,
"weight": 0.2512120008468628
},
{
"source": 16,
"target": 37,
"weight": 0.2429623305797577
},
{
"source": 16,
"target": 22,
"weight": 0.23966339230537415
},
{
"source": 17,
"target": 17,
"weight": 0.7721535563468933
},
{
"source": 17,
"target": 18,
"weight": 0.3576684892177582
},
{
"source": 17,
"target": 19,
"weight": 0.4441591203212738
},
{
"source": 17,
"target": 20,
"weight": 0.3162275552749634
},
{
"source": 17,
"target": 24,
"weight": 0.30284231901168823
},
{
"source": 17,
"target": 26,
"weight": 0.3415100574493408
},
{
"source": 17,
"target": 27,
"weight": 0.36687082052230835
},
{
"source": 18,
"target": 32,
"weight": 0.2386603057384491
},
{
"source": 18,
"target": 18,
"weight": 0.6905252933502197
},
{
"source": 18,
"target": 19,
"weight": 0.265337198972702
},
{
"source": 18,
"target": 26,
"weight": 0.30141890048980713
},
{
"source": 19,
"target": 19,
"weight": 0.7402474284172058
},
{
"source": 19,
"target": 26,
"weight": 0.2495301216840744
},
{
"source": 20,
"target": 32,
"weight": 0.278952956199646
},
{
"source": 20,
"target": 20,
"weight": 0.8491973280906677
},
{
"source": 21,
"target": 21,
"weight": 0.8105130791664124
},
{
"source": 22,
"target": 32,
"weight": 0.31670883297920227
},
{
"source": 22,
"target": 22,
"weight": 0.761127233505249
},
{
"source": 22,
"target": 23,
"weight": 0.27879464626312256
},
{
"source": 22,
"target": 24,
"weight": 0.2971285581588745
},
{
"source": 22,
"target": 26,
"weight": 0.270518958568573
},
{
"source": 22,
"target": 27,
"weight": 0.2389327883720398
},
{
"source": 23,
"target": 23,
"weight": 0.8440583944320679
},
{
"source": 23,
"target": 24,
"weight": 0.4362276494503021
},
{
"source": 23,
"target": 25,
"weight": 0.23771442472934723
},
{
"source": 23,
"target": 26,
"weight": 0.4031278192996979
},
{
"source": 23,
"target": 27,
"weight": 0.32575714588165283
},
{
"source": 24,
"target": 32,
"weight": 0.23004305362701416
},
{
"source": 24,
"target": 24,
"weight": 0.7959667444229126
},
{
"source": 24,
"target": 26,
"weight": 0.3717339336872101
},
{
"source": 24,
"target": 27,
"weight": 0.3089526295661926
},
{
"source": 25,
"target": 25,
"weight": 0.8117653727531433
},
{
"source": 25,
"target": 26,
"weight": 0.2641858458518982
},
{
"source": 26,
"target": 32,
"weight": 0.27837324142456055
},
{
"source": 26,
"target": 26,
"weight": 0.7419930696487427
},
{
"source": 26,
"target": 27,
"weight": 0.38838785886764526
},
{
"source": 27,
"target": 32,
"weight": 0.2567191421985626
},
{
"source": 27,
"target": 27,
"weight": 0.8157636523246765
},
{
"source": 28,
"target": 28,
"weight": 0.8010729551315308
},
{
"source": 28,
"target": 37,
"weight": 0.3132588565349579
},
{
"source": 29,
"target": 29,
"weight": 0.6623141765594482
},
{
"source": 30,
"target": 30,
"weight": 0.5893699526786804
},
{
"source": 31,
"target": 31,
"weight": 0.8464202880859375
},
{
"source": 32,
"target": 32,
"weight": 0.6130212545394897
},
{
"source": 32,
"target": 34,
"weight": 0.2487069070339203
},
{
"source": 33,
"target": 33,
"weight": 0.5323978662490845
},
{
"source": 33,
"target": 37,
"weight": 0.23940366506576538
},
{
"source": 34,
"target": 34,
"weight": 0.65328049659729
},
{
"source": 34,
"target": 35,
"weight": 0.22926142811775208
},
{
"source": 34,
"target": 36,
"weight": 0.23751941323280334
},
{
"source": 35,
"target": 35,
"weight": 0.6518938541412354
},
{
"source": 35,
"target": 36,
"weight": 0.25857582688331604
},
{
"source": 36,
"target": 36,
"weight": 0.7720434665679932
},
{
"source": 37,
"target": 37,
"weight": 0.6422379016876221
}
],
"multigraph": false
}
Raw
index.html
<!DOCTYPE html>
<style>
.node text {
font: 10px sans-serif;
}
</style>
<html>
<head>
<title>SICP graph</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link type="text/css" rel="stylesheet" href="force.css"/>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="force.js"></script>
<div id="rank">
<ol>
</ol>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment