npm - visualifyjs - Versions diffs - 2.5.3-2.dev → 2.5.3-9-dev - Mend

visualifyjs 2.5.3-2.dev → 2.5.3-9-dev

Potentially problematic release.

This version of visualifyjs might be problematic. Click here for more details.

Files changed (139) hide show

package/.github/workflows/{static.yml.bak → build.yaml} +51 -51
package/LICENSE +674 -674
package/README.md +40 -58
package/config-overrides.js +31 -31
package/dist/visualify.js +3 -3
package/docs/CLI.md +15 -0
package/docs/{docs/README.md → README.md} +41 -65
package/docs/{docs/Rechart → Rechart}/bar.md +190 -190
package/docs/{docs/Rechart → Rechart}/funnel.md +193 -241
package/docs/{docs/Rechart → Rechart}/line.md +355 -355
package/docs/{docs/Rechart → Rechart}/pie.md +225 -225
package/docs/{docs/Rechart → Rechart}/radar.md +253 -253
package/docs/{docs/_404.md → _404.md} +51 -51
package/docs/{docs/_coverpage.md → _coverpage.md} +11 -11
package/docs/{docs/_sidebar.md → _sidebar.md} +42 -44
package/docs/{docs/components → components}/dotBio.md +34 -34
package/docs/{docs/components → components}/echart.md +82 -82
package/docs/{docs/components → components}/html.md +34 -34
package/docs/{docs/components → components}/macaron.md +145 -145
package/docs/components/markdown.md +0 -0
package/docs/{docs/components → components}/more.md +142 -142
package/docs/{docs/components → components}/plotly.md +62 -62
package/docs/{docs/components → components}/scatterL.md +70 -70
package/docs/{docs/components → components}/visium.md +56 -56
package/docs/{docs/configuration.md → configuration.md} +123 -121
package/docs/{docs/deploy.md → deploy.md} +23 -31
package/docs/index.html +70 -70
package/docs/log.md +1 -0
package/docs/manifest.json +23 -23
package/docs/{docs/more-pages.md → more-pages.md} +23 -23
package/docs/{docs/quickstart.md → quickstart.md} +115 -124
package/docs/{docs/rechart-attributes.md → rechart-attributes.md} +74 -74
package/docs/{docs/rechart-basic-usage.md → rechart-basic-usage.md} +162 -162
package/docs/static/css/fluff-stuff.css +169 -169
package/docs/static/css/font-awesome.min.css +4 -4
package/docs/static/css/visualify.css +25 -25
package/docs/static/js/configuration.js +448 -448
package/docs/static/js/visualify.js +24 -23
package/docs/theme.md +3 -0
package/package.json +74 -83
package/rollup.config.mjs +75 -75
package/src/_css/404.css +115 -115
package/src/_css/App.css +37 -37
package/src/_css/autoSuggestion.css +26 -26
package/src/_css/circular-progress.css +32 -32
package/src/_css/index.css +36 -36
package/src/_css/modern.css +24 -24
package/src/_media/corner.svg +8 -8
package/src/_media/download.svg +3 -3
package/src/_media/logo.svg +14 -14
package/src/_test/App.test.js +15 -15
package/src/_utils/reportWebVitals.js +13 -13
package/src/core/appContext.js +27 -27
package/src/core/components/Scatter.js +188 -188
package/src/core/components/ScatterBio.js +572 -572
package/src/core/components/VisiumPlot.js +165 -165
package/src/core/components/browser.js +42 -42
package/src/core/components/dotplot.js +413 -413
package/src/core/components/html.js +29 -29
package/src/core/components/list.js +178 -178
package/src/core/components/macaron.js +201 -201
package/src/core/components/markdown.js +56 -56
package/src/core/components/parser.scatterBio.js +579 -587
package/src/core/components/ratio.js +80 -80
package/src/core/components/scatterL.js +173 -173
package/src/core/components/searchbar.js +131 -131
package/src/core/components/selection.js +193 -193
package/src/core/components/timeline.js +281 -281
package/src/core/components/visium.js +97 -97
package/src/core/fetch/condfetch.js +82 -82
package/src/core/fetch/fetch.js +92 -92
package/src/core/fetch/json.js +29 -29
package/src/core/fetch/vfetch.js +42 -42
package/src/core/liveEditor.js +44 -44
package/src/core/modules/codeEditorWithPreview.js +104 -104
package/src/core/modules/echarts/common.js +20 -20
package/src/core/modules/echarts/presetHandler.js +41 -41
package/src/core/modules/echarts/presets/esodev.chromium.js +172 -172
package/src/core/modules/echarts/presets/esodev.codex.js +130 -130
package/src/core/modules/echarts/presets/esodev.visium.js +123 -123
package/src/core/modules/echarts/presets/mmtrbc.js +186 -186
package/src/core/modules/echarts.js +71 -71
package/src/core/modules/echartsUtils.js +43 -43
package/src/core/modules/echartswitcher.js +152 -152
package/src/core/modules/replotly/presetHandler.js +24 -24
package/src/core/modules/replotly/presets/minimum.js +18 -18
package/src/core/modules/replotly/presets/mmtrbc.dot.js +114 -114
package/src/core/modules/replotly/presets/mmtrbc.violin.js +100 -100
package/src/core/modules/replotly.js +71 -71
package/src/core/pages/404.js +50 -50
package/src/core/pages/error.js +27 -27
package/src/core/pages/jsonPage.js +62 -62
package/src/core/pages/loading.js +44 -44
package/src/core/parser/echart.data.js +183 -183
package/src/core/parser/echart.features.js +125 -125
package/src/core/parser/echart.general.js +143 -147
package/src/core/parser/echart.hilbert.js +57 -57
package/src/core/parser/echart.parser.js +210 -210
package/src/core/parser/echart.series.js +67 -67
package/src/core/parser/echart.types.js +76 -76
package/src/core/parser/plotly.config.js +10 -10
package/src/core/parser/plotly.data.js +132 -132
package/src/core/parser/plotly.layout.js +9 -9
package/src/core/parser/plotly.violin.js +18 -18
package/src/core/recharts.js +62 -62
package/src/core/router/alias.js +49 -49
package/src/core/router/jsonRouter.js +31 -31
package/src/core/themes/modern.js +32 -32
package/src/core/themes/themeSelector.js +33 -33
package/src/core/visualify.js +47 -47
package/src/core/widgets/circularProgress.js +23 -23
package/src/core/widgets/controller.js +83 -83
package/src/core/widgets/errorBoundary.js +36 -36
package/src/core/widgets/footer.js +177 -177
package/src/core/widgets/header.js +234 -234
package/src/core/widgets/layout/Grid.js +31 -31
package/src/core/widgets/layout.js +36 -36
package/src/core/widgets/mapping.js +42 -42
package/src/index.js +62 -62
package/src/setupTests.js +5 -5
package/docs/docs/CLI.md +0 -34
package/docs/docs/Rechart/scatter.md +0 -298
package/docs/docs/log.md +0 -9
package/docs/docs/static/logo/favicon.ico +0 -0
package/docs/docs/static/logo/logo_128x128.png +0 -0
package/docs/docs/static/logo/logo_192x192.png +0 -0
package/docs/docs/static/logo/logo_256x256.png +0 -0
package/docs/docs/static/logo/logo_512x512.png +0 -0
package/docs/docs/static/logo/logo_64x64.png +0 -0
package/docs/docs/theme.md +0 -5
/package/docs/{docs/Rechart → Rechart}/geo.md +0 -0
/package/docs/{docs/Rechart → Rechart}/liquidfill.md +0 -0
/package/docs/{docs/Rechart → Rechart}/polar.md +0 -0
/package/docs/{docs/Rechart → Rechart}/sankey.md +0 -0
/package/docs/{docs/Rechart/sunburst.md → Rechart/scatter.md} +0 -0
/package/docs/{docs/Rechart/tree.md → Rechart/sunburst.md} +0 -0
/package/docs/{docs/Rechart/wordcloud.md → Rechart/tree.md} +0 -0
/package/docs/{docs/components/markdown.md → Rechart/wordcloud.md} +0 -0
/package/docs/{docs/static → static}/_images/deploy-github-pages.png +0 -0

package/docs/{docs/deploy.md → deploy.md} RENAMED Viewed

@@ -1,31 +1,23 @@
-# Deploy
-## On Your Local Machine
-You can deploy Visualify on your local machine by running a simple HTTP server.
-For example, you can use the `http-server` package from npm:
-```bash
-npm install -g http-server
-http-server ./docs
-```
-Then open your browser and navigate to `http://localhost:8080`.
-## On GitHub Pages
-There are three places to populate your docs for your GitHub repository:
--   `docs/` folder
--   main branch
--   gh-pages branch
-It is recommended that you save your files to the `./docs` subfolder of the
-`main` branch of your repository. Then select `main branch /docs folder` as your
-GitHub Pages source in your repository's settings page.
-![GitHub Pages](./static/_images/deploy-github-pages.png)
-!> You can also save files in the root directory and select `main branch`.
-You'll need to place a `.nojekyll` file in the deploy location (such as `/docs`
-or the gh-pages branch)
+# Deploy
+## On Your Local Machine
+## GitHub Pages
+There are three places to populate your docs for your GitHub repository:
+-   `docs/` folder
+-   main branch
+-   gh-pages branch
+It is recommended that you save your files to the `./docs` subfolder of the
+`main` branch of your repository. Then select `main branch /docs folder` as your
+GitHub Pages source in your repository's settings page.
+![GitHub Pages](./static/_images/deploy-github-pages.png)
+!> You can also save files in the root directory and select `main branch`.
+You'll need to place a `.nojekyll` file in the deploy location (such as `/docs`
+or the gh-pages branch)

package/docs/index.html CHANGED Viewed

@@ -1,71 +1,71 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <title>visualify.js official site</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="description" content="Description" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="shortcut icon" type="image/x-icon" href="static/logo/favicon.ico" />
-    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css" />
-    <link rel="stylesheet" href="./static/css/font-awesome.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" />
-    <link rel="stylesheet" href="./static/css/fluff-stuff.css" />
-    <script src="./static/js/configuration.js"></script>
-    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
-    <!-- Docsify siderbarbar -->
-    <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
-</head>
-<body>
-    <div id="docsify"></div>
-    <script>
-        // Set html "lang" attribute based on URL
-        var lang = location.hash.match(/#\/(zh-cn)\//);
-        if (lang) {
-            document.documentElement.setAttribute("lang", lang[1]);
-        }
-        window.$docsify = config;
-        $visualify = {
-            mode: 'charts',
-        }
-        /*
-        const custom_buttons = [
-            ["MmTrBC", "./MmTrBC/", 1],
-            ["Esodev", "./EsoDev/", 3],
-        ];
-        */
-    </script>
-    <!-- Docsify v4 -->
-    <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
-    <script src="./static/js/fluff.js" defer></script>
-    <!-- Plugins -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.normalize"></script>
-    <script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.js"></script>
-    <!-- Copy to Clipboard -->
-    <script src="https://unpkg.com/docsify-copy-code@2/dist/docsify-copy-code.min.js"></script>
-    <!-- docsify-tabs (latest v1.x.x) -->
-    <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1/dist/docsify-tabs.min.js"></script>
-    <!-- LaTeX display engine script Here -->
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
-    <script src="https://unpkg.com/docsify-latex@0.5.2/dist/docsify-latex.min.js"></script>
-    <!-- flexible-alerts -->
-    <script src="https://unpkg.com/docsify-plugin-flexible-alerts@1.1.1/dist/docsify-plugin-flexible-alerts.min.js"></script>
-    <!-- Mermaid -->
-    <script type="module">
-        import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"; mermaid.initialize({ startOnLoad: true }); window.mermaid = mermaid;
-    </script>
-    <!-- Prism -->
-    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script>
-    <!-- Visualify -->
-    <script src="./static/js/visualify.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>visualify.js official site</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="description" content="Description" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/x-icon" href="static/logo/favicon.ico" />
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css" />
+    <link rel="stylesheet" href="./static/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" />
+    <link rel="stylesheet" href="./static/css/fluff-stuff.css" />
+    <script src="./static/js/configuration.js"></script>
+    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+    <!-- Docsify siderbarbar -->
+    <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
+</head>
+<body>
+    <div id="docsify"></div>
+    <script>
+        // Set html "lang" attribute based on URL
+        var lang = location.hash.match(/#\/(zh-cn)\//);
+        if (lang) {
+            document.documentElement.setAttribute("lang", lang[1]);
+        }
+        window.$docsify = config;
+        $visualify = {
+            mode: 'charts',
+        }
+        /*
+        const custom_buttons = [
+            ["MmTrBC", "./MmTrBC/", 1],
+            ["Esodev", "./EsoDev/", 3],
+        ];
+        */
+    </script>
+    <!-- Docsify v4 -->
+    <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="./static/js/fluff.js" defer></script>
+    <!-- Plugins -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.normalize"></script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.js"></script>
+    <!-- Copy to Clipboard -->
+    <script src="https://unpkg.com/docsify-copy-code@2/dist/docsify-copy-code.min.js"></script>
+    <!-- docsify-tabs (latest v1.x.x) -->
+    <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1/dist/docsify-tabs.min.js"></script>
+    <!-- LaTeX display engine script Here -->
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
+    <script src="https://unpkg.com/docsify-latex@0.5.2/dist/docsify-latex.min.js"></script>
+    <!-- flexible-alerts -->
+    <script src="https://unpkg.com/docsify-plugin-flexible-alerts@1.1.1/dist/docsify-plugin-flexible-alerts.min.js"></script>
+    <!-- Mermaid -->
+    <script type="module">
+        import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"; mermaid.initialize({ startOnLoad: true }); window.mermaid = mermaid;
+    </script>
+    <!-- Prism -->
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script>
+    <!-- Visualify -->
+    <script src="./static/js/visualify.js"></script>
+</body>
 </html>

package/docs/log.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ # log

package/docs/manifest.json CHANGED Viewed

@@ -1,24 +1,24 @@
-{
-    "short_name": "visualifyjs",
-    "name": "Create Your Data Portal Simple",
-    "icons": [{
-            "src": "https://lgcyaxi.net/visualify/static/logo/favicon.ico",
-            "sizes": "64x64 32x32 24x24 16x16",
-            "type": "image/x-icon"
-        },
-        {
-            "src": "https://lgcyaxi.net/visualify/static/logo/logo192.png",
-            "type": "image/png",
-            "sizes": "192x192"
-        },
-        {
-            "src": "https://lgcyaxi.net/visualify/static/logo/logo512.png",
-            "type": "image/png",
-            "sizes": "512x512"
-        }
-    ],
-    "start_url": ".",
-    "display": "standalone",
-    "theme_color": "#000000",
-    "background_color": "#ffffff"
+{
+    "short_name": "visualifyjs",
+    "name": "Create Your Data Portal Simple",
+    "icons": [{
+            "src": "https://lgcyaxi.net/visualify/static/logo/favicon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        },
+        {
+            "src": "https://lgcyaxi.net/visualify/static/logo/logo192.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        },
+        {
+            "src": "https://lgcyaxi.net/visualify/static/logo/logo512.png",
+            "type": "image/png",
+            "sizes": "512x512"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
 }

package/docs/{docs/more-pages.md → more-pages.md} RENAMED Viewed

@@ -1,23 +1,23 @@
-# More pages
-If you need more pages, you can simply create more `json` configuration files in
-your visualify directory. If you create a file named `scatter`, then it is
-accessible via `/scatter`.
-For example, the directory structure is as follows:
-```text
-.
-└── docs
-    ├── index.html
-    ├── scatter.json
-    └── honme.json
-```
-Matching routes
-```text
-docs/home.json        => http://domain.com
-                      => http://domain.com/home
-docs/scatter.json     => http://domain.com/scatter
-```
+# More pages
+If you need more pages, you can simply create more `json` configuration files in
+your visualify directory. If you create a file named `scatter`, then it is
+accessible via `/scatter`.
+For example, the directory structure is as follows:
+```text
+.
+└── docs
+    ├── index.html
+    ├── scatter.json
+    └── honme.json
+```
+Matching routes
+```text
+docs/home.json        => http://domain.com
+                      => http://domain.com/home
+docs/scatter.json     => http://domain.com/scatter
+```

package/docs/{docs/quickstart.md → quickstart.md} RENAMED Viewed

@@ -1,124 +1,115 @@
-# Quick start
-It is highly recommended to use `Docisfy` as a document framework and imports
-`visualify` to quickly present various diagrams.
-Insert the `visualify` script in your `index.html` file.
-```html
-<head>
-  ...
-  <script src="https://cdn.jsdelivr.net/npm/visualifyjs"></script>
-  <!-- or -->
-          <!-- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script -->
-  <!-- or -->
-      <!-- script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify.js"></script> -->
-</head>
-```
-Or install `visualify.cli` globally, which helps initializing and previewing the
-website locally.
-```bash
-npm i visualify.cli -g
-```
-## Initialize
-If you want to write the documentation in the `./docs` subdirectory, you can use
-the `init` command.
-```bash
-visualify init ./docs
-```
-or simply run `visualify init`
-```bash
-visualify init
-```
-or anywhere you like.
-```bash
-visualify init <path>
-```
-## Writing content
-After the `init` is complete, you can see the file list in the `./docs`
-subdirectory.
--   `index.html` as the entry file
--   `home.jsom` as the home page
--   `.nojekyll` prevents GitHub Pages from ignoring files that begin with an
-    underscore
-You can easily update the documentation in `./docs/home.json`, of course you can
-add [more pages](more-pages.md).
-## Preview your site
-Run the local server with `visualify serve <docs-path>`. You can preview your
-site in your browser on `http://localhost:3000`.
-```bash
-visualify serve docs
-```
-?> For more use cases of `visualify.cli`, head over to the
-[CLI documentation](CLI.md).
-## Manual initialization
-If you don't like `npm` or have trouble installing the tool, you can manually
-create `index.html`:
-```html
-<!-- index.html -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta charset="UTF-8" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script>
-      $visualify = {
-        //...
-      };
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/visualifyjs"></script>
-    <!-- or -->
-      <!-- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script> -->
-    <!-- or -->
-      <!-- script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify.js"></script> -->
-  </body>
-</html>
-```
-### Manually preview your site
-If you have `Node.js` installed on your system, you can easily use it to run a
-static server to preview your site.
-```bash
-# install corresponding dependencies
-npm install -g serve
-serve -s ./docs
-```
-If you have Python installed on your system, you can easily use it to run a
-static server to preview your site.
-```python2
-cd docs && python -m SimpleHTTPServer 3000
-```
-```python3
-cd docs && python -m http.server 3000
-```
+# Quick start
+It is highly recommended to use `Docisfy` as a document framework and imports
+`visualify` to quickly present various diagrams.
+Insert the `visualify` script in your `index.html` file.
+```html
+<head>
+  ...
+  <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
+</head>
+```
+Or install `visualify.cli` globally, which helps initializing and previewing the
+website locally.
+```bash
+npm i visualify.cli -g
+```
+## Initialize
+If you want to write the documentation in the `./docs` subdirectory, you can use
+the `init` command.
+```bash
+visualify init ./docs
+```
+or simply run `visualify init`
+```bash
+visualify init
+```
+or anywhere you like.
+```bash
+visualify init <path>
+```
+## Writing content
+After the `init` is complete, you can see the file list in the `./docs`
+subdirectory.
+-   `index.html` as the entry file
+-   `home.jsom` as the home page
+-   `.nojekyll` prevents GitHub Pages from ignoring files that begin with an
+    underscore
+You can easily update the documentation in `./docs/home.json`, of course you can
+add [more pages](more-pages.md).
+## Preview your site
+Run the local server with `visualify serve <docs-path>`. You can preview your
+site in your browser on `http://localhost:3000`.
+```bash
+visualify serve docs
+```
+?> For more use cases of `visualify.cli`, head over to the
+[CLI documentation](CLI.md).
+## Manual initialization
+If you don't like `npm` or have trouble installing the tool, you can manually
+create `index.html`:
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      $visualify = {
+        //...
+      };
+    </script>
+    <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
+  </body>
+</html>
+```
+### Manually preview your site
+If you have `Node.js` installed on your system, you can easily use it to run a
+static server to preview your site.
+```bash
+# install corresponding dependencies
+npm install -g serve
+serve -s ./docs
+```
+If you have Python installed on your system, you can easily use it to run a
+static server to preview your site.
+```python2
+cd docs && python -m SimpleHTTPServer 3000
+```
+```python3
+cd docs && python -m http.server 3000
+```