Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

Overview

roughViz.js
npm version npm bundle size (version)

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy.

roughViz.js

Why?

Use these charts where the communication goal is to show intent or generality, and not absolute precision. Or just because they're fun and look weird.

Features

Chart Types (more to come!)

Apply the features of roughjs to each chart:

roughness:

roughness examples

fillStyle fillStyle examples

fillWeight fillStyle examples

As well as additional chart-specific options (see API below)

Installation

Via CDN (expose the roughViz global in html):

<script src="https://unpkg.com/[email protected]"></script>

Via npm:

npm install rough-viz

Want to use with React? There's a wrapper!:

npm install react-roughviz

Want to use with Vue? There's a wrapper!:

npm install vue-roughviz

Want to use it with Python? Go crazy:

pip install py-roughviz

How to use

Create some container elements, one for each chart:

<!--you can name each id whatever you want -->
<div id="viz0"></div>
<div id="viz1"></div>

In the javascript, just create charts, referencing the desired container:

// create Bar chart from csv file, using default options
 new roughViz.Bar({
    element: '#viz0', // container selection
    data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv',
    labels: 'flavor',
    values: 'price'
});

// create Donut chart using defined data & customize plot options
new roughViz.Donut(
  {
    element: '#viz1',
    data: {
      labels: ['North', 'South', 'East', 'West'],
      values: [10, 5, 8, 3]
    },
    title: "Regions",
    width: window.innerWidth / 4,
    roughness: 8,
    colors: ['red', 'orange', 'blue', 'skyblue'],
    stroke: 'black',
    strokeWidth: 3,
    fillStyle: 'cross-hatch',
    fillWeight: 3.5,
  }
);

API

roughViz.Bar

Required

  • element [string]: Id or class of container element.

  • data: Data with which to construct chart. Can be either an object or string.

    • If object: must contain labels and values keys:
    new roughViz.Bar({
       element: '.viz',
       data: {labels: ['a', 'b'], values: [10, 20]}
     })
    • If string: must be a path/url to a csv or tsv, and you must also specify the labels and values as separate attributes that represent columns in said file:
    new roughViz.Bar({
      element: '#viz0',
      data: 'stringToDataUrl.csv',
      labels: 'nameOfLabelsColumn',
      values: 'nameOfValuesColumn',
    })

Optional

  • axisFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • axisRoughness [number]: Roughness for x & y axes. Default: 0.5.
  • axisStrokeWidth [number]: Stroke-width for x & y axes. Default: 0.5.
  • bowing [number]: Chart bowing. Default: 0.
  • color [string]: Color for each bar. Default: 'skyblue'.
  • fillStyle [string]: Bar fill-style. Should be one of fillStyles shown above.
  • fillWeight [number]: Weight of inner paths' color. Default: 0.5.
  • font: Font-family to use. You can use 0 or gaegu to use Gaegu, or 1 or indie flower to use Indie Flower. Or feed it something else. Default: Gaegu.
  • highlight [string]: Color for each bar on hover. Default: 'coral'.
  • innerStrokeWidth [number]: Stroke-width for paths inside bars. Default: 1.
  • interactive [boolean]: Whether or not chart is interactive. Default: true.
  • labelFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • margin [object]: Margin object. Default: {top: 50, right: 20, bottom: 70, left: 100}
  • padding [number]: Padding between bars. Default: 0.1.
  • roughness [number]: Roughness level of chart. Default: 1.
  • simplification [number]: Chart simplification. Default 0.2.
  • stroke [string]: Color of bars' stroke. Default: black.
  • strokeWidth [number]: Size of bars' stroke. Default: 1.
  • title [string]: Chart title. Optional.
  • titleFontSize [string]: Font-size for chart title. Default: '1rem'.
  • tooltipFontSize [string]: Font-size for tooltip. Default: '0.95rem'.
  • xLabel [string]: Label for x-axis.
  • yLabel [string]: Label for y-axis.

roughViz.BarH

Required

  • element [string]: Id or class of container element.

  • data: Data with which to construct chart. Can be either an object or string.

    • If object: must contain labels and values keys:
    new roughViz.BarH({
       element: '.viz',
       data: {labels: ['a', 'b'], values: [10, 20]}
     })
    • If string: must be a path/url to a csv or tsv, and you must also specify the labels and values as separate attributes that represent columns in said file:
    new roughViz.BarH({
      element: '#viz0',
      data: 'stringToDataUrl.csv',
      labels: 'nameOfLabelsColumn',
      values: 'nameOfValuesColumn',
    })

Optional

  • axisFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • axisRoughness [number]: Roughness for x & y axes. Default: 0.5.
  • axisStrokeWidth [number]: Stroke-width for x & y axes. Default: 0.5.
  • bowing [number]: Chart bowing. Default: 0.
  • color [string]: Color for each bar. Default: 'skyblue'.
  • fillStyle [string]: Bar fill-style. Should be one of fillStyles shown above.
  • fillWeight [number]: Weight of inner paths' color. Default: 0.5.
  • font: Font-family to use. You can use 0 or gaegu to use Gaegu, or 1 or indie flower to use Indie Flower. Or feed it something else. Default: Gaegu.
  • highlight [string]: Color for each bar on hover. Default: 'coral'.
  • innerStrokeWidth [number]: Stroke-width for paths inside bars. Default: 1.
  • interactive [boolean]: Whether or not chart is interactive. Default: true.
  • labelFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • margin [object]: Margin object. Default: {top: 50, right: 20, bottom: 70, left: 100}
  • padding [number]: Padding between bars. Default: 0.1.
  • roughness [number]: Roughness level of chart. Default: 1.
  • simplification [number]: Chart simplification. Default 0.2.
  • stroke [string]: Color of bars' stroke. Default: black.
  • strokeWidth [number]: Size of bars' stroke. Default: 1.
  • title [string]: Chart title. Optional.
  • titleFontSize [string]: Font-size for chart title. Default: '1rem'.
  • tooltipFontSize [string]: Font-size for tooltip. Default: '0.95rem'.
  • xLabel [string]: Label for x-axis.
  • yLabel [string]: Label for y-axis.

roughViz.Donut

Required

  • element [string]: Id or class of container element.

  • data: Data with which to construct chart. Can be either an object or string.

    • If object: must contain labels and values keys:
    new roughViz.Donut({
       element: '.viz',
       data: {labels: ['a', 'b'], values: [10, 20]}
     })
    • If string: must be a path/url to a csv, json, or tsv, and you must also specify the labels and values as separate attributes that represent columns in said file:
    new roughViz.Donut({
      element: '#viz0',
      data: 'stringToDataUrl.csv',
      labels: 'nameOfLabelsColumn',
      values: 'nameOfValuesColumn',
    })

Optional

  • bowing [number]: Chart bowing. Default: 0.
  • colors [array]: Array of colors for each arc. Default: ['coral', 'skyblue', '#66c2a5', 'tan', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', 'tan', 'orange'].
  • fillStyle [string]: Bar fill-style. Should be one of fillStyles shown above.
  • fillWeight [number]: Weight of inner paths' color. Default: 0.85.
  • font: Font-family to use. You can use 0 or gaegu to use Gaegu, or 1 or indie flower to use Indie Flower. Or feed it something else. Default: Gaegu.
  • highlight [string]: Color for each arc on hover. Default: 'coral'.
  • innerStrokeWidth [number]: Stroke-width for paths inside arcs. Default: 0.75.
  • interactive [boolean]: Whether or not chart is interactive. Default: true.
  • legend [boolean]: Whether or not to add legend. Default: 'true'.
  • legendPosition [string]: Position of legend. Should be either 'left' or 'right'. Default: 'right'.
  • margin [object]: Margin object. Default: {top: 50, right: 20, bottom: 70, left: 100}
  • padding [number]: Padding between bars. Default: 0.1.
  • roughness [number]: Roughness level of chart. Default: 1.
  • simplification [number]: Chart simplification. Default 0.2.
  • strokeWidth [number]: Size of bars' stroke. Default: 1.
  • title [string]: Chart title. Optional.
  • titleFontSize [string]: Font-size for chart title. Default: '1rem'.
  • tooltipFontSize [string]: Font-size for tooltip. Default: '0.95rem'.

roughViz.Line

Required

  • element [string]: Id or class of container element.
  • data: Must be a path/url to a csv or tsv, and you must also specify the each y as separate attributes that represent columns in said file. Each attribute prefaced with y (except yLabel) will receive its own line:
    new roughViz.Line({
      element: '#viz0',
      data: 'https://raw.githubusercontent.com/jwilber/random_data/master/profits.csv',
      y1: 'revenue',
      y2: 'cost',
      y3: 'profit'
    })

Optional

  • axisFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • axisRoughness [number]: Roughness for x & y axes. Default: 0.5.
  • axisStrokeWidth [number]: Stroke-width for x & y axes. Default: 0.5.
  • bowing [number]: Chart bowing. Default: 0.
  • circle [boolean]: Whether or not to add circles to chart. Default: true.
  • circleRadius [number]: Radius of circles. Default: 10.
  • circleRoughness [number]: Roughness of circles. Default: 2.
  • colors [array or string]: Array of colors for each arc. Default: ['coral', 'skyblue', '#66c2a5', 'tan', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', 'tan', 'orange']. If string (e.g. 'blue'), all circles will take that color.
  • fillStyle [string]: Bar fill-style. Should be one of fillStyles shown above.
  • fillWeight [number]: Weight of inner paths' color. Default: 0.5.
  • font: Font-family to use. You can use 0 or gaegu to use Gaegu, or 1 or indie flower to use Indie Flower. Or feed it something else. Default: Gaegu.
  • interactive [boolean]: Whether or not chart is interactive. Default: true.
  • labelFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • legend [boolean]: Whether or not to add legend. Default: true.
  • legendPosition [string]: Position of legend. Should be either 'left' or 'right'. Default: 'right'.
  • margin [object]: Margin object. Default: {top: 50, right: 20, bottom: 70, left: 100}
  • roughness [number]: Roughness level of chart. Default: 1.
  • simplification [number]: Chart simplification. Default 0.2.
  • stroke [string]: Color of lines' stroke. Default: this.colors.
  • strokeWidth [number]: Size of lines' stroke. Default: 1.
  • title [string]: Chart title. Optional.
  • titleFontSize [string]: Font-size for chart title. Default: '0.95rem'.
  • tooltipFontSize [string]: Font-size for tooltip. Default: '0.95rem'.
  • xLabel [string]: Label for x-axis.
  • yLabel [string]: Label for y-axis.

roughViz.Pie

Required

  • element [string]: Id or class of container element.

  • data: Data with which to construct chart. Can be either an object or string.

    • If object: must contain labels and values keys:
    new roughViz.Pie({
       element: '.viz',
       data: {labels: ['a', 'b'], values: [10, 20]}
     })
    • If string: must be a path/url to a csv, json, or tsv, and you must also specify the labels and values as separate attributes that represent columns in said file:
    new roughViz.Pie({
      element: '#viz0',
      data: 'stringToDataUrl.csv',
      labels: 'nameOfLabelsColumn',
      values: 'nameOfValuesColumn',
    })

Optional

  • bowing [number]: Chart bowing. Default: 0.
  • colors [array]: Array of colors for each arc. Default: ['coral', 'skyblue', '#66c2a5', 'tan', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', 'tan', 'orange'].
  • fillStyle [string]: Bar fill-style. Should be one of fillStyles shown above.
  • fillWeight [number]: Weight of inner paths' color. Default: 0.85.
  • font: Font-family to use. You can use 0 or gaegu to use Gaegu, or 1 or indie flower to use Indie Flower. Or feed it something else. Default: Gaegu.
  • highlight [string]: Color for each arc on hover. Default: 'coral'.
  • innerStrokeWidth [number]: Stroke-width for paths inside arcs. Default: 0.75.
  • interactive [boolean]: Whether or not chart is interactive. Default: true.
  • legend [boolean]: Whether or not to add legend. Default: true.
  • legendPosition [string]: Position of legend. Should be either 'left' or 'right'. Default: 'right'.
  • margin [object]: Margin object. Default: {top: 50, right: 20, bottom: 70, left: 100}
  • padding [number]: Padding between bars. Default: 0.1.
  • roughness [number]: Roughness level of chart. Default: 1.
  • simplification [number]: Chart simplification. Default 0.2.
  • strokeWidth [number]: Size of bars' stroke. Default: 1.
  • title [string]: Chart title. Optional.
  • titleFontSize [string]: Font-size for chart title. Default: '1rem'.
  • tooltipFontSize [string]: Font-size for tooltip. Default: '0.95rem'.

roughViz.Scatter

Required

  • element [string]: Id or class of container element.

  • data: Data with which to construct chart. Can be either an object or string.

    • If object: must contain x and y keys:
    new roughViz.Scatter({
       element: '.viz',
       data: {x: [1, 2, 35], y: [10, 20, 8]}
     })
    • If string: must be a path/url to a csv or tsv, and you must also specify the x and y as separate attributes that represent columns in said file:
    new roughViz.Scatter({
      element: '#viz0',
      data: 'stringToDataUrl.csv',
      x: 'nameOfLabelsColumn',
      y: 'nameOfValuesColumn',
    })

Optional

  • axisFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • axisRoughness [number]: Roughness for x & y axes. Default: 0.5.
  • axisStrokeWidth [number]: Stroke-width for x & y axes. Default: 0.5.
  • bowing [number]: Chart bowing. Default: 0.
  • colors [array or string]: Array of colors for each arc. Default: ['coral', 'skyblue', '#66c2a5', 'tan', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', 'tan', 'orange']. If string (e.g. 'blue'), all circles will take that color.
  • colorVar [string]: If input data is csv or tsv, this should be an ordinal column with which to color points by. curbZero [boolean]: Whether or not to force (x, y) axes to (0, 0). Default: false.
  • fillStyle [string]: Bar fill-style. Should be one of fillStyles shown above.
  • fillWeight [number]: Weight of inner paths' color. Default: 0.5.
  • font: Font-family to use. You can use 0 or gaegu to use Gaegu, or 1 or indie flower to use Indie Flower. Or feed it something else. Default: Gaegu.
  • highlight [string]: Color for each bar on hover. Default: 'coral'.
  • highlightLabel [string]: If input data is csv or tsv, this should be a column representing what value to display on hover. Otherwise, (x, y) values will be shown on hover.
  • innerStrokeWidth [number]: Stroke-width for paths inside circles. Default: 1.
  • interactive [boolean]: Whether or not chart is interactive. Default: true.
  • labelFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • margin [object]: Margin object. Default: {top: 50, right: 20, bottom: 70, left: 100}
  • radius [number]: Circle radius. Default: 8.
  • roughness [number]: Roughness level of chart. Default: 1.
  • simplification [number]: Chart simplification. Default 0.2.
  • stroke [string]: Color of circles' stroke. Default: black.
  • strokeWidth [number]: Size of circles' stroke. Default: 1.
  • title [string]: Chart title. Optional.
  • titleFontSize [string]: Font-size for chart title. Default: '0.95rem'.
  • tooltipFontSize [string]: Font-size for tooltip. Default: '0.95rem'.
  • xLabel [string]: Label for x-axis.
  • yLabel [string]: Label for y-axis.

roughViz.StackedBar

Required

  • element [string]: Id or class of container element.

  • data: Data with which to construct chart. Should be an object.

  • labels: String name of label key in data object.

    new roughViz.StackedBar({
       element: '#vis0',
       data: [
           {month:'Jan', A:20, B: 5},
           {month:'Feb', A:25, B: 10},    
       ],
       labels: 'month',
     })

Optional

  • axisFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • axisRoughness [number]: Roughness for x & y axes. Default: 0.5.
  • axisStrokeWidth [number]: Stroke-width for x & y axes. Default: 0.5.
  • bowing [number]: Chart bowing. Default: 0.
  • colors [string]: Array of colors for each bar grouping.
  • fillStyle [string]: Bar fill-style. Should be one of fillStyles shown above.
  • fillWeight [number]: Weight of inner paths' color. Default: 0.5.
  • font: Font-family to use. You can use 0 or gaegu to use Gaegu, or 1 or indie flower to use Indie Flower. Or feed it something else. Default: Gaegu.
  • highlight [string]: Color for each bar on hover. Default: 'coral'.
  • innerStrokeWidth [number]: Stroke-width for paths inside bars. Default: 1.
  • interactive [boolean]: Whether or not chart is interactive. Default: true.
  • labelFontSize [string]: Font-size for axes' labels. Default: '1rem'.
  • margin [object]: Margin object. Default: {top: 50, right: 20, bottom: 70, left: 100}
  • padding [number]: Padding between bars. Default: 0.1.
  • roughness [number]: Roughness level of chart. Default: 1.
  • simplification [number]: Chart simplification. Default 0.2.
  • stroke [string]: Color of bars' stroke. Default: black.
  • strokeWidth [number]: Size of bars' stroke. Default: 1.
  • title [string]: Chart title. Optional.
  • titleFontSize [string]: Font-size for chart title. Default: '1rem'.
  • tooltipFontSize [string]: Font-size for tooltip. Default: '0.95rem'.
  • xLabel [string]: Label for x-axis.
  • yLabel [string]: Label for y-axis.

Contributors

Acknowledgements

This library wouldn't be possible without the following people:

License

MIT License

Copyright (c) 2019 Jared Wilber

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Create Chart class that all charts inherit from

    Create Chart class that all charts inherit from

    Relates to: #32

    Created a super class called Chart, it has the common properties in all charts, (if I missed any please let me know and I'll add it!)

    Also added the following methods which are identical in all charts:

    • initChartValues
    • setSvg
    • resolveFont
    • resolveData
    • setTitle

    These two methods: drawFromFile and drawFromObject MUST be implemented when extending the Chart class.

    opened by laimonasA 7
  • Add prefixes for values on x and y axes

    Add prefixes for values on x and y axes

    I wanted to be able to add dollar signs to the values on the axes of my charts, so I added a general param for a string prefix to all values on the axes.

    opened by daveslutzkin 5
  • nice! didn't you run into rough.js problems with size?

    nice! didn't you run into rough.js problems with size?

    I've used rough.js in another context, and found that the roughness factor had to be set for each general range of size--for small objects, the roughness was off the charts, and for large minor, all given the same roughness factor.

    opened by cpryland 5
  • Different color bars in stacked bar

    Different color bars in stacked bar

    I messed with the example and changed the data on the 'March' row. I replaced B with D. (Perhaps March doesn't have a B) Nothing happened. I was expecting the March column (right-most) to have a different color for the D value.

    data: [
          {month:'Jan', A:20, B: 5,  C: 10},
          {month:'Feb', A:25, B: 10, C: 20},
          {month:'March', A:30, D:50, C:10}
      ],
    
    opened by peterbe 3
  • Issue 21: Create a unique color mapping for data in stacked bars.

    Issue 21: Create a unique color mapping for data in stacked bars.

    Fixes: #21

    Creates a stackColorMapping property which assigns a new colour mapping every time it sees a data element with an unseen key.


    NOTE: I have created this helper method: updateColorMapping(label), because this PR only fixes this problem when providing the data raw.

    i.e This could still be a problem when using a file so the fallback is to use the old approach.

    I couldn't figure out how this parses a .csv file.

    opened by laimonasA 2
  • Issue 28: Do not overwrite 0 values with defaults.

    Issue 28: Do not overwrite 0 values with defaults.

    Fixes issue: #28 by using lodash.get.

    Also:

    • Refactor to use roughCeiling(), a utility method which can be given an object of:
      • { roughness, ceiling, defaultValue }
    • Fixes the few minor lint issues
    opened by laimonasA 2
  • Clickable bar charts

    Clickable bar charts

    I'm using a stacked bar chart and I'd like things to happen when the user clicks bars. At the moment, a legend floats under the mouse cursor but I'd like to do more. I'd click to display information underneath the chart about the bar you clicked on.

    opened by peterbe 2
  • Fix bug with Line chart when data is an object

    Fix bug with Line chart when data is an object

    This error happened to me when using roughViz through the react wrapper. But it was fixed when i edited this line of code in roughviz itself. That's why i'm creating the PR here.

    You can reproduce the error in this sandbox: https://codesandbox.io/s/react-codesandbox-wb9ew

    The fix i suggested aligns with the format of data as you can see in other places in the same file. data = { x: [1, 2] } is supposed to be an object whose keys are in dataSource array

    opened by haikyuu 2
  • Python Wrapper

    Python Wrapper

    Hello,

    I have created a python wrapper for your library with most of the features.

    You can check it out over here: https://github.com/hannansatopay/roughviz https://pypi.org/project/roughviz/

    opened by hannansatopay 2
  • Bump tar from 4.4.8 to 4.4.15

    Bump tar from 4.4.8 to 4.4.15

    Bumps tar from 4.4.8 to 4.4.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump handlebars from 4.4.3 to 4.7.6

    Bump handlebars from 4.4.3 to 4.7.6

    Bumps handlebars from 4.4.3 to 4.7.6.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • No incompatibilities are to be expected

    Commits

    v4.7.3 - February 5th, 2020

    Chore/Housekeeping:

    • #1644 - Download links to aws broken on handlebarsjs.com - access denied (@Tea56)
    • Fix spelling and punctuation in changelog - d78cc73

    Bugfixes:

    • Add Type Definition for Handlebars.VERSION, Fixes #1647 - 4de51fe
    • Include Type Definition for runtime.js in Package - a32d05f

    Compatibility notes:

    Commits
    Maintainer changes

    This version was pushed to npm by erisds, a new releaser for handlebars since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump d3-color, d3-scale and d3-scale-chromatic

    Bump d3-color, d3-scale and d3-scale-chromatic

    Bumps d3-color to 3.1.0 and updates ancestor dependencies d3-color, d3-scale and d3-scale-chromatic. These dependencies need to be updated together.

    Updates d3-color from 1.4.0 to 3.1.0

    Release notes

    Sourced from d3-color's releases.

    v3.1.0

    v3.0.1

    • Make build reproducible.

    v3.0.0

    • Adopt type: module.

    This package now requires Node.js 12 or higher. For more, please read Sindre Sorhus’s FAQ.

    v2.0.0

    This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-color 1.x or use a transpiler.

    v1.4.1

    • Fix parsing of 4- and 8-digit hexadecimal transparent colors. #52
    Commits

    Updates d3-scale from 3.2.1 to 4.0.2

    Release notes

    Sourced from d3-scale's releases.

    v4.0.2

    • Default the base-10 log tick format to ~s instead of .0e. #255

    v4.0.1

    • Fix log.ticks to return exact values for integer bases. #253
    • Fix log.tickFormat to trim trailing zeroes by default if no precision is specified. #254

    v4.0.0

    • Adopt type: module. #246
    • Adopt InternMap for ordinal scale domains. #235
    • Update dependencies.
    • Make build reproducible.

    This package now requires Node.js 12 or higher. For more, please read Sindre Sorhus’s FAQ.

    v3.3.0

    v3.2.4

    • Fix handling of null in quantitative scales; it is now considered an “unknown” value. #241

    v3.2.3

    v3.2.2

    Commits

    Updates d3-scale-chromatic from 1.5.0 to 3.0.0

    Release notes

    Sourced from d3-scale-chromatic's releases.

    v3.0.0

    • Adopt type: module.
    • Update dependencies.
    • Make build reproducible.

    This package now requires Node.js 12 or higher. For more, please read Sindre Sorhus’s FAQ.

    v2.0.0

    This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-scale-chromatic 1.x or use a transpiler.

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ajv from 6.10.2 to 6.12.6

    Bump ajv from 6.10.2 to 6.12.6

    Bumps ajv from 6.10.2 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Jared Wilber
into skating, surfing, coding 🌴 - currently not coding much bc of rsi issues but be back soon :)
Jared Wilber
Create graphics with a hand-drawn, sketchy, appearance

Rough.js Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw

Rough 17.8k Dec 30, 2022
A friendly reusable charts DSL for D3

D4 D4 is a friendly charting DSL for D3. The goal of D4 is to allow developers to quickly build data-driven charts with little knowledge of the intern

Mark Daggett 429 Dec 5, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
Chart.js module for creating treemap charts

chartjs-chart-treemap Chart.js v3.6.0 module for creating treemap charts. Implementation for Chart.js v2 is in 2.x branch Documentation You can find d

Jukka Kurkela 99 Dec 18, 2022
A framework for building reusable components with d3.js

Koto A framework for creating reusable charts with D3.js, written in ES6. Introduction KotoJS is HEAVILY inspired by another reusable charting framewo

KotoJS 280 Dec 23, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Synchro Charts Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data. You can learn m

Amazon Web Services - Labs 60 Dec 29, 2022
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
Attractive JavaScript charts for jQuery

flot About flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/ Take a look

Flot 5.9k Dec 22, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023