Use rollup to manage builds (#2)

Use rollup to generate esmodule and commonjs builds. In addition this PR updates the github actions to regenerate the builds and publish them to github pages. The documentation and README were also updated.

.github/workflows/build-docs.yml

@@ -1,7 +1,4 @@
-on:
-  push:
-    branches:
-      - main
+on: [push]
 
 
 name: Build documentation
@@ -29,11 +26,11 @@ jobs:
     - name: Run JSDoc
       run: npm run jsdoc
 
-    # - name: create builds
-    #   run: yarn build
+    - name: create builds
+      run: npm run build
 
-    # - name: copy build to app
-    #   run: cp -r dist/* app
+    - name: copy build to app
+      run: cp -r dist/* app
 
     - name: copy docs to app
       run: cp -r docs/built/* app/docs
@@ -42,6 +39,7 @@ jobs:
       run: cp -r assets app/docs
 
     - name: GH Pages Deployment
+      if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
       uses: JamesIves/github-pages-deploy-action@v4
       with:
         branch: gh-pages # The branch the action should deploy to.

.github/workflows/publish-npm.yml

@@ -1,7 +1,5 @@
 on: [push]
 
-# on: [push]
-
 name: Build and publish to NPM
 
 jobs:
@@ -16,10 +14,10 @@ jobs:
           registry-url: https://registry.npmjs.org/
 
       - name: install dependencies
-        run: yarn install
+        run: npm install --include-dev
 
-      # - name: create builds
-      #   run: yarn build
+      - name: create builds
+        run: npm run build
 
       - name: Publish to NPM
         if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}

.gitignore

@@ -1 +1,3 @@
-node_modules
+.DS_Store
+node_modules
+dist

.npmignore

@@ -0,0 +1,3 @@
+app/*
+assets/*
+test/*

.npmrc

@@ -0,0 +1,2 @@
+package-lock=false
+registry="https://registry.npmjs.org"

README.md

@@ -1,14 +1,26 @@
 ## Ridges.js
 
-A JavaScript library to make ridge plots. 
+> A JavaScript library for generating ridgeline plots, providing options for both **horizontal** and **vertical** layouts. 
+
+This library combines the features of box plots and ridgeline plots into a unified visualization for each group. To use this library effectively, your input data should include summarized metrics.
+
+![](assets/demo.png)
 
 Install the package from [npm](https://www.npmjs.com/package/ridges.js),
 
 ```bash
 npm install ridges.js
 ```
 
-The library offers both horizontal and vertical layouts for creating ridge plots. To get started, choose your preferred layout and then instantiate a new visualization object. Customize the visualization state by configuring properties such as titles, selected metrics, the number of ticks, and more. Next, input your data, and render the plot in your desired dimensions!
+To begin using Ridges.js, follow these steps:
+
+1. Choose your preferred layout, either horizontal or vertical.
+2. Instantiate a new visualization object.
+3. Customize the visualization by configuring properties such as titles, selected metrics, the number of ticks, and more.
+4. Provide your data.
+5. Render the plot in your desired dimensions.
+
+Here's an example:
 
 ```js
 import { VerticalRidgePlot, HorizontalRidgePlot } from "ridges.js";
@@ -27,5 +39,22 @@ vridge.setInput(data);
 vridge.render(300, 500);
 ```
 
+### Data model
+
+The data object is expected to contain **groups** as keys, and each `group` should have metrics for visualizing the boxes and ridges. Here's an example:
+
+```js
+const data = {
+  january: {
+    min: 1,
+    max: 20,
+    mean: 10,
+    median: 5,
+    quantiles: [1, 5, 9, 10], // box plot metrics
+    values: [1, 2, 5, 20, 15, 18], // for the histogram
+  }
+}
+```
+
 Check out more examples in the [app directory](./app/)!
 

app/index.html

@@ -6,11 +6,11 @@
     <meta name="keywords" content="ridge plots, JavaScript">
     <meta name="author" content="Jayaram Kancherla">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://d3js.org/d3.v4.min.js"></script>
-    <script src="https://d3js.org/d3-color.v1.min.js"></script>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <!-- <script src="https://d3js.org/d3-color.v1.min.js"></script>
     <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
-    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
-    <script src="https://d3js.org/d3-array.v3.min.js"></script>
+    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>-->
+    <!-- <script src="https://d3js.org/d3-array.v7.min.js"></script>  -->
 </head>
 
 <body>
@@ -21,7 +21,7 @@ <H2>A simple ridgeline plot</H2>
     <div class="ridgeline-horizontal"></div>
 
     <script type="module">
-        import { VerticalRidgePlot, HorizontalRidgePlot } from "./src/index.js";
+        import { VerticalRidgePlot, HorizontalRidgePlot } from "./index.js";
         import { data } from "./data.js";
 
         console.log(data);