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

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

This bar chart visualizes the basic monthly cost of Netflix in 15 countries, ordered vertically by country. The visualization is built with React and D3 v5, using an SVG rendering approach. The code loads CSV data from a GitHub gist and uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` to determine the domain. Each country is represented as a `rect` element, with bars drawn from the left margin.

TTekmal-Bhavana

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

This bar chart displays the basic cost of Netflix subscriptions across 15 countries, sourced from a CSV file and rendered as an SVG using React 16.9 and D3 v5. It uses `scaleBand` for the categorical country axis and `scaleLinear` for the continuous price axis, with rectangles as marks and position and length as channels. Axes are manually constructed with `axisBottom` and `axisLeft`, and gridlines are drawn directly. The visualization is built declaratively in JSX, with state managed via React hooks.

AAISWARYAMARAPATLA1999

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

This bar chart visualizes the basic monthly cost of Netflix subscriptions across 15 countries, using horizontal bars scaled by price. Built with React and D3 v5, the code loads CSV data via `d3.csv`, then uses `scaleBand` for country categories and `scaleLinear` for cost values. The SVG rendering mixes React components for the chart structure with D3 helpers like `xScale.ticks()` for grid lines and axis labels. The visualization highlights pricing disparities, with bars drawn as `rect` elements and axes positioned through D3’s margin convention.

AAISWARYAMARAPATLA1999

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

This bar chart shows the basic cost of Netflix subscriptions in 15 different countries. The visualization is built with React components and D3 v5 methods, using `csv` to load and parse data from a remote URL, and `scaleBand` and `scaleLinear` to map country names and costs to SVG rectangles. Axis ticks are rendered with `xScale.ticks()`, and the chart is drawn as an SVG element within a React app.

Ssnehareddygurram

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

This bar chart displays the basic cost of Netflix subscriptions across fifteen countries, revealing a range of prices. Built as a React application, it loads CSV data from a GitHub gist and uses D3 v5 functions like `scaleBand` and `scaleLinear` for coordinate mapping. The visualization renders bars as SVG `rect` elements within a React component, with axes and tick labels generated through iterative map functions. The chart is presented in an HTML page with an embedded YouTube video.

Ppreddythandra

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

A horizontal bar chart shows the basic cost of Netflix in fifteen countries, sorted by country name. The visualization is built with React and D3 v5, using SVG for rendering. Data is loaded from a CSV file via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` position the bars. Axes are drawn manually with tick marks and text elements, and each rectangle's width encodes the cost value.

Rradhadevarapu

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

This bar chart shows the basic cost of Netflix in up to fifteen countries, using horizontal bars ranked along a categorical y-axis and a linear x-axis for cost. The visualization combines React's component model with D3 v5 utilities, using `scaleBand` and `scaleLinear` for axes, `csv` to load data from a gist, and rendering bars as SVG `<rect>` elements within a React component. The chart draws axis ticks and labels manually, with D3's `max` for domain scaling.

Cchandanagandla

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

A horizontal bar chart displays the basic cost of Netflix subscriptions across fifteen countries, with country names on the y-axis and cost values on the x-axis. Using React hooks (`useState`, `useEffect`) to manage data loading, the code fetches a CSV file via `d3.csv`, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axis ticks are manually generated, and the visualization uses blue vertical gridlines with labeled tick values.

Nnsatyaprakash22