Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6: Rendering Marks and Channels

Public visualization

Viewing a saved revision (read-only)

15330e0fb4fa440a9b7369ab2c92c401

ICE-6: Rendering Marks and Channels

0 stars1🌍 Public
BBVNPK001
Last edited Mar 7, 2022
Created on Mar 6, 2022
Forked from Hello VizHub

This example visualizes the grades of 20 students as horizontal bars in a bar chart, with student names on the y-axis and grade values on the x-axis. It uses React and D3 v5, importing specific functions like `scaleBand`, `scaleLinear`, `max`, and `csv` from the d3 module. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements, including custom ticks with green grid lines and blue-bordered orange rectangles for each bar.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.