oecd-simple-charts
Version:
D3 charting library for creating pearl charts, stacked bar charts and box plots
84 lines (51 loc) • 4.66 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BoxPlot.html">BoxPlot</a><ul class='methods'><li data-type='method'><a href="BoxPlot.html#update">update</a></li></ul></li><li><a href="PearlChart.html">PearlChart</a><ul class='methods'><li data-type='method'><a href="PearlChart.html#update">update</a></li></ul></li><li><a href="StackedChart.html">StackedChart</a><ul class='methods'><li data-type='method'><a href="StackedChart.html#update">update</a></li></ul></li></ul>
</nav>
<div id="main">
<section class="readme">
<article><h1>OECD Simple Charts</h1><p>A lightweight chartingtool. Visit the <a href="https://oecd-cyc.github.io/oecd-simple-charts">docs</a> or checkout the <a href="https://github.com/oecd-cyc/oecd-simple-charts">code</a>.</p>
<p><img src="https://raw.githubusercontent.com/oecd-cyc/oecd-simple-charts/master/public/images/charts-example.png" style="width:100%; max-width: 960px"></p>
<h2>Usage</h2><p>To get started, you can either install the library using npm</p>
<pre class="prettyprint source"><code>npm install oecd-simple-charts</code></pre><p>or embed the <code>bundle.min.js</code> and <code>bundle.min.css</code> files, either downloading them from the <a href="https://github.com/oecd-cyc/oecd-simple-charts">repository</a> or directly embedding them from a CDN service like <a href="https://unpkg.com/oecd-simple-charts/build/bundle.min.js">unpkg</a> or <a href="https://cdn.jsdelivr.net/npm/oecd-simple-charts">jsDelivr</a>.</p>
<pre class="prettyprint source lang-html"><code><script src="https://unpkg.com/oecd-simple-charts/build/bundle.min.js"></script>
<link href="https://unpkg.com/oecd-simple-charts/build/bundle.min.css" rel="stylesheet"></code></pre><p>In order to create a chart you need to add a container DOM node. Then you can start with the configuration of the chart. You can set a title, change the size and color of the elements and add data points. Each chart has an <code>update</code> function, that takes an array of new data and updates the visualization.</p>
<h2>Development</h2><p>Clone the repository, install the dependencies, builds the application and starts a webserver with hot loading on <a href="http://localhost:3000/">localhost:3000</a>:</p>
<pre class="prettyprint source lang-sh"><code>$ git clone https://github.com/oecd-cyc/oecd-simple-charts.git
$ cd oecd-simple-charts
$ npm install
$ npm start</code></pre><h2>Build</h2><p>Builds a minified version of the library in the <code>build/</code> folder.</p>
<pre class="prettyprint source lang-sh"><code>$ npm run build</code></pre><h2>Testing</h2><p>Run the functional test-suite located in <code>test/</code>:</p>
<pre class="prettyprint source lang-sh"><code>$ npm test</code></pre><p>To run the visual-regression tests, you will first need a running webserver on port 3000 (see <a href="#development">Development</a>). Then you can start the tests running:</p>
<pre class="prettyprint source lang-sh"><code>$ npm run test:visual</code></pre><p>If the test fails, but you want to keep your changes run:</p>
<pre class="prettyprint source lang-sh"><code>$ npm run test:visual:reference</code></pre><p>This will save new screenshots in the <code>screenshots/</code> folder and these will be used as reference to be tested against the next time you run the tests.</p>
<h2>Update documentation</h2><p>In order to generate the docs, run:</p>
<pre class="prettyprint source lang-sh"><code>$ npm run docs</code></pre></article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>