🏠 back to Observable

D3 latest charting library supporting es6 modules

#1

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’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 looks superb. Do most of us roll our own charts rather than using a charting library?

#2

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

#3

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!

#4

Dear Owen,

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

https://beta.observablehq.com/@sdwfrost

Happy to help out!

Best
Simon

#5

Hi Simon. Nice examples, thanks.

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

Alas plotly does not supply that.

#6

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";

The proof this works is:

<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>
#7

Have you tried Vega or Vega-Lite

#8

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:

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.

#9

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

#10

This has shipped, btw.