d3 as dependency, not bundled in

wwsalmon · May 3, 2020 · 70ef8b8 · 70ef8b8
1 parent 38680ab
commit 70ef8b8
Show file tree

Hide file tree

Showing 16 changed files with 472 additions and 174 deletions.
diff --git a/2019/index.html b/2019/index.html
@@ -3,7 +3,8 @@
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel='stylesheet' type='text/css' href='../css/style-2019.min.css'>
-        <script src="../dist/sota.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
+        <script src="../dist/sota.min.js"></script>
         <title>State of the Academy 2019</title>
     </head>
     <body>

diff --git a/README.md b/README.md
@@ -4,18 +4,32 @@ Charting library for *The Phillipian*'s [annual State of the Academy survey proj
 
 # Installation
 
-Using browser/plain JS: download `dist/sota.min.js` (eventually this will be in releases...) and include it in your project:
+## Using browser/plain JS:
 
-`<script src="PATH/TO/sota.min.js"></script>`
+1. Download or use a cdn to include d3 in your project before sota.js:
 
-Using npm (not recommended for now, I'm working on it):
+        <script src="PATH/TO/d3.min.v5.js"></script>
 
-`npm i sota.js`
+2. Download `dist/sota.min.js` (eventually this will be in releases...) and include it in your project:
 
-# Usage
+        <script src="PATH/TO/sota.min.js"></script>
+
+3. In your app or index js, you can now access the `sota` object with functions like `sota.barChart()`.
+
+## Using npm:
+
+Run:
+
+    npm i sota.js
 
-If npm:
+d3 is a dependency, so you don't have to worry about it separately.
 
-`import sota from "sota.js"`
+Then, in your app or index js:
+
+    import sota from "sota.js"
+
+And now you have access to the `sota` object with functions like `sota.barChart()`.
+
+# Usage
 
-Then (or just by including the script in browser/plain JS) you have access to the `sota` object and can call functions like `sota.barChart()`. Detailed instructions on component parameters and usage to come.
+Usage documentation to come.
diff --git a/dist/sota.min.js b/dist/sota.min.js
diff --git a/dist/sota.node.js b/dist/sota.node.js
diff --git a/js/components/barChart.js b/js/components/barChart.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import { sotaConfig, toPercentage } from '../helper.js';
 
 export default function ({

diff --git a/js/components/boilerplate.js b/js/components/boilerplate.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import { sotaConfig } from '../helper.js';
 
 export default function ({

diff --git a/js/components/columnChart.js b/js/components/columnChart.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import {sotaConfig, toPercentage} from '../helper.js';
 
 export default function ({

diff --git a/js/components/customBarChart.js b/js/components/customBarChart.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import { sotaConfig } from '../helper.js';
 
 export default function ({

diff --git a/js/components/groupedBarChart.js b/js/components/groupedBarChart.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import { sotaConfig, toPercentage } from '../helper.js';
 
 export default function ({

diff --git a/js/components/lineGraph.js b/js/components/lineGraph.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import { sotaConfig, toPercentage } from '../helper.js';
 
 export default function ({

diff --git a/js/components/pieChart.js b/js/components/pieChart.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import {sotaConfig, toPercentage} from '../helper.js';
 
 export default function ({

diff --git a/js/components/stackedBarChart.js b/js/components/stackedBarChart.js
@@ -1,4 +1,4 @@
-import '../d3.v5.min.js';
+import * as d3 from "d3";
 import { sotaConfig, hideIfOOB, toPercentage } from '../helper.js';
 
 export default function ({

diff --git a/js/d3.v5.min.js b/js/d3.v5.min.js