See discussion on Hacker News. Built with D3 and TopoJSON.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
circle { | |
fill: none; | |
stroke: #000; | |
stroke-width: 2px; | |
} |
;; Cyberpunk Colour Theme | |
;; | |
;; "and he'd still see the matrix in his sleep, bright lattices of logic | |
;; unfolding across that colorless void..." | |
;; William Gibson, Neuromancer. | |
;; | |
(require 'color-theme) | |
;;;###autoload |
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
Click to add nodes! Nodes near the cursor will be linked to the new node.
D3's force layout uses the Barnes–Hut approximation to compute repulsive charge forces between all nodes efficiently. Links are implemented as geometric constraints on top of position Verlet integration, offering greater stability. A virtual spring between each node and the center of the chart prevents nodes from drifting into space.
This is definitely great work and I salute the GDS! However I also feel that there is a long way to go.
As someone working with communities and small networks of people it seems the biggest hurdle is bringing technology to that community. People have to understand the technology, and it is surprising how uninitiated staff are. Add a large organisation, lots of bureaucracy, big systems, and a lack of communication channels (or all of these!) and you have a recipe for disaster.
I've met high profile CEO's who don't know how to attach a document to an email. I work as a UX designer and it's all very well making things clean, accessible and efficient, but the biggest struggle is getting people to adopt the technology when it is all so alien to them.
See this post for another example; (http://rafszul.svbtle.com/why-devops-is-devops-rather-than-dev-and-ops)
creditor | debtor | amount | risk | |
---|---|---|---|---|
Britain | France | 22.4 | 3 | |
Britain | Greece | 0.55 | 0 | |
Britain | Italy | 26 | 0 | |
Britain | Portugal | 19.4 | 0 | |
Britain | United States | 345 | 1 | |
France | Germany | 53.8 | 1 | |
France | Greece | 53.9 | 0 | |
France | Ireland | 17.3 | 0 | |
France | Italy | 366 | 0 |
<?xml version="1.0" encoding="UTF-8"?> | |
<graphml xmlns="http://graphml.graphdrawing.org/xmlns" | |
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | |
xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns | |
http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd"> | |
<key id="x" for="node" attr.name="x" attr.type="double"/> | |
<key id="tooltip" for="node" attr.name="tooltip" attr.type="string"/> | |
<key id="y" for="node" attr.name="y" attr.type="double"/> |
The range sliders at the top change the values for the force-directed algorithm and the buttons load new graphs and apply various techniques. This will hopefully serve as a tool for teaching network analysis and visualization principles during my Gephi courses and general Networks in the Humanities presentations.
Notice this includes a pretty straightforward way to load CSV node and edge lists as exported from Gephi.
It also includes a pathfinding algorithm built for the standard data structure of force-directed networks in D3. This requires the addition of .id attributes for the nodes, however.
Now with Clustering Coefficients!
Also, it loads images for nodes but the images are not in the gist. The code also refers to different network types but the data files on Gist only refer to the transportation network.
By changing the scale and clip angle of an orthographic projection, this example creates two concentric spheres to give the appearance of floating landmasses. Inspired by Derek Watkin’s Faux-3D Arcs.