What is an ideal pattern for reusable charts?

Community Help
1

Hey there

I wanted to get feedback from others on this notebook. I’m curious how this pattern for reusable charts might be improved.

It seemed to me there might be a way to do this without having to pass as many arguments into the chart. Maybe by using immutability to render every chart in a loop but not having future changes in future iterations of the loop modify previously rendered charts.

2 Likes
2

Hey Sam,

There are a few interesting wrinkles here:

A basic function-that-draws-a-chart is a fine, vanilla way to go. You import the function; you pass in the data and the rendering options, boom.

But Observable also offers import {x} with {y}, which extends an additional layer of reusability to imports — beyond what is necessarily anticipated by the author of the chart. For the full details, see Mike’s intro:

… but in short — even if the author never wrote their chart to be reusable in the first place … as long as they divided up their cells into sensible atomic units, and didn’t stuff everything into a single function (as is the default style in Observable notebooks) — you can get pretty far reusing their chart by importing it, and using with to override the specific cells that you want to customize.

1 Like
3

hey @jashkenas

yeah, I am using the with {data as data} here, of course but I had the same thought of putting more emphasis on that feature. I think breaking it up into further atomic charts units is a good progression. Will take another pass.

1 Like
4

@petulla would be cool if we could get it to the point where we just import your most common d3 charts notebook lib for graphing data without all the setup glue you had there. I am with you on that 1!

I mean give me a d3 JS notebook lib import to sketch this dataset I am onto this month, without jumping through all kinds of random d3 charts notebooks. Most are just classic bars, line graphs, series and maps that should be easy to graph with some intelligent lib glue set up.

https://www.linkedin.com/pulse/chicago-crimes-2017-taras-novak/

could be a win win win for dataViz notebooks in js…

we could design it similar to matplotlib to keep it classy: https://matplotlib.org/

if vega-lite is not for everyone :slight_smile:

5

One orthogonal piece of feedback on your notebook is that it currently doesn’t work well in Firefox: some of the charts are invisible and the charts that do appear overlap later cells in the notebook. The issue is the one discussed in Overlap of cells with output and it also affects your reusable chart notebook as well.

1 Like
6

looks good and overlapping with all the chart params in Firefox Quantum, v61.0.1(64-bit)

1 Like