🌍 Public
Viewing a saved revision (read-only)
93b5b5a7fd33491fba9a6a55f219a7f3
ICE-6: Marks and Channels
This example displays product costs as a horizontal bar chart using React and D3 v5. The visualization maps product names to the y-axis with a band scale and costs to the x-axis with a linear scale, rendering blue rectangles with yellow strokes. The component loads CSV data from a GitHub gist, slices it to the first ten items, and uses D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions within a React functional component with hooks. Custom tick marks and gridlines are drawn manually rather than using axis generators.
AI-generated descriptionAn example showing the capabilities of VizHub:
- Loads D3 via UNPKG.
- Demonstrates use of
importfrom"d3". - Demonstrates use of
importfrom local ES6 modules.