ssmaroju

// This is the core Javascript code for http://windhistory.com/
// I haven't done a full open source release, but I figured I'd put the most important
// D3 code out there for people to learn from.   --nelson@monkey.org

/** Common wind rose code **/

// Function to draw a single arc for the wind rose
// Input: Drawing options object containing
//   width: degrees of width to draw (ie 5 or 15)
//   from: integer, inner radius

ssmaroju

// This is the core Javascript code for http://windhistory.com/
// I haven't done a full open source release, but I figured I'd put the most important
// D3 code out there for people to learn from.   --nelson@monkey.org

/** Common wind rose code **/

// Function to draw a single arc for the wind rose
// Input: Drawing options object containing
//   width: degrees of width to draw (ie 5 or 15)
//   from: integer, inner radius

ssmaroju

// This is the core Javascript code for http://windhistory.com/
// I haven't done a full open source release, but I figured I'd put the most important
// D3 code out there for people to learn from.   --nelson@monkey.org

/** Common wind rose code **/

// Function to draw a single arc for the wind rose
// Input: Drawing options object containing
//   width: degrees of width to draw (ie 5 or 15)
//   from: integer, inner radius

ssmaroju

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.

ssmaroju

[ Launch: test ] 19ec8f643d23cdeb0837 by ssmaroju

ssmaroju

function Gauge(placeholderName, configuration)
{
	this.placeholderName = placeholderName;
	
	var self = this; // for internal d3 functions
	
	this.configure = function(configuration)
	{
		this.config = configuration;
		

ssmaroju

function Gauge(placeholderName, configuration)
{
	this.placeholderName = placeholderName;
	
	var self = this; // for internal d3 functions
	
	this.configure = function(configuration)
	{
		this.config = configuration;
		

ssmaroju

function Gauge(placeholderName, configuration)
{
	this.placeholderName = placeholderName;
	
	var self = this; // for internal d3 functions
	
	this.configure = function(configuration)
	{
		this.config = configuration;
		

ssmaroju

// This is the core Javascript code for http://windhistory.com/
// I haven't done a full open source release, but I figured I'd put the most important
// D3 code out there for people to learn from.   --nelson@monkey.org

/** Common wind rose code **/

// Function to draw a single arc for the wind rose
// Input: Drawing options object containing
//   width: degrees of width to draw (ie 5 or 15)
//   from: integer, inner radius

ssmaroju

D3  - Data Driven Documents
http://d3js.org/
	low level library to display/manipulate data in HTML/CSS & SVG
	API Ref: https://github.com/mbostock/d3/wiki/API-Reference

D3 Plus - D3 Extension plugin
https://github.com/alexandersimoes/d3plus

Fabric - HTML5 Canvas library
http://fabricjs.com/