Elijah Meeks emeeks

## README.md

      
              5 files
            
          
              34 forks
            
          
              1 comment
            
          
              62 stars
            
          
                emeeks
                / README.md
            
            
              Last active
              March 25, 2024 07:56
                — forked from mbostock/.block
            
              
                An online tool for interactive teaching of network visualization and representation principles.
              
          
    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.

  
## d3.layout.timeline.js
(function() {
d3.layout.timeline = function() {
    var timelines = [];
    var dateAccessor = function (d) {return new Date(d)};
    var processedTimelines = [];
    var startAccessor = function (d) {return d.start};
    var endAccessor = function (d) {return d.end};
    var size = [500,100];
    var timelineExtent = [-Infinity, Infinity];
    var setExtent = [];

## index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Visualizing PageRank Centrality</title>
  <meta charset="utf-8" />
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<style>

  svg {

## firm.csv

          
            source
            target
            weight

            
              1
              3
              5

            
              1
              8
              3

            
              1
              9
              3

            
              1
              12
              3

            
              1
              15
              2

            
              1
              23
              3

            
              1
              26
              2

            
              1
              37
              2

            
              1
              46
              2

## firm.csv

          
            1
            3
            5

            
              1
              8
              3

            
              1
              9
              3

            
              1
              12
              3

            
              1
              15
              2

            
              1
              23
              3

            
              1
              26
              2

            
              1
              37
              2

            
              1
              46
              2

## d3.sketchy.js
/*global d3:false */
/*jshint unused:false*/

/**
 * Initiate the sketchy library
 * @constructor
 */
var d3sketchy = function(){

	/**

## d3.layout.timeline.js
(function() {
d3.layout.timeline = function() {
    var timelines = [];
    var dateAccessor = function (d) {return new Date(d)};
    var processedTimelines = [];
    var startAccessor = function (d) {return d.start};
    var endAccessor = function (d) {return d.end};
    var size = [500,100];
    var timelineExtent = [-Infinity, Infinity];
    var setExtent = [];

## d3.sankey.js
d3.sankey = function() {
  var sankey = {},
      nodeWidth = 24,
      nodePadding = 8,
      size = [1, 1],
      nodes = [],
      links = [];

  sankey.nodeWidth = function(_) {
    if (!arguments.length) return nodeWidth;

## flare.json
{
    "name": "Google",
    "children": [
        {
            "name": "accounts but that",
            "size": 1
        },
        {
            "name": "advance search used to be better",
            "size": 1

## .block
license: gpl-3.0
	(function() {
	d3.layout.timeline = function() {
	var timelines = [];
	var dateAccessor = function (d) {return new Date(d)};
	var processedTimelines = [];
	var startAccessor = function (d) {return d.start};
	var endAccessor = function (d) {return d.end};
	var size = [500,100];
	var timelineExtent = [-Infinity, Infinity];
	var setExtent = [];
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Visualizing PageRank Centrality</title>
	<meta charset="utf-8" />
	</head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
	<style>

	svg {
	/global d3:false /
	/jshint unused:false/

	/**
	* Initiate the sketchy library
	* @constructor
	*/
	var d3sketchy = function(){

	/**
	d3.sankey = function() {
	var sankey = {},
	nodeWidth = 24,
	nodePadding = 8,
	size = [1, 1],
	nodes = [],
	links = [];

	sankey.nodeWidth = function(_) {
	if (!arguments.length) return nodeWidth;
	{
	"name": "Google",
	"children": [
	{
	"name": "accounts but that",
	"size": 1
	},
	{
	"name": "advance search used to be better",
	"size": 1