Plot Builder
Plot columns from one or more CSV files as lines, points, steps, error bars, shaded bands, bars (upright or flat, side by side or stacked, or the means of replicates), histograms, box and violin plots, heatmaps or contours, style the figure for a journal, and save it as PDF, PNG or SVG at the exact size you set, with the matplotlib script that draws it.
One example for each kind of chart. An example takes the place of the files and series on the page; your plot style stays.
Plot
Your figure will appear here
Open a CSV file on the left, or load an example. The preview is the figure at the size it will be saved, and redraws as you change anything.
Drag across the plot to zoom in; double-click it to fit the data again. Point at the data to read its values.
How to build a figure
Combine columns from one or more CSV files in one figure, style it while the preview redraws, then save it as PDF, PNG or SVG, or copy the matplotlib script that draws the same figure from your files.
Add data
Drop one or more CSV, TSV or text files with a header row on the Data tab, or click Load an example for two growth curves. More examples beside it has one for each kind of chart, from bars of means to a heatmap with contours: an example takes the place of the files and series on the page and keeps your plot style. A cell that is blank or not a number is left out: a line breaks there, as it does in matplotlib.
Set up the series
On the Series tab each series plots one column against another, from any loaded file, as a line, points, both, or a shaded band between two columns. The Chart menu turns a series into bars (upright or lying flat, side by side or stacked, to 100% if you like), bars of the means of replicate rows with their standard deviation, standard error or confidence interval, a histogram (bins by number, by one of numpy's rules or at edges you type; counts, density, fraction or percent; a running total), box plots or violin plots by group, a heatmap, contours or a 2D histogram. Pick error columns for error bars, and put a series in a second panel to share the x axis with a quantity of another scale, or on the same panel against a y axis on the right or an x axis on top (the X axis and Y axis menus), each with its own label, scale and limits. The Layout section above the series lays the panels on a grid of rows and columns (each series' Panel menu then names the cells), shares the x axis down a column or the y axis along a row, sets the gap between panels in points (at 0, panels that share an axis share an edge), letters the panels (a), (b) and so on, and adds an inset: a small panel inside another that enlarges part of it, marked with a box.
Style it
The Style tab holds the size, fonts, labels, limits, log scales, ticks, each series' colour, line and marker, the legend, grid and frame. It is the same panel as on the site's other plotting tools, and your size, fonts and frame are kept for your next visit.
Save or reproduce
Save the figure with PDF, PNG or SVG at the size you set, or copy the Python script under the plot: it reads your CSV files by column name, or carries the numbers inside it.
What you see is the size you get
The figure has a physical size, set the way journals set it: a width and height in inches, centimetres or millimetres, a resolution in dpi for PNG, and text and lines in points (1 pt = 1/72 in).
The preview
The preview draws the figure at its saved size and scales the whole of it to fit the screen, so text, lines, margins and the legend keep the proportions they will have on paper. The line above it gives the saved size, and how large the preview is shown: an 8 pt label looks larger at 180% than it will print.
PNG
Width times resolution gives the pixels: 3.5 in at 300 dpi is 1050 px. The resolution is written into the file, so Word, LaTeX and Illustrator place it at 3.5 in rather than guessing. A size typed in pixels is converted at the resolution: 1200 px at 300 dpi is a 4 in figure.
PDF and SVG
Both are vector files measured in points (3.5 in is 252 pt) whose text stays text, so they can be edited and scaled without loss. The fonts are the ones installed almost everywhere (Arial, Times New Roman, Courier New), so the files look the same when they are opened elsewhere.
The Python script
The matplotlib script uses the same size, fonts, colours, limits, ticks and legend, and the preview is laid out as matplotlib lays out the script's figure, down to where the ticks fall. By default the figure is saved at exactly the size you set; Fit the page to the drawing under Style › Export trims it to what is drawn, as bbox_inches='tight' does.
Making a figure that reads well
A few conventions that make scientific figures clearer and more honest.
Label your axes with units
An axis without units is ambiguous. Write the quantity and its unit, such as Time (s) or Concentration (mM). Put mathematics between dollar signs, as matplotlib does: OD$_{600}$, $\Delta G$ (kJ/mol), Area (m$^2$).
Use log scales deliberately
A log axis linearises exponential or power-law data and shows several orders of magnitude at once, but it can flatter noisy data. Use it when the process is multiplicative, and say so in the caption. Points at or below zero cannot be drawn on a log axis; the series says how many are left out.
Show the spread
A mean without its spread hides how sure it is. Choose the column of standard deviations or errors as the series' Y error, or draw a band between a lower and an upper column, and say in the caption which it is: SD, SEM or a confidence interval. When your rows are the replicates themselves, Bars of means works the mean and its spread out for you and can draw every value over its bar; box and violin plots show the whole spread.
Colours that survive greyscale and colour blindness
Around 8% of men have some colour-vision deficiency, and many journals print in greyscale. The default colours are checked to stay distinct for the common forms of colour blindness, and series drawn with points take a different marker each, so colour is not the only difference.
Reproducibility
The Python script means a figure isn't a dead end: it redraws the plot from the same CSV files, or carries the numbers inside it, so you can keep it under version control with your analysis. Everything runs in your browser; no data leaves your machine.
References & documentation
- Hunter, J. D. (2007). Matplotlib: A 2D graphics environment. Computing in Science & Engineering, 9(3), 90–95. matplotlib.org.
- Rougier, N. P., Droettboom, M., & Bourne, P. E. (2014). Ten simple rules for better figures. PLOS Computational Biology, 10(9), e1003833.
- Wong, B. (2011). Points of view: Color blindness. Nature Methods, 8(6), 441.
- Software: Plotly.js draws the preview and the exports. The script needs Python 3 with NumPy and matplotlib 3.6 or later (3.11 or later to match the preview).