Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React & D3 - Simple Bar Chart

Public visualization

Viewing a saved revision (read-only)

ab63840cc4f0414780e4e5a73ee45ac2

React & D3 - Simple Bar Chart

0 stars1🌍 Public
NNika
Last edited Apr 5, 2021
Created on Apr 4, 2021

This example shows a horizontal bar chart of country populations for a selected year, with bars colored on a red-to-green scale based on their population values. The chart reads UN population data from a CSV file and displays a subset of countries. React manages the application state through hooks, including the currently selected year via an input field, while D3's `scaleLinear`, `scaleBand`, and `d3.interpolateHcl` handle scaling, layout, and color interpolation. The bars are rendered as SVG rectangles, with their widths and positions computed from the D3 scales.

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