# D3 latest charting library supporting es6 modules

**URL:** <https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913>\
**Category:** Uncategorized\
**Created:** [June 22, 2018, 10:28pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913 "2018-06-22T22:28:57Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [June 22, 2018, 10:28pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/1 "2018-06-22T22:28:57Z")

</div>

Now that I’m Observable, I’d like to chart data. I looked at various charting libraries, but problems:

- They did not support d3 latest
- They did not provide an es6 module (for example via [unpkg.com](http://unpkg.com)’s ?module feature)

I realize that on Observable I can use UMD/IIFE/… via require() but my work also needs to run in a project that is es6 module based.

It’s possible that I don’t really need a full blown charting library. The [Visualization collection](https://beta.observablehq.com/collection/visualization) looks superb. Do most of us roll our own charts rather than using a charting library?

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [June 24, 2018, 5:53am UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/2 "2018-06-24T05:53:07Z")

</div>

What kind of data are you trying to chart? What kind of chart do you want to make? Does your chart need special features?

---

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [June 24, 2018, 5:21pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/3 "2018-06-24T17:21:22Z")

</div>

Hi Jacob! Thanks for the reply.

I’m building an Agent Based Modeling system like NetLogo. Their plotting support is mainly line/point charts and histograms that grow with every step of the model. The line charts may show two or more parameters but most commonly only one.

A concrete example would be a “boids” flocking model, with the chart showing the “coherence” of the flock via their heading: 0 means no coherence (random headings) while 1 would mean each boid had the same heading. At every step of the model, the new coherence point would be added.

Another would be predator/prey with two lines: one for wolfs, the other for rabbits. Evolving quickly with new points for each step.

So matching the NetLogo plotting ability gets us an A.

But the point of the project is to place a small JavaScript NetLogo core within a far richer environment that their static Java implementation. So the modeler would be free to use far more interesting visualizations of their model data. There lies the A+ and the goal of our work!

---

<div class="post-metadata">

**Author:** ![sdwfrost](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sdwfrost/32/139_2.png) [@sdwfrost](https://talk.observablehq.com/u/sdwfrost)\
**Post date:** [June 26, 2018, 5:09pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/4 "2018-06-26T17:09:59Z")

</div>

Dear Owen,

plotly works well; lots of examples on my Observable page:

[https://beta.observablehq.com/@sdwfrost](https://beta.observablehq.com/@sdwfrost)

Happy to help out!

Best  
Simon

---

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [July 4, 2018, 7:41pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/5 "2018-07-04T19:41:32Z")

</div>

Hi Simon. Nice examples, thanks.

BUT: my main search is for an es6 importable (es6 module format) library.

Alas plotly does not supply that.

---

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [July 4, 2018, 7:53pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/6 "2018-07-04T19:53:19Z")

</div>

Now here’s a really odd solution for chart.js. It is not as far as I can determine and es6 module. BUT it can use es6 import using the “empty” form of import: `import "module-name";`

> <https://stackoverflow.com/questions/48410525/how-do-i-import-chartjs-as-an-es6-module>

The proof this works is:

```auto
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Load Chart.js as ES2015 module</title>
    <script type="module">
      import 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js'
      
      const canvas = document.getElementById("chart");
      let chart = new Chart(canvas, {
        type: "line",
        data: {
          labels: ["1", "2", "3", "4", "5"],
          datasets: [{
            label: "Series 1",
            data: [1, 2, 3, 2, 1]
          }]
        }
      });
    </script>
  </head>
  <body>
    <canvas id="chart"></canvas>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [July 5, 2018, 8:41am UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/7 "2018-07-05T08:41:19Z")

</div>

Have you tried Vega or Vega-Lite

> **[A High-Level Grammar of Interactive Graphics](https://vega.github.io/vega-lite/)**
>
> Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple...

---

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [July 5, 2018, 4:34pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/8 "2018-07-05T16:34:31Z")

</div>

Yup … one of the first. But I couldn’t see how to use it outside of Observable within an es6 module based project. I then spoke with the team:

> <https://github.com/vega/vega-lite/issues/3924>

I do have a stunt to “wrap” UMDs in a module but at this point, I’m surprised Vega-Lite doesn’t follow D3’s lead with unpkg & ?module.

---

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [July 12, 2018, 9:14pm UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/9 "2018-07-12T21:14:22Z")

</div>

Turns out vega-lite is considering ESM support in their pre-3.0 cleanup! Yay!

> <https://github.com/vega/vega-lite/issues/3964#issuecomment-403875545>

---

<div class="post-metadata">

**Author:** ![domoritz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/domoritz/32/38_2.png) [@domoritz](https://talk.observablehq.com/u/domoritz)\
**Post date:** [February 9, 2019, 12:48am UTC](https://talk.observablehq.com/t/d3-latest-charting-library-supporting-es6-modules/913/10 "2019-02-09T00:48:12Z")

</div>

This has shipped, btw.