Bubble Chart w/ Tooltips

Chi -

Set Up the Canvas

To set up the canvas for D3 graphs, in your HTML file :

  • Line 4: Load D3 directly from d3js.org — so you don’t need to install locally.
  • Line 7–51: Style section to style different elements.
  • Line 56: onload= “hoverOver()” means we are telling the system to load the hoverOver() function immediately to show D3 graphs after the page has been loaded.
  • Line 58–59: Create a SVG in the size of 1000px by 300px for us to put graphic elements in later.


Draw Axis, Title, and Source with D3

Now we move on to creating the hoverOver() function, which we will put into the <script></script> section after the body section. It’s recommended to create the D3 script in a separate file. But for the ease of sharing, I will put it together with the rest of the HTML.

Keep reading line-by-line explanations on how I built this 👉