2

In many prototyping cases, I have to generate charts, graphs and all sorts of data visualizations. I'm looking for tools to easily and rapidly generate those.

Currently MS Excel does the job for me, but I'm looking for better alternatives. I'm also aware of the vast amount of component libraries out there, but I don't want to get coding for this task.

example of chart sketches

  • Do you need the charts to represent real data, or are you just looking for layout? – tohster Feb 25 '15 at 19:52
  • It really depends on the purpose of the prototype: what should it validate? Layout (as stated above), understanding of visualization, interaction with visualization, ... – Benoît Pointet Feb 26 '15 at 6:33
  • sometimes I have real data I want to show, but most times I have only mock-data (that's the nature of designing before implementing). – Dvir Adler Feb 26 '15 at 16:38
3

When doing UX for data vis, the actual data matters.

For example when showing bar charts with data that you want people to compare, your wireframes need to clearly show that the Y axes should have the same maximum and minimum values.

Another example: if you have two bar/line charts where the Y axes have the same minimum and maximum values, they're best presented in a row next to each other. This makes it easy to compare between them because the same height represents the same value on both charts.

To be honest, I haven't found a UX tool that's good for prototyping for datavis, since you can't import data into the stock graphs, but that data is vital to determine a usable layout.

tl;dr: If doing it in excel works for you, keep doing it in excel.

  • I quite disagree with this. Aesthetics is maybe the biggest factor that sells DataVis to the viewer, and inserting Excel charts into the hi-fidelity mockups can kill off the whole pitch, whoever is evaluating it, be it your investor, the lead or maybe even users. – Zoe K Jan 8 '16 at 13:27
2

I have to generate charts as well. I usually use highcharts or excel to create the prototypes and then place them into photoshop (or an HTML mockup of the site) depending on what's required. In either case, unless the prototype is an examination of the chart itself, the data has not mattered much.

A generic line or area chart is often sufficient. I actually have dozens of "dummy" charts created in excel, highcharts, google charts that I plug in to various areas of my wireframes. As the prototype progresses discussion starts going to the actual chart(s) that will be displayed so if a line chart superimposed over area chart is what will accurately represent the data then that's what presented (with semi-realistic data ranges). As stated earlier you can easily make these charts in excel or highcharts and then import them/screenshot/etc...

I've found that only at the very end of the process will users start to ask for "working" prototypes. By that point developers are usually involved in the process.

  • Nice trick with the pre-made excel charts! – Zoe K Jan 8 '16 at 13:25
2

I use Adobe Illustrator. Sometimes I do the charts by hand, sometimes I use the Chart tool — it's clunky but it works, most often I use a combination of both. This being said, you can't just uplode the data there, the input is done by hand, and that's where it's clunky.

If Excel works for you functionally but not aesthetically, I would export charts from Excel in .svg or .eps format and rework the aesthetics in AI.

This is exactly why I started learning D3, the absence of products for DataVis is annoying.

  • 1
    I've got to admit, I do most of my own mockups in D3... – Racheet Jan 8 '16 at 16:41
  • Actually, while we're at it :D Do you pipe in the json file to the code? This is one place where I got stuck with things, I literally can't find the right chunk of code that calls out the data from json file. – Zoe K Jan 8 '16 at 16:54
  • 1
    try d3.json(url,callback), you have to pass in a callback which gets given the contents of the json. // the documentation – Racheet Jan 8 '16 at 17:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.