diagram-design v0.0.14-alpha

Diagram design

NB: Diagram design is currently pre-release. It is publicly available while being developed. Everything about it is subject to change.

Not all visualizations are destined for wide audiences. Creating quick visualizations that map to the way you think is an efficient way to communicate with your colleagues, your boss, or your clients. That's what diagram design is for.

Diagram design is a JavaScript library. Use it to prototype and iterate data visualizations. Diagram design is best seen as a step up from using Sheets or Excel to massage data and get it into an effective chart.

Diagram design focuses on rectilinear diagrams. These contrast with geographic projections and network diagrams.

Examples

• Column chart
• Line chart

FAQs

What about D3.js?

You should probably be using D3.js. It's been around, it's been used for a while now, it's mature. If you're writing production code, it's the better choice.

The mental shift D3.js enables is binding data to elements. This is a simple concept. D3.js embodies much more than this: it is a complete and complex DSL that enables you to do nearly any data visualization task. The simplicity of D3.js's API makes much of its functionality magical to the average user.

To contrast diagram design with D3.js: the purpose of diagram design is to make drafting charts fast and easy. It consciously tries not to form a domain-specific language. It's a plain (ES6+) library, taking advantage of JavaScript paradigms, which is transparent about what it does and how it does it.

What about Sheets or Excel or Numbers?

Charting is tacked on the spreadsheet apps. It's expected that they'll have charts. Their charting functionality doesn't always match up with our expectations. Like the Google Chart API, what they offer is more like an inflexible framework for creating charts. Even if your data is in a format that makes sense, you might have to manipulate or copy it to put it in an appropriate arrangement. And this arrangement might be different depending on which type of chart you want to generate!

Prior art

• D3.js, and particularly the original paper describing the binding of data to elements.
• Semiology of Graphics. Bad charts are easy to make with Spreadsheets. Good charts should be easy to make in diagram design. Semiology of Graphics helps define what 'good' means. It guides the features and defaults of the library.