D3 Object Charts

1. Prerequisites

Make sure the following packages are installed on your machine:

• Node.js
• npm

2. Save NPM package as a project dependency

Within the root directory of your project run:

$ npm i -S d3-object-charts

3. Import graph

Import a graph of your choice into app:

import SimpleSlider from 'd3-object-charts/src/slider/simple_slider';

4. Instantiate graph class

See examples for the graph to find out about available parameters.

                const simple_slider = new SimpleSlider({
                  container: '#simple-slider',
                  tick_labels: {
                    0: '0%',
                    50: '50%',
                    100: '100%'
                  },
                  onChange: function(new_value) {
                    console.log('new_value', new_value);
                  }
                });
                simple_slider.drawData({
                  abs_min: 0,
                  abs_max: 100,
                  current_value: 30
                });
              

5. Make sure container exists

Create the container specified as `container` parameter in your template:

                <div id="simple-slider"></div>
              

1. Prerequisites

Make sure the following packages are installed on your machine:

• Node.js
• npm

2. Download GitHub repository:

$ git clone git@github.com:arbolista-dev/d3-object-charts.git

3. Install dependencies

$ npm i

4. Instantiate graph class in src/main.js

See examples for the graph to find out about available parameters.

                require('./style.scss');
                import SimpleSlider from './slider/simple_slider';

                const simple_slider = new SimpleSlider({
                  container: '#simple-slider',
                  tick_labels: {
                    0: '0%',
                    50: '50%',
                    100: '100%'
                  },
                  onChange: function(new_value) {
                    console.log('new_value', new_value);
                  }
                });
                simple_slider.drawData({
                  abs_min: 0,
                  abs_max: 100,
                  current_value: 30
                });
              

5. Run build

The build will create a compiled and minified bundle:

$ gulp build

6. Embed into HTML file

                // Minified stylesheets
                <link href="dist/style.min.css" rel="stylesheet" type="text/css">
                // Minified bundle containing D3 and chart implementation
                <script charset="utf-8" src="dist/bundle.js"></script>

                // Add container div to location of choice within body
                <div id="simple-slider"></div>