A library optimized for concise and principled data graphics and layouts.

Overview

BundlePhobia CodeClimate Netlify Status

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce common types of graphics in a principled and consistent way. The library currently supports line charts, scatterplots and histograms, as well as features like rug plots.

Example

All you need to do is add an entry node to your document:

<div id="chart"></div>

Then, use the id to mount the chart:

import LineChart from 'metrics-graphics'

new LineChart({
  data, // some array of data objects
  width: 600,
  height: 200,
  target: '#chart',
  area: true,
  xAccessor: 'date',
  yAccessor: 'value'
})

That's it!

Sample Screenshot

The raw data for this example can be found here

Documentation

If you want to use MetricsGraphics, you can find the public API here.

If you want to extend MetricsGraphics, you can read up on the components and utilities.

Development Setup

This project uses Lerna. Installing it globally helps a lot (npm i -g lerna).

# clone and setup
git clone https://github.com/metricsgraphics/metrics-graphics
cd metrics-graphics
lerna bootstrap

Run both the development setup of the library and the development setup of the examples

# inside packages/lib
npm run dev

# inside packages/examples
npm run dev
Comments
  • Modernizing MetricsGraphics

    Modernizing MetricsGraphics

    Hi all! First of all, this PR is currently not intended to be merged. I'm still working on it (and it will take some while until a stable state is reached). I just wanted some input.

    As @wlach pointed out in his blogpost from September 2019, MetricsGraphics is currently unmaintained. Also, there are some general problems with the current state of the codebase:

    • it is written in "old" JavaScript, lots of code can be heavily simplified (see also #902 )
    • "old" tooling is used (jshint et al). Both the codebase and the artifacts could be optimized using things like Webpack and ESLint (see also #860, #903)
    • testing is in bad shape (see #845)

    Because MetricsGraphics was one of the things that really got me into data visualization, I started modernizing the codebase on my fork. The following things are done:

    • All dependencies updated
    • renovated gulp tasks
    • Migrated to ESLint
    • Using Webpack to build umd2 modules
    • Correctly re-build on changes, both library and examples
    • Correctly included the styling files (which were kind of broken on master)

    The next steps are:

    • untangle remaining side-effects, isolate things like axes and lines in classes
    • split up MG.data_graphic into multiple classes, one per chart type
    • write new tests, document changes to the APIs
    • make sure that no functionality of the old version is lost :relaxed:

    These changes are obviously breaking. An example chart changes from

        MG.data_graphic({
            title: "UFO Sightings",
            description: "Yearly UFO sightings from the year 1945 to 2010.",
            data: data,
            width: 650,
            height: 150,
            target: '#ufo-sightings',
            x_accessor: 'year',
            y_accessor: 'sightings',
            markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}]
        })
    

    to

        new LineChart({
            data,
            width: 600,
            height: 200,
            target: '#ufo-sightings',
            xAccessor: 'year',
            yAccessor: 'sightings',
            markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}]
        })
    

    My main question is: Is there any interest in such a breaking overhaul of the library? If there is, great! If not, I'll continue working on my own fork.

    opened by jens-ox 43
  • incorporated mg-line-brushing-extension : Fixes #790

    incorporated mg-line-brushing-extension : Fixes #790

    As suggested by @wlach and developed originally by @dandehavilland, the mg-line-brushing extension has been included directly into the metrics-graphics directory.

    Fixes #790

    Here's a preview

    Before (holding and dragging through the graph)

    brushinginitial

    After (holding and dragging through the graph)

    brushing

    Please review @wlach

    opened by shikhar-scs 30
  • When there are more than 5 lines, line 6 an up are invisible

    When there are more than 5 lines, line 6 an up are invisible

    Steps to reproduce

    Download and open this HTML document

    Actual result

    The final 5 lines (in this case, the top-most 5 lines) are invisible. Hovering over them does cause a black circle to appear, however.

    Expected result

    All lines are colored. d3 has something that looks like it could help with this. As a last resort, if there are any lines that can't be assigned a color, having multiple black lines would be better than having insible lines.

    enhancement 
    opened by openjck 15
  • handling dataset of length 1

    handling dataset of length 1

    I'm using metrics graphics to show how many products were consumed by a user on a given date. When the users has only consumed on one date, the graph is missing an the console shows the following error message :

    TypeError: args.data[0][0] is undefined

    I think either metrics-graphics should support datasets of length 1, or this error message should replaced with something higher level, like

    metrics-graphics does currently not support datasets of length 1

    opened by greg0ire 15
  • bug: Lines with only one value are invisible in line char (thougn dots are shown on activating)

    bug: Lines with only one value are invisible in line char (thougn dots are shown on activating)

    I suggest to show dots for such lines permanently. Additional problem: if there is only one line with a single point - that point is really hard to show: cursor must be on exact same x-coordinate as point to view it.

    bug 
    opened by blazkovicz 14
  • Moved folder structure

    Moved folder structure

    This is a v2.0 milestone to create a more consistent directory structure for the project as described in: https://github.com/mozilla/metrics-graphics/issues/262

    There were no actual code changes, however, paths were updated to work with the new separate folders. In the demo files I removed a path to metricsgraphics-layout.css that has a 404 in production.

    I also created specs, gulp, and scss folders. Those will be updated in future tickets.

    I made a couple of small additions to the package.json to allow for future npm use. As well as an index.js file. That will be valuable if we can migrate the library to be commonjs/amd compatible.

    Let me know if you want me to set the PR to a v2 branch or anything...

    Hope it helps.

    opened by seethroughdev 14
  • There is currently no default formatting for time series < 1 day (hours, minutes, seconds, etc.)

    There is currently no default formatting for time series < 1 day (hours, minutes, seconds, etc.)

    Needs to be a way to show data and group it by less than the day. Or to have a string value on the X Axis to be displayed by.

    As an example, if you want to give a single 6 hour window of data grouped by every 30 minutes, you can't do that with the library today.

    enhancement 
    opened by jdarling 14
  • basic brushing and zooming feature for line chart and point chart

    basic brushing and zooming feature for line chart and point chart

    This basically implements the brushing and zooming feature like mg-line-brushing. It may be not ready to be merged into master branch. But I hope to share some problems I found and to get some suggestions.

    Some difference with the addons

    • I take a more independent approach to this feature and decompose it into some functions for easier to control. I add two options to allow the user to use this feature. If not set will not have any effect on the original function.
    • Compared with addons, I will add the brushing function when the chart's initialization function be called and directly use the descriptor to redraw the chart for avoiding repeated call hooks.

    Some problems

    For the line chart, we need not to filter the data out of range in order to ensure the integrity of the line. But for the point chart, we should drop those data out of range, if not there will be some points drawn outside the chart because of the different ways of drawing. I tried to filter them in the mainPlot method in point.js but the axis will still be drawn. So I filter the data when the chart type is point. I don’t know if this is appropriate?

    Because different types of charts are drawn in different ways, some changes need to be made for them. Do I need to support this function for other charts except line and point?

    I largely borrowed code of the addons, so that some operations I'm not sure whether it has the right effect. Such as convert mouse selection range to data domain and set the range of selection graphic.

    Here is my effect on manual testing of some data. 201805041216561525364216594_small

    201805041218561525364336124_small

    Now I only added brush and zoom_target. This is enough to restrict brushing axis and add an overview plot. Should I add more options or is there any better option?

    For setting a zooming target chart, I don't know how to do it better. The way I am now taking is to set an args as a variable and set it to another option. Like following way. Are there any better ways?

    const main = {
      title: "UFO Sightings",
      description: "Yearly UFO sightings from 1945 to 2010.",
      data: JSON.parse(document.querySelector('.data textarea').value),
      markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}],
      width: 400,
      height: 250,
      target: ".result",
      x_accessor: "year",
      y_accessor: "sightings",
      brush: 'x',
    }
    MG.data_graphic(main);
    MG.data_graphic({
      data: JSON.parse(document.querySelector('.data textarea').value),
      width: 400,
      height: 150,
      target: ".overview",
      x_accessor: "year",
      y_accessor: "sightings",
      brush: 'x',
      zoom_target: main,
      x_axis: false,
      y_axis: false,
      show_rollover_text: false,
    });
    
    opened by cnwangjie 13
  • Exception when same params object is used to call MG.data_graphic multiple times

    Exception when same params object is used to call MG.data_graphic multiple times

    Tried out the new option and it breaks for me with this message.

    [Error] Error: undefined is not a function (evaluating 'n.getMinutes()')
    M@http://localhost:9000/vendor/d3/d3.min.js:1:31145
    t@http://localhost:9000/vendor/d3/d3.min.js:1:14408
    http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1522:57
    http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1606:64
    http://localhost:9000/vendor/d3/d3.min.js:3:12215
    http://localhost:9000/vendor/d3/d3.min.js:3:14541
    Y@http://localhost:9000/vendor/d3/d3.min.js:1:4475
    each@http://localhost:9000/vendor/d3/d3.min.js:3:14513
    text@http://localhost:9000/vendor/d3/d3.min.js:3:12169
    mg_add_x_tick_labels@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1605:26
    x_axis@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1304:29
    init@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:2373:19
    line@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:3091:18
    data_graphic@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:222:24
    redraw@http://localhost:9000/scripts/directives/chart.js:126:36
    http://localhost:9000/scripts/directives/chart.js:178:23
    http://localhost:9000/vendor/angular/angular.min.js:122:292
    $digest@http://localhost:9000/vendor/angular/angular.min.js:123:358
    $apply@http://localhost:9000/vendor/angular/angular.min.js:126:300
    http://localhost:9000/vendor/angular/angular.min.js:90:366
    (anonyme Funktion) (angular.min.js, line 102)
    (anonyme Funktion) (angular.min.js, line 76)
    $digest (angular.min.js, line 124)
    $apply (angular.min.js, line 126)
    (anonyme Funktion) (angular.min.js, line 90)
    

    Used data structure is:

    realtime: {
                data: [
                     {
                           date: new Date(),
                           value: Math.random() * (100 - 0) + 0
                     },
                     ...
                ],
                options: {
                    description: 'New data is shown as it comes in',
                    title: 'Realtime updates',
                    x_accessor: 'date',
                    y_accessor: 'value',
                    max_y: 120,
                    xax_start_at_min: true,
                    transition_on_update: true,
                    y_extended_ticks: true,
                    interpolate: 'linear'
                }
            }
    

    You can checkout this branch where it is demonstrated.

    bug 
    opened by reppners 12
  • Linked minutes

    Linked minutes

    It seems as it isn't possible to have linked graphs on anything other than days, due to the hardcoded parsing for dates. This PR adds possibility to override this format, and thus being able to do linked hover on self defined granularity.

    This PR also adds convenience npm scripts for building and testing:

    $ npm run build
    
    $ npm test
    

    This makes it so that gulp doesn't have to be installed globally and thus makes it easier to have different gulp version across different projects.

    opened by mikaelbr 12
  • Added rollout_callback, inverse of rollover_callback

    Added rollout_callback, inverse of rollover_callback

    This is something I would find very useful as I'm displaying a custom rollover panel and would like to hide that on rollout.

    If this is something you'd consider adding to the core, please let me know and I can add to the documentation.

    (Also trimmed excess whitespace)

    opened by dandehavilland 12
  • Enable discussions tab on this repo

    Enable discussions tab on this repo

    How about enabling the discussions tab on this repo, and move any "Stackoverflow" kind of issue there? That way it's easy to cleanup old issues by closing them, or moving them.

    As an aside, I'd also go through and close most old issues. It's easy for issues to grow into an infinite backlog.

    opened by sandstrom 0
  • Playground

    Playground

    I noticed in the new site there was no longer a playground to play around with the graphs and the API.

    I made one for personal use here: Visualize. (Source).

    Wondering how you feel about linking to this? :) (Or if you had other plans for this, would love to know and help out if possible).

    opened by rishabhsingh8 0
  • Weird 'turns' and discontinuous lines

    Weird 'turns' and discontinuous lines

    My graph looks like this

    afbeelding

    How can I avoid the line going 'backwards' and making that nice round turn "to the left" ? My data is below. The data points are not evenly distributed so I understand why this is happening. I just want it to stop from happening.

    No weird configuration. I just set min_y and max_y to some values closer to the max and min values to show the problem.

    Related: is there a way to make data points always visible?

           "2021-02-26 09:08:58" => 74,
           "2021-02-27 12:15:02" => 73,
           "2021-02-27 12:15:05" => 74,
           "2021-02-27 13:15:05" => 73,
           "2021-02-27 13:20:02" => 74,
           "2021-02-28 15:05:02" => 74,
           "2021-02-28 16:20:02" => 75,
           "2021-02-28 16:30:02" => 76,
           "2021-03-08 14:20:02" => 76,
           "2021-03-09 20:05:02" => 77,
           "2021-03-10 08:25:02" => 77,
           "2021-03-14 21:05:02" => 77,
           "2021-03-15 14:15:02" => 77,
           "2021-04-01 10:05:02" => 77,
           "2021-04-01 11:30:04" => 77,
           "2021-04-01 11:35:02" => 77,
    

    Another example:

    afbeelding

           "2021-02-26 09:08:58" => 195,
           "2021-02-27 12:15:02" => 195,
           "2021-02-27 12:15:05" => 195,
           "2021-02-27 13:15:05" => 195,
           "2021-02-27 13:20:02" => 195,
           "2021-02-28 15:05:02" => 196,
           "2021-02-28 16:20:02" => 196,
           "2021-02-28 16:30:02" => 196,
           "2021-03-08 14:20:02" => 195,
           "2021-03-09 20:05:02" => 195,
           "2021-03-10 08:25:02" => 196,
           "2021-03-14 21:05:02" => 197,
           "2021-03-15 14:15:02" => 196,
           "2021-04-01 10:05:02" => 197,
           "2021-04-01 11:30:04" => 198,
           "2021-04-01 11:35:02" => 197,
    
    opened by o7n 0
  • Touch support

    Touch support

    I am using the mouseover parameter to trigger things. This does not behave as nicely on mobile, I only get a click equivalent, and no hover effect when I drag my finger across the graph.

    Any way round this?

    Thanks, Peter

    opened by ppp-one 0
  • How to make an action on the graph click?

    How to make an action on the graph click?

    I need to get data from the point of the graph on click on it, then make an action with it. Please, help to find the right way to do it. Is it possible in MetricsGraphics.js?

    Thanks.

    opened by igorpronin 1
  • Histogram overlaid on line/area graph?

    Histogram overlaid on line/area graph?

    Hi there! Wonderful library - digging into it now and liking what I see so far.

    I see that there's a way to do multiple lines/areas by way of multiple series in the passed data object. I also see that one can do "chart_type: 'histogram'" to get time series data in histogram format.

    Is it possible to do a line together with a histogram, in one plot? The use case would be plotting cumulative counts of certain groupings of data with area, and then having a day-binned histogram overlaid on top.

    Thanks so much!

    Cheers, Rico

    opened by Datamance 1
Releases(v3.0.0-beta1)
  • v3.0.0-beta1(May 19, 2022)

  • v2.11.0(Dec 10, 2016)

    MG v2.11 closes 10 issues. Highlights include:

    • Support for server-side rendering of charts
    • Fixes an issue with marker labels on the edges of a dataset not appearing
    • Fixes an issue with titles not appearing for missing charts
    • Fixes an issue with incorrectly generated axis labels for some data ranges

    Please refer to the v2.11 milestone for further details.

    Thanks to @benwiley4000, @Ezekiel-DA, and @phil-davis for contributions to this release.

    Source code(tar.gz)
    Source code(zip)
  • v2.10.1(Aug 17, 2016)

  • v2.10.0(Aug 2, 2016)

    MG v2.10 closes 23 issues. Highlights include:

    • Support for D3 4
    • Better support for categorical data in bars and scatterplots (see the examples)

    API changes and additions:

    • yax_units_append is a new option that allows one to append units to axis labels rather than prepend them.
    • interpolate now takes a function rather than a string.
    • interpolate_tension has been deprecated. Pass the tension value to your interpolation function instead.

    If you use the mg-brushing add-on, please see this PR. Thanks to @Ezekiel-DA for contributions to this release. And thank you all for helping MG cross 6,000 GitHub stars and 500,000 hits.

    Please refer to the v2.10 milestone for further details.

    Source code(tar.gz)
    Source code(zip)
  • v2.9.0(Apr 5, 2016)

    2.9 includes a number of bug fixes. We've begun the redesign of bar charts, though that is not complete yet.

    • x-axis now supports log scales (#624)
    • reworking how bar charts were designed. We now have custom coloring, better rollovers, and (most importantly) easy grouping mechanism. You can also either set only the bar thickness, or set the graphic dimensions and have them scale accordingly. At this point, however, bar charts are still baking in the oven, so we'll continue to keep them experimental in the meantime. More work to be done in 2.10. (#616, #602, #596, #576)
    • ironed out how rollovers work across all chart types, and unified the codebase under one set of primitives (#614)
    • fixed the issue of a single-line rollover not working when aggregate_rollover=true (#610)
    • fixed how min_y_from_data scales (#597)

    Thanks to everyone for filing issues.

    Source code(tar.gz)
    Source code(zip)
  • v2.8.0(Jan 10, 2016)

    The changes in this release are primarily internal.

    • Improved encapsulation in several modules will hopefully improve readability and afford reuse between chart types. (#555, #556, #545, #542, #541, #533)
    • The method for implementing rollover text has been expanded and generalized. It now includes several labelling options. Take a look at the examples for details.
    • The auto-formatting of x-axis labels now has sensible defaults for time series stretching many years, decades and centuries. (#521)
    • small_text has been deprecated.

    Thanks to @merlin86, @brab and @brylie for contributions to this release, and to all who reported issues and participated in discussions.

    Source code(tar.gz)
    Source code(zip)
  • v2.7.0(Oct 27, 2015)

    test1

    This is a fairly large release with a number of new features and bug fixes. Here are the highlights:

    #456 - the X and Y axes now meet at the southwest corner of the graphic, and extend to the plot limits. This came after considerable discussion and a number of issues filed where users thought our old approach created display bugs. #503 - you can now color time series individually with hex / rgb(a) / web colors, directly in MG.data_graphic. #504 - the title element is now part of the SVG. #490 - expanded the rollover formatting options substantially. Now you can change the X or Y rollover information and format independently. #436 - expanded support for European time options on the axis labels. #470 - began work toward WebAIM compliance. We've increased the opacity of the fonts, and provided an additional accessibility stylesheet. There is surely more work to be done here, and we're very pleased to have the issue brought to our attention.

    As well as a plethora of bug fixes. Please refer to the 2.7 milestone for a complete list of changes, and the examples page for updated examples.

    Thanks to all for the issues filed, and especially to @viktoraseev, @zaizhuang, @Tchanders, and @mndrake for the PRs.

    Source code(tar.gz)
    Source code(zip)
  • v2.6.0(Jul 8, 2015)

  • v2.5.0(May 22, 2015)

    This release adds the ability to easily extend the library, thanks to two improvements: looser coupling between charts and the library's core code, and the introduction of hooks. These changes are due to the wonderful work of @dandehavilland.

    For an overview of the changes, have a read through this page. You can see a sample addon in action on the examples page.

    Please refer to the 2.5 milestone for a complete list of changes and bug fixes.

    Thanks to @dstaley, @dubek and @dandehavilland for contributions to this release.

    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Apr 13, 2015)

    This release fixes a number of bugs and includes the following changes:

    • better support for lines with single data points & more intuitive multiline graphic representations (#347, #405, #406)
    • option to label multiline graphics instead of relying on legends (#277)
    • more intuitive and useful percentage formatting options (#395)
    • bug fix for full_width on the missing data graphic type (#399)
    • bug fix for multiple calls to MG.data_graphic (#401)

    For a complete list of changes, please refer to the 2.4 milestone.

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Mar 30, 2015)

    This release fixes a number of bugs and includes the following changes:

    • A revamped examples page now clearly shows the code and dataset used to generate each chart.
    • A new option called interpolate_tension allows one to mitigate a recurring issue with lines appearing jagged when the data is irregular.
    • Year markers are now off by default. A new option called show_year_markers can be set to true to turn the year markers back on.
    • A new option called xax_start_at_min modifies the auto-generated set of ticks and forces the x-axis to start at the left-most edge.

    Thanks to @stanhu for contributions to this release.

    For a complete list of changes, please refer to the 2.3 milestone.

    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Feb 26, 2015)

    This patch release fixes a number of issues

    • Custom xax_format function was being ignored (#372)
    • Bars, predictors and baselines were not redrawn correctly on update (#367, #371)
    • Aggreggate rollover tooltips weren't colored correctly in the dark theme (#369)
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Feb 16, 2015)

    This release fixes a number of bugs and includes the following changes:

    • Broken line charts, enabled by setting missing_is_hidden to true
    • The option to remove the library's dependency on jQuery, by setting show_tooltips to false. Tooltips and buttons are now the only two features that require jQuery.
    • Better handling of overlapping markers

    Thanks to @mikaelbr for contributions to this release.

    For a complete list of changes, please refer to the 2.2 milestone.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Jan 22, 2015)

    This release adds automatic time formatting, aggregate rollovers, aspect ratio preservation, a formal testing framework, and closes 25 issues. For a complete list of changes, please refer to the 2.1 milestone.

    We also just crossed 205,000 hits!

    Thanks to @dandehavilland for major contributions to this release, and to @mikaelbr, @rfk and @t2k for their PRs.

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Dec 24, 2014)

    This is a major release, with API-breaking changes. For a list of said changes, please refer to the Readme file.

    The library is now namespaced. It comes with a test suite--to which we'll be adding more tests shortly, an improved directory structure and prefixed CSS rules. We've also switched to gulp for generating builds. The release closes a total of 15 issues.

    The changes in this major release were principally due to the contributions of several people: @blazkovicz, @dandehavilland, @jimmyhchan, @seethroughtrees, @georghendrik and @NamPNQ. Thank you all.

    @hamilton and I will be taking a few days off for the holidays, following which we'll be focusing on further improving data tables and addressing several open issues for v2.1.

    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Dec 1, 2014)

    This is the first release after our major push. We are mostly incorporating bug fixes from issues and PRs. Other changes and additions include:

    • New chart type: data tables
    • DOM elements can now be passed to the target option
    • The library no longer depends on Bootstrap.js. If your website uses Bootstrap, please load it before MetricsGraphics.js
    • The layout css and dark and light themes' css is now part of the demo stylesheet rather than the library's stylesheet. This makes the library more modular.

    Thank you to the following users for their contributions to the release: @blazkovicz, @SebastianM, @garrypolley, @umtrey, @jimmyhchan, @juliuss, @mouradmourafiq, @bcherny, @grahamj

    Source code(tar.gz)
    Source code(zip)
  • V1.0.0(Nov 9, 2014)

    First public release.

    Thanks to everyone who filed bugs or otherwise contributed to the library during its pre-release phase. We closed a total of 155 issues during that time.

    Take a look at our website, newly redesigned to mark the occasion: http://metricsgraphicsjs.org

    We'll be working on v1.1 next, which we hope to release soon. It will include support for barplots, data tables and lowess, a few enhancements to line charts and several bug fixes.

    Source code(tar.gz)
    Source code(zip)
  • V0.6.0(Oct 24, 2014)

    Further refines line charts, allowing them to better handle sparse time series. Adds rug plots and other improvements to scatterplots. Scatterplots can now be linked, least squares works with dates and the encoding options are more robust. All of a scatterplot's components can now be styled.

    The Button Layout has also been extended to allow for manual buttons that aren't tied to the data object.

    Take a look at the examples for demonstrations of the changes: http://www.metricsgraphicsjs.org

    Source code(tar.gz)
    Source code(zip)
  • V0.5.1(Oct 14, 2014)

    • Reverted the removal of bootstrap.js since we're actually using three of the plugins there (popover and tooltip for chart descriptions and dropdown for our button layout)
    • Cleaned up the way we rely on bootstrap.css, by overriding a few selectors in metrics-graphics.css and using the hosted version of bootstrap.css for everything else

    These changes ensure that our library remains modular and doesn't mess up people's websites if it so happens that they have bootstrap installed.

    Source code(tar.gz)
    Source code(zip)
  • V0.5.0(Oct 10, 2014)

  • V0.4.0(Sep 12, 2014)

    • Adds two new chart types: barplots and scatterplots
    • Adds basic linear regression that works for scatterplots
    • Adds preliminary button generation function
    • Modularizes codebase--components are now functionally separated into individual files and combined via the included make script

    A big thanks to @tlatorre-uchicago for contributions to this release.

    Source code(tar.gz)
    Source code(zip)
  • V0.3.0(Aug 20, 2014)

  • V0.2.0(Jul 18, 2014)

    Further refines line chart functionality. Fixes outstanding bugs that came about as a result of using this library with a moderate set of internal dashboards.

    Source code(tar.gz)
    Source code(zip)
  • V0.1.0(May 29, 2014)

Owner
Metrics Graphics
A library optimized for concise and principled data graphics and layouts.
Metrics Graphics
Create PowerPoint presentations with a powerful, concise JavaScript API.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Brent Ely 1.8k Dec 30, 2022
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 937 Feb 5, 2021
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
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 cross platform high-performance graphics system.

spritejs.org Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-prog

null 5.1k Dec 24, 2022
A global H3 population dataset optimized for consumption in Helium mapping projects.

H3 Population Helium A global population dataset based on Uber's H3 mapping system and seeded from the open source Kontur Population dataset. Optimize

Arman Dezfuli-Arjomandi 6 Apr 25, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
Composable data visualisation library for web with a data-first approach now powered by WebAssembly

What is Muze? Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It

Charts.com 1.2k Dec 29, 2022
Apache Superset is a Data Visualization and Data Exploration Platform

Superset A modern, enterprise-ready business intelligence web application. Why Superset? | Supported Databases | Installation and Configuration | Rele

The Apache Software Foundation 49.9k Dec 31, 2022
DataSphereStudio is a one stop data application development& management portal, covering scenarios including data exchange, desensitization/cleansing, analysis/mining, quality measurement, visualization, and task scheduling.

English | 中文 Introduction DataSphere Studio (DSS for short) is WeDataSphere, a big data platform of WeBank, a self-developed one-stop data application

WeBankFinTech 2.4k Jan 2, 2023
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 6k Jan 3, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023