prism.js — An ultra-simple data visualization library


Welcome to prism.js, the ultra-simple data visualization library.

> This is a guest post by Julien Ponge, creator of prism.js and co-founder at Zenika. Julien is also the main author of O’Reilly’s “Learning Java”. He has written several other books on software development as well as numerous articles for international magazines such as javaMag and developpez.com (JUG Leaders Awards 2007).

I had been looking for a simple charting library for a project I was working on, but couldn’t find anything that was quite right. It either lacked the flexibility I wanted or it was just too complex and didn’t do what I needed it to. So, I created prism.js — an ultra-simple data visualization library.

I spent some time thinking about the design of the library before starting to code. There were a few things I really wanted to nail.

Prism.js is a high-level data visualization library. The website is mostly meant to be an introduction and documentation of the features of the library.

I have been developing the library since early 2014. It’s used by many big companies, like Google, Facebook or Microsoft. But I have never dedicated time to explain what it really does and how it works, so I decided to give that a try in this blog series.

The main goal was to write something for people who want to get in touch with code and data visualization but don’t know where to start from. Something that doesn’t require background knowledge in JavaScript, D3 or any other library, but can still teach how those technologies work through simple examples.

It’s a really simple and straightforward library that takes data and turns it into a visualization. To get started, all you need is some JSON.

{ “label”: “Ipsum”, “value”: 24 }, { “label”: “Dolor”, “value”: 37 }, { “label”: “Sit”, “value”: 42 }

That’s it. Let Prism know where you want to render your data and it will take care of the rest. Here are some examples:

Single Value

Prism.js is a lightweight and easy-to-use syntax highlighter. It’s used by millions of developers every day. The library has become a de facto standard, as many websites employ it.

Prism does not include any language itself, but rather loads the language extensions you specify when creating the Prism instance.

This means you can use the languages that come bundled with Prism or create your own if needed.

prism.js is a lightweight, extensible syntax highlighter library.

It’s a fork of the Lea Verou’s Prism (v1). Its goal is to be easy to use and extend, while providing enough features to be useful out of the box.

You can take a look at our documentation for examples, the API reference or the changelog for more informations.

By default, it supports syntax highlighting for over 100 languages and has plugins that you can use to add even more. It’s currently used in projects like Atom, WordPress and many others.

The graph of a function is not just the shape of the curve but the entire two-dimensional plane. The best way to represent this is to use a grid, which can be done by drawing horizontal and vertical lines. It is crucial that you make these lines thin. Thick lines are easier to see, but hard to place in front of a curved line.

Now we are ready to draw our parabola on top of this grid:


Leave a Reply

Your email address will not be published. Required fields are marked *