Skip to main content
100%

ICE-6: Rendering Marks and Channels with React & D3

✓ Published0🌍 Public
KKarnisrikanth
Last edited Mar 7, 2023
Created on Mar 7, 2023
Forked from HTML Starter

This example shows the basic cost of Netflix subscriptions across different countries, rendered as a collection of marks positioned on a page. The visualization uses React components to manage the DOM elements, while D3 v5 handles data manipulation and scale construction. The code relies on React’s `createElement` and `useState` for rendering and state, alongside D3’s `scaleBand` and `scaleLinear` to map country names and prices to screen coordinates. Data is embedded directly in the JavaScript, and each country is represented as a colored bar, with the title displayed prominently above the chart.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes