Grapher

Grapher is a minimal wrapper around D3.js to do line charts, bar charts and Edward Tufte's sparklines.

Get started View code

Installation

Download the latest version of the grapher.js. You'll also need D3.js to be included before.

                                
<html>
    <body>
        <script src="/path/to/d3.v5.min.js"></script>
        <script src="/path/to/grapher.js"></script>
   </body>
</html>

Create a chart

You initiate a chart by creating a Grapher object

                            
let myGraph = new Grapher(id, options, width, height);

A Grapher object takes four arguments:

id: the DOM element that it should be bound to
options: a JSON with the configuration (see below)
width: width of the DOM element (optional if the element already has a non-null width)
height: height of the DOM element (optional if the element already has a non-null height)

You draw a chart by calling the methode .draw() myGraph.draw()

Examples

Line chart

                            
<html>
    <body>
        <div id="myGraphExample1" style="height:400px;width:auto;"></div>

        <script src="/path/to/d3.v5.min.js"></script>
        <script src="/path/to/grapher.js"></script>

        <script>
        let data = [{'date': '2020-01-01', 'value': 143},
                    {'date': '2020-01-02', 'value': 134},
                    {'date': '2020-01-03', 'value': 115},
                    {'date': '2020-01-04', 'value': 128},
                    {'date': '2020-01-05', 'value': 168}];

        let myGraphExample1 = new Grapher('myGraphExample1',
                                  {"data": data,
                                   "x": {
                                        "name": "date",
                                        "scale": "scaleTime",
                                        "parse": (d) => d3.timeParse('%Y-%m-%d')(d),
                                        "tickFormat": d3.timeFormat("%d/%m/%y"),
                                        "label": "Date"
                                    },
                                    "y": {
                                        "name": "value",
                                        "tickFormat": d3.format('.3s'),
                                        "label": "Glucose"
                                    },
                                    "type": "dotted-line",
                                    });
        myGraphExample1.draw()
        </script>
   </body>
</html>

Bar chart

                            
        let data = [{"value":3,"Country/Region":"France","date":"2020-01-21T23:00:00.000Z"},
                    {"value":1,"Country/Region":"France","date":"2020-01-22T23:00:00.000Z"},
                    {"value":4,"Country/Region":"France","date":"2020-01-23T23:00:00.000Z"},
                    {"value":7,"Country/Region":"France","date":"2020-01-24T23:00:00.000Z"},
                    {"value":-3,"Country/Region":"Italy","date":"2020-01-21T23:00:00.000Z"},
                    {"value":3,"Country/Region":"Italy","date":"2020-01-22T23:00:00.000Z"},
                    {"value":4,"Country/Region":"Italy","date":"2020-01-23T23:00:00.000Z"},
                    {"value":10,"Country/Region":"Italy","date":"2020-01-24T23:00:00.000Z"}];

        let myGraphExample2 = new Grapher('myGraphExample1',
                                  {"data": data,
                                   "x": {
                                        "name": "date",
                                        "scale": "scaleTime",
                                        "parse": (d) => new Date(d),
                                        "tickFormat": d3.timeFormat("%d/%m/%y"),
                                        "label": "Date"
                                    },
                                    "y": {
                                        "name": "value",
                                    },
                                    "category": {
                                        "name": "Country/Region",
                                    },
                                    "type": "bar",
                                    });
        myGraphExample2.draw()

Sparkline

                            
        let mySparkline = new Grapher("mySparkline",
                                       {"data": dataSpark,
                                        "x": {
                                            "name": "date",
                                            "parse": (d) => d3.timeParse('%Y-%m-%d')(d),
                                        },
                                        "y": {
                                            "name": "value",
                                            "tickFormat": d3.format('.3s'),
                                            "label": "Glucose"
                                        },
                                        "type": "sparkline",
                                        "sparkline": {
                                            "range": [82, 180]
                                        }
                                       },
                                       150,
                                       25
         );
         mySparkline.draw();

This an example of the famous Edward Tufte's sparkline:

Documentation

View documentation at https://louisdecharson.github.io/Grapher/