grafixgeek.com

data driven graphics made easy

First prototype underway

Posted on October 13, 2015

I'm really pleased to have started building my first D3.js code generator tool. I thought I would start with something simple. So I started with a basic horizontal bar chart generator.

The idea is quite simple really. You provide the data as a comma delimited series, make a few selections as you how you want the graph to look (or stay with the defaults), and hit submit.

Please note: shown below is a screenshot image, not an actual form, so don't try to fill it in!


This then generates the graph and provides a textbox with the source code which you can use on your own web page. This source code should be editable by anyone with a basic idea of how HTML, CSS and javascript source code is structured. Or you can come back to the page.


To be sure, there are lots of improvements to be made, but I had to start somewhere. Some of the things on the list for improvement are


  • More options for user to influence the look of the chart
  • Responsive design to automatically shrink for mobiles
  • Different colour bars
  • Better labelling options
  • Ability to group bars
  • Vertical bar option, which may be a separate version