initial commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

data/data.json

@@ -0,0 +1,100 @@
+{
+  "d3": {
+    "dependencies": [
+      "d3-array",
+      "d3-axis",
+      "d3-collection",
+      "d3-color",
+      "d3-dispatch",
+      "d3-dsv",
+      "d3-ease",
+      "d3-format",
+      "d3-interpolate",
+      "d3-path",
+      "d3-polygon",
+      "d3-quadtree",
+      "d3-queue",
+      "d3-random",
+      "d3-request",
+      "d3-scale",
+      "d3-selection",
+      "d3-shape",
+      "d3-time",
+      "d3-time-format",
+      "d3-timer",
+      "d3-transition",
+      "d3-voronoi"
+    ]
+  },
+  "d3-dispatch": {},
+  "d3-collection": {},
+  "d3-path": {},
+  "d3-dsv": {
+    "dependencies": [
+      "rw"
+    ]
+  },
+  "d3-ease": {},
+  "d3-transition": {
+    "dependencies": [
+      "d3-dispatch",
+      "d3-ease",
+      "d3-interpolate",
+      "d3-selection",
+      "d3-timer"
+    ]
+  },
+  "d3-polygon": {},
+  "d3-random": {},
+  "d3-format": {},
+  "d3-quadtree": {},
+  "d3-color": {},
+  "d3-voronoi": {},
+  "d3-timer": {},
+  "d3-queue": {},
+  "d3-time": {},
+  "d3-selection": {},
+  "d3-array": {},
+  "d3-request": {
+    "dependencies": [
+      "d3-collection",
+      "d3-dispatch",
+      "d3-dsv",
+      "xmlhttprequest"
+    ]
+  },
+  "d3-interpolate": {
+    "dependencies": [
+      "d3-color"
+    ]
+  },
+  "d3-shape": {
+    "dependencies": [
+      "d3-path"
+    ]
+  },
+  "rw": {},
+  "d3-scale": {
+    "dependencies": [
+      "d3-array",
+      "d3-collection",
+      "d3-color",
+      "d3-format",
+      "d3-interpolate",
+      "d3-time",
+      "d3-time-format"
+    ]
+  },
+  "d3-axis": {
+    "dependencies": [
+      "d3-scale",
+      "d3-selection"
+    ]
+  },
+  "xmlhttprequest": {},
+  "d3-time-format": {
+    "dependencies": [
+      "d3-time"
+    ]
+  }
+}

data/getData.js

@@ -0,0 +1,74 @@
+
+const fetch = require('node-fetch');
+const fs = require('fs')
+const baseURI = "https://registry.npmjs.cf";
+
+console.log('\nSTARTING DEPENDENCY SEARCH');
+console.log('--------------------------\n');
+
+const modules = {};
+const promises = [];
+
+var fileOut = './data.json';
+
+getDependencies('d3', 'next')
+  .then(() => {
+    console.log("\nDone");
+    fs.writeFile(fileOut, JSON.stringify(modules, null, 2), function (err) {
+      if (err) {
+        console.error(err);
+      } else {
+        console.info(`
+          --------------------------------
+           JSON file successfully created
+          --------------------------------
+        `);
+        console.log(modules);
+      }
+    });
+  });
+
+function getDependencies(package, version) {
+
+  return new Promise(function(resolve, reject) {
+
+    fetch(`${baseURI}/${package}`)
+      .then(response => response.json())
+      .then((data) => {
+        version =
+          data.versions[version]
+            ? version
+            : (data['dist-tags'][version]
+              || data['dist-tags']['next']
+              || data['dist-tags']['latest']);
+
+        const deps = data.versions[version].dependencies || {};
+
+        console.log(`${package}: ${Object.keys(deps).length} dependencies`);
+
+        // Initialise module object if it doesn't exist
+        if (!modules[package])
+          modules[package] = {};
+
+        const dependancyPromises = [];
+
+        // Add dependencies to module
+        if (Object.keys(deps).length) {
+          modules[package].dependencies = [];
+
+          for (name in deps) {
+            modules[package].dependencies.push(name);
+            dependancyPromises.push(getDependencies(name));
+          }
+        }
+
+        // If there are any dependencies wait for all of those promises
+        // to resolve then resolve the main promise
+        Promise
+          .all(dependancyPromises)
+          .then(resolve);
+      });
+    });
+
+    return promise;
+}

gulpfile.js

@@ -0,0 +1,10 @@
+
+const gulp = require('gulp');
+const webpack = require('gulp-webpack');
+const webpackConfig = require('./webpack.config');
+
+gulp.task('default', function() {
+  return gulp.src('src/main.js')
+    .pipe(webpack(webpackConfig))
+		.pipe(gulp.dest('build/'));
+});

index.html

@@ -0,0 +1,35 @@
+<html lang="en">
+
+  <head>
+  	<meta http-equiv="content-type" content="text/html; charset=utf-8">
+  	<title>D3 Dependancy graph</title>
+    <style>
+
+.link {
+  stroke: #ccc;
+  stroke-width: 2;
+}
+
+.node text {
+  pointer-events: none;
+  font: 10px sans-serif;
+}
+
+</style>
+  </head>
+
+  <body>
+    <h2>D3 Module Dependency graph</h2>
+    <svg id="graph">
+      <marker id="triangle"
+        viewBox="0 0 10 10" refX="40" refY="5"
+        markerUnits="strokeWidth"
+        markerWidth="4" markerHeight="3"
+        orient="auto">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+    </svg>
+  </body>
+
+  <script src="build/bundle.js"></script>
+</html>

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "d3v4-dependencies",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "dependencies": {
+    "babel-preset-es2015": "^6.5.0",
+    "d3": "^3.5.16",
+    "gulp": "^3.9.1",
+    "node-fetch": "^1.3.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.5.2",
+    "babel-loader": "^6.2.3",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "gulp-webpack": "^1.5.0",
+    "json-loader": "^0.5.4",
+    "webpack-stream": "^3.1.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Ali Sheehan-Dare <alisd23@live.co.uk>",
+  "license": "ISC"
+}

src/main.js

@@ -0,0 +1,82 @@
+
+import { layout } from 'd3';
+import data from '../data/data.json';
+
+console.log(data);
+
+const width = 960;
+const height = 500;
+
+const nodes =
+  Object.keys(data)
+  .filter(k => k !== 'd3')
+  .map(k => ({ name: k }));
+
+const lookup = {};
+nodes.forEach((n) => lookup[n.name] = n);
+
+const links = Object.keys(data)
+  .filter(k => k !== 'd3')
+  .map((source) =>
+    (data[source].dependencies || [])
+      .map(target => ({ source: lookup[source], target: lookup[target] }))
+  )
+  .reduce((a, b) => a.concat(b), []);
+
+console.log(links);
+
+console.log(nodes);
+
+const svg = d3.select("#graph")
+  .attr("width", width)
+  .attr("height", height);
+
+const force = layout.force()
+  .nodes(nodes)
+  .links(links)
+  .size([width, height])
+  .linkStrength(0.1)
+  .friction(0.9)
+  .linkDistance(20)
+  .charge(-400)
+  .gravity(0.1)
+  .theta(0.8)
+  .alpha(0.1)
+  .start();
+
+const link = svg.selectAll(".link")
+  .data(links)
+  .enter()
+    .append("line")
+    .attr("class", "link")
+    .attr("marker-end", "url(#triangle)");
+
+const node = svg.selectAll(".node")
+  .data(nodes)
+  .enter()
+    .append("g")
+    .attr("class", "node")
+    .call(force.drag);
+
+node.append("image")
+  .attr("xlink:href", "https://github.com/favicon.ico")
+  .attr("x", -10)
+  .attr("y", -10)
+  .attr("width", 20)
+  .attr("height", 20);
+
+
+node.append("text")
+  .attr("dx", 20)
+  .attr("dy", ".35em")
+  .text(function(d) { return d.name });
+
+
+force.on("tick", function() {
+  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; });
+
+  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+});

webpack.config.js

@@ -0,0 +1,43 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+	cache: true,
+  devtool: 'inline-source-map',
+  progress: true,
+	output: {
+    filename: 'bundle.js',
+	},
+	module: {
+		loaders: [
+      {
+				test: /\.js$/,
+				loader: 'babel',
+				query: {
+	        presets: ['es2015']
+	      }
+			},
+      {
+        test: /\.scss$/,
+        loaders: ['style', 'css?sourceMap&importLoaders=1', 'sass'],
+				include: 'sass'
+      },
+      {
+        test: /\.json$/,
+        loaders: ['json']
+      }
+		]
+	},
+
+	// LOADER config
+	cssLoader: {
+		sourceMap: true,
+		modules: false,			// Enables local scoped css (hash-like class names specific to components)
+		localIdentName: '[local]___[hash:base64:5]',		// Name format for local scoped class names (if set)
+		importLoaders: 1		// Which loaders should be applied to @imported resources (How many after css loader)
+	},
+	sassLoader: {
+		sourceMap: true,
+		outputStyle: 'expanded'
+	}
+};