lots of work on sankey diagram

krissalvador27 · Dec 11, 2017 · fcf0309 · fcf0309
1 parent f5abedb
commit fcf0309
Show file tree

Hide file tree

Showing 6 changed files with 792 additions and 208 deletions.
diff --git a/docs/src/docs/SankeyDiagram/examples/SankeyInteractive.js.example b/docs/src/docs/SankeyDiagram/examples/SankeyInteractive.js.example
@@ -66,16 +66,14 @@ function getSampleData() {
       {id: 'g', label: "Grapes"},
     ],
     links: [
-      {source: 'a', target: 'c', value: 0.5},
-      {source: 'a', target: 'd', value: 0.5},
-      {source: 'b', target: 'c', value: 0.5},
-      {source: 'b', target: 'd', value: 0.5},
-      {source: 'c', target: 'e', value: 0.333},
-      {source: 'c', target: 'f', value: 0.333},
-      {source: 'c', target: 'g', value: 0.333},
-      {source: 'd', target: 'e', value: 0.333},
-      {source: 'd', target: 'f', value: 0.333},
-      {source: 'd', target: 'g', value: 0.333},
+      {source: 'a', target: 'c', value: 5},
+      {source: 'a', target: 'd', value: 5},
+      {source: 'b', target: 'c', value: 5},
+      {source: 'b', target: 'd', value: 5},
+      {source: 'c', target: 'e', value: 3.33},
+      {source: 'c', target: 'g', value: 3.33},
+      {source: 'd', target: 'e', value: 3.33},
+      {source: 'd', target: 'f', value: 3.33},
     ]
   }
 }
diff --git a/docs/src/docs/TreeMap/examples/TreeMap.js.example b/docs/src/docs/TreeMap/examples/TreeMap.js.example
@@ -1,4 +1,4 @@
-const TreeMapExample = (props) => {
+const TreeMapExample = props => {
   const data = {
     children: _.range(1, 5).map(n => ({
       children: _.times(n * n, m => ({
@@ -7,24 +7,27 @@ const TreeMapExample = (props) => {
     }))
   };
 
-  const colorScale = d3.scaleLinear()
+  const colorScale = d3
+    .scaleLinear()
     .domain([0, 65])
-    .range(['#6b6ecf', '#8ca252'])
+    .range(["#6b6ecf", "#8ca252"])
     .interpolate(d3.interpolateHcl);
 
-  return <div>
-    <TreeMap
-      data={data}
-      getValue="size"
-      getLabel="value"
-      nodeStyle={(node) => ({
-        backgroundColor: colorScale(parseInt(node.data.size)),
-        border: '1px solid #333'
-      })}
-      width={400}
-      height={500}
-    />
-  </div>
+  return (
+    <div>
+      <TreeMap
+        data={data}
+        getValue="size"
+        getLabel="value"
+        nodeStyle={node => ({
+          backgroundColor: colorScale(parseInt(node.data.size)),
+          border: "1px solid #333"
+        })}
+        width={400}
+        height={500}
+      />
+    </div>
+  );
 };
 
 ReactDOM.render(<TreeMapExample />, mountNode);
diff --git a/docs/styles/charts.less b/docs/styles/charts.less
@@ -126,4 +126,7 @@ path {
   dominant-baseline: central;
   font-size: 10pt;
   color: #333;
+}
+.sankey-node-terminal {
+  fill: steelblue;
 }
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "serve": "python -m SimpleHTTPServer",
     "test": "npm run test-jsdom",
     "test-browser": "webpack-dev-server --config tests/browser/webpack.config.test.js",
-    "test-jsdom": "env NODE_PATH=$NODE_PATH:$PWD/src BABEL_ENV=production mocha --compilers js:babel-register --require tests/jsdom/setup.js --recursive tests/jsdom/spec"
+    "test-jsdom": "env NODE_PATH=$NODE_PATH:$PWD/src BABEL_ENV=production mocha --compilers js:babel-register --require tests/jsdom/setup.js --recursive tests/jsdom/spec",
+    "test-watch": "env NODE_PATH=$NODE_PATH:$PWD/src BABEL_ENV=production mocha --watch --compilers js:babel-register --require tests/jsdom/setup.js --recursive tests/jsdom/spec"
   },
   "dependencies": {
     "d3": "^4.4.0",