Skip to main content
100%

ICE6 - Scatter Plot

✓ Published0🌍 Public
Nneffer77
Last edited Mar 10, 2023
Created on Mar 10, 2023
Forked from ICE5

This example demonstrates a blank scatter plot scaffold using React and D3 v6, with a VizContainer component that abstracts SVG and group elements following the margin convention. The code loads a CSV file of total emissions per country from a GitHub repository using d3.csv, then displays metadata about the dataset—size in kilobytes, row count, and column count—in a red <pre> element. The visualization itself remains empty, focusing on the boilerplate structure and data-loading feedback rather than rendering points.

AI-generated description

Boilerplate code for a React + D3 visualization with:

  • CDN links for React, ReactDOM, and D3
  • Basic React boilerplate
  • Variables for dimensions and margins
  • A VizContainer component that:
    • Abstracts SVG/group container elements
    • Follows the margin convention
    • Show the margins, which can be easily removed by deleting the showMargins={true} prop
MIT Licensed

Similar vizzes