D3 Object Charts

This is a collection of unconventional D3 charts that aren't typically included in D3 graphing libraries such as C3, available as ES6 classes.

View NPM package View source

Usage

The graphs from this library can easily be embedded after being instantiated.
You got two options:

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>
              

Examples of available charts

This is a showcase of the D3 visualization components implemented as objects.

Calendar grid chart

Grid chart showing one month per row. Displays the y values in different opacities of a color tone. Higher values equal a darker color.

View options »


Range slider

Slider to update the data range (integer or date) dynamically. The range selection (minimum and maximum) is instantly provided as an output.

View options »


Simple slider

Slider with single handle that slides continuously.

View options »


Snap slider

Slider with one handle that will snap to values provided as labels.

View options »


Comparative pie

Nest a standard pie chart within another circle, whose circumference intersects at bottom left corner of graph.

View example code »


Overlap Bar

Similar to a stacked bar chart, but bars all start at 0, so you can style some bars to be transparent and provide an overlapped comparative view.

View example code »


Stacked Bar-Chart

Stacks a series of data into a column. Optionally shows the title and value of the dataset on hover / touch.

View example code »

Contact

Interested in an application that integrates D3 charts?
Get in touch with us.

We are a group of three developers pooling over 15 years of web development experience working side by side in Mexico City. This provides us the opportunity to develop shared processes and tools for efficient and quality development - a significant advantage over individual freelancing. Currently, we are focused on development of web API services (in Ruby, Golang, and Node), as well as frontend Javascript development, mostly with with ReactJs.

Write us »