Create slanted or chevron-shaped progress bar to show percent complete

[Dale Richards]

I'm new to d3 and am working on a proof of concept for some data visualizations/dashboards. Does anyone know of a simple way to show a progress bar shaped like a parallelogram or a chevron? I'm trying to build something like this:

Ideally, the colored yellow background would change based on the value of the percentage for the given progress bar. Any pointers on a good way to do this would be welcome. Thanks!

Dale R.

 

[steve rickus]

That's a nice graphic -- makes it easy to see where things are... Although nothing is really "simple" when writing code using the D3 library, you can accomplish a great deal with a small amount of code. And nothing is more satisfying than to see your data come to life when it all works! Then the real power comes when you add user interactions, as you've no doubt already noticed.

Are you looking for SVG information, or D3, or both? I don't know of any libraries to do this directly, so all I can do is give you my thought process for the steps I would use to implement it myself. I assume you have a CSV or other set of data that can be used to build this graphic? First you will need to use something like the D3 .csv() function to read in the data and create the object arrays (nested by step maybe?). This is the data that represents each block to be drawn (name, % comp, color? position? etc). The whole set is then fed to a number of functions that render the shapes needed to show the data.

The shapes themselves can easily be drawn with a multiline path element -- i would probably create a function for each shape (upper para, middle chevron, lower para) and pass args for the class and the overall width. This renders the outline of the shape which can be styled with CSS (by class name). Call each of those functions first with a reduced width (based on % complete), and fill the returned shape with the appropriate background color. I would look at using d3.scales for mapping from (for example) red @ 0% to green @ 100%. Then call the three functions again with the full width, and set the outline style to show a bold black outline. Finally, create a text element on top for the strings to go inside the shapes. Repeat for each step in the diagram.

Sorry I don't have any example code to give you, but I'd be surprised if there is not an example somewhere on bl.ocks.org that could give you a good start.

--

Steve

[Dale Richards]

Steve,

Thank you so much for your detailed thoughts and suggestions.

Dale R. 

Sent from my iPhone

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/jH888xLOkz4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.