This is a short tutorial that shows how to load and visualize electronic health records with d3.

Please check out the init branch to get an initial version of the project to follow along.

You can navigate through the commits of the project to get a commented step-by-step breakdown:

• initial version
• setting up the SVG
• drawing events
• position horizontally
• color events
• position vertically
• order vertical positions
• show horizontal axis
• add zooming and panning
• pop events on hover
• show labels on hover

The master branch contains the final result.

Double-clicking on index.html opens the visualization in your browser. An online version of the final stage can be found here.