2013-04-12

Co.Labs

Demo Of The Day: Creating Beautiful Charts Using Web Standards

Here are 12 examples of clean, lightweight charts and graphs built on HTML, SVG, and CSS.



Data visualizations on the web can be klugey--too many browser anomalies and versions to deal with. D3.js to the rescue! It’s a Javascript library built so that developers can create embedded charts and graphs using web standards--HTML, SVG, and CSS--without fussing over proprietary nonsense. The D3 Project (Data-Driven Documents) gives you reusable graph components and complete charts that are fully customizable--no boilerplate code here!

Charts included are:

  • Simple Line
  • Scatter / Bubble
  • Stacked / Stream / Expanded Area
  • Discrete Bar
  • Grouped / Stacked Multi-Bar
  • Horizontal Grouped Bar
  • Line and Bar Combo
  • Cumulative Line
  • Line with View Finder
  • Pie Chart
  • Bullet Chart
  • HTML Indented Tree

Play with the code behind these charts here.


See More Demos Of The Day