Modernizing MetricsGraphics

[jens-ox]

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 Switch from gulp to rollup #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 Switch to a more modern JavaScript linter (like ESLint) #860, Reduce impact of metrics-graphics on bundle size #903)
• testing is in bad shape (see Begin migrating test framework to Jest #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 ☺️

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.

[jens-ox]

Missing points, active points and baselines are added, together with some examples.

The following features are missing:

• data tables
• button layouts
• least squares lines
• brushing and zooming

Some remarks:

• ad 1,2: I think that tables and buttons are out of scope for a data visualization library. Way better solutions exist for both problems.
• ad 3: I think the focus of MetricsGraphics should be on visualization. A least squares line (or any other kind of statistical helper lines) can easily be passed.
• ad 4: I don't really know about that one. Brushing and zooming is nice to have, but hard to get right, especially for mobile. Also, custom domains can be passed, so adding an external slider (or something else) is possible.

Does anyone else have something to add to those remarks? Otherwise, I'd start with the merge preparations today.

[jens-ox]

The fork is ready to be merged.
@wlach do you have anything to add? Otherwise I would merge 👍

[wlach]

The fork is ready to be merged.
@wlach do you have anything to add? Otherwise I would merge 👍

Some context on brushing & zooming: this was something we really wanted for some internal tools @ Mozilla (I actually mentored a GSOC project about it a few years back), but I defer to your judgment on whether to keep it -- the internal need has long-since passed.

I agree on the other items like buttons and data tables, they are occasionally useful for data visualization but IMO the features never reached a level of maturity that I was happy with, and felt kind of out of place.

[jens-ox]

Hi @wlach, thanks for getting back!
I tried adding brushing, it wasn't as bad as I thought. So brushing is now included 😊
I also updated the examples to include brushing (always the first one).

[sandstrom]

Awesome to see this merged! 🎉 🎆

Regarding your questions:

• data tables => Agree, out of scope
• button layouts => Agree, out of scope
• least squares lines => Agree its not a necessity, but could be useful
• brushing and zooming => Agree, hard on mobile, but saw your next comment that you did implement it

---

More broadly, I think it's important for a library to have fairly strict boundaries on what it's trying to do, and what stuff is out of scope. Also, every new feature has a "maintenance cost" so another reason to not add too much.

For me, what MetricsGraphics does really well is that the graphs are presented beautifully and simply, i.e. the focus on great visual representation of data. The type of visualization that you'll find in good newspapers such as New York Times or The Economist.

For this, some advanced features are needed. Things like annotations, support for missing data, confidence bands, log scale, time spans and time formatting. But it shouldn't try to compete with Mathlab or other advanced visualization software.

These are just my thoughts though. Totally your call!