Visualizing Data

Questions

  • How can I visualize data on the web?
  • Why is this so hard?

Introduction

Drawing Options

<svg width="400" height="300">
      
  <circle cx="100" cy="100" r="30" 
    fill="pink" stroke="red" stroke-width="2"/>
      
  <rect x="200" y="20" width="100" height="60"
    fill="lightblue"/>
      
  <line x1="300" y1="200" x2="400" y2="300"
    stroke="plum" stroke-width="5"/>
      
  <text x="50" y="200"
    font-family="serif" font-size="16">
    Hello World
  </text>

</svg>
Hello World

Key Points

  • D3 is a toolkit for building data visualizations.
  • None of the libraries that combine D3 with React are ready for use by beginners yet.
  • Chart.js isn’t great either, but it and its React wrappers are usable.