CSS Slope Graphs | Ugly Duck

I’m a sucker for simplistic and beautifully designed visual data on the web. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let’s change that, shall we?

I’m basing this demo off the design patterns found in Edward Tufte’s visualization work, specifically his slope graph designs:

For this concept we will actually be building this graph out of tables - crazy, right? The greatest benefit of rendering all the data inside of a table element is the ability to easily support smaller screens and mobile devices. Larger viewports will get to see the pretty slope graph, while those below a certain threshold will view a simple table.

As you can see, nothing too fancy is happpening here. Pay close attention to the data-set and data-name variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.

To avoid overwhelming your brain all-at-once, let’s break the CSS down into bite-sized chunks, starting with the base styling:

Leave a Comment