Skip to content

Instantly share code, notes, and snippets.

View hlucasfranca's full-sized avatar

Henrique Lucas França hlucasfranca

51 followers · 56 following
View GitHub Profile
@hlucasfranca
hlucasfranca / index.html
Last active August 29, 2015 14:27 — forked from mbostock/.block
Force Layout from Adjacency List
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
<style type="text/css">
line {
stroke: #ccc;
@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:27 — forked from syntagmatic/README.md
Force-Directed SVG Icons

Replaces the circles in the force-directed graph with some SVG icons.

@hlucasfranca
hlucasfranca / README.md
Last active July 19, 2016 04:56 — forked from samuelleach/README.md
Force layout graph with colour-coded node neighbours.

First attempt at making a colour-coded graph, with code snippets inspired from the D3 community.

Green => Friend and follower.

Red => Follower

Blue => Friend.

Improvements needed:

@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:27 — forked from mbostock/.block
Resizable Force Layout

Try opening this example in a new window and resizing it.

@hlucasfranca
hlucasfranca / edgelist.csv
Last active August 29, 2015 14:27 — forked from emeeks/edgelist.csv
Adjacency Matrix from Node/Edge List
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
@hlucasfranca
hlucasfranca / index.html
Last active August 29, 2015 14:27 — forked from WilliamQLiu/index.html
D3 Mouse Events
<!DOCTYPE html>
<!-- How to create Mouse Events for D3 -->
<html>
<head>
<!-- Load D3 from site -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- CSS (Styling) -->
<style type="text/css">
@hlucasfranca
hlucasfranca / graph.json
Last active August 29, 2015 14:27 — forked from norrs/graph.json
D3.js with force direct graph with support for drag and drop to make node fixed ( http://stackoverflow.com/questions/10899725/d3-js-force-directed-graph-with-support-for-drag-and-drop-to-make-selected-node )
{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite","group":3},{"name":"Mme.deR","group":2},{"name":"Isabeau","group":2},{"name":"Gervais","group":2},{"name":"Tholomyes","group":3},{"name":"Listolier","group":3},{"name":"Fameuil","group":3},{"name":"Blacheville","group":3},{"name":"Favourite","group":3},{"name":"Dahlia","group":3},{"name":"Zephine","group":3},{"name":"Fantine","group":3},{"name":"Mme.Thenardier","group":4},{"name":"Thenardier","group":4},{"name":"Cosette","group":5},{"name":"Javert","group":4},{"name":"Fauchelevent","group":0},{"name":"Bamatabois","group":2},{"name":"Perpetue","group":3},{"name":"Simplice","group":2},{"name":"Scaufflaire","group":2},
@hlucasfranca
hlucasfranca / index.html
Last active September 3, 2015 15:34 — forked from mbostock/.block
Curved textPath
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("viewBox", "0 0 500 300");
svg.append("defs").append("path")
@hlucasfranca
hlucasfranca / README.md
Last active September 3, 2015 15:34 — forked from mbostock/.block
Curved Links

This variation of a force-directed graph uses intermediate nodes in links to create aesthetically-pleasing Bézier curves.

@hlucasfranca
hlucasfranca / README.md
Last active September 3, 2015 15:42 — forked from donaldh/README.md
force-multi-foci with convex hulls

I have modified the force-multi-foci example to add a convex hull around each cluster of nodes.

I achieved this by using d3.nest() to create a new dataset of clusters containing the nodes in each cluster. Then in the tick() method I create and update the path element for each cluster in this dataset.