Farm to table to chart, with React and D3.js
Chartisan takes a CSV or TSV dataset, parses the data, and draws it on a graph as either a bar chart, line chart, or scatterplot. The tool can handle ordinal/categorical, numerical, and time data (using Moment.js for parsing); it also supports multiple series on the same scale. D3’s scale/axis modules then automatically suggest bounds to best show the graph’s domain and range, but users can fine-tune these values accordingly — if, for example, they staunchly believe that the y-axis should always start at zero.
Thanks to React, changes happen in the browser in real-time with no need for a page refresh or server request. This allows users to freely modify their chart on the fly and visually verify throughout the design process. Once the user is happy with it, they can add additional labels for context (e.g. title, subtitle, data source). Finally, these charts can be exported as static PNG images to be embedded in articles or shared on social media. Alternatively, they can be exported as SVG files for further editing in a separate vector image program like Illustrator or Sketch.
I'm a designer and developer with a passion for data-driven storytelling and human-centered products on the web.Follow