Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
KKiran Jyothi Bodduluri-11604571
Last edited Mar 9, 2023
Created on Mar 9, 2023

This example shows the basic monthly cost of Netflix plans across 15 countries using a horizontal bar chart. Each bar represents a country, with bar length scaled to the plan price. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning and encoding values. Data is loaded from a CSV file via `d3.csv`, and rendered as SVG rectangles with manually drawn axes and tick labels.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6-Sarkar

This interactive bar chart displays the basic monthly cost of Netflix subscriptions across 15 countries, with countries listed on the y-axis and costs plotted along the x-axis using a linear scale. Built with React and D3 v5, the visualization loads CSV data from a GitHub gist and renders SVG rectangles whose widths encode each country’s price. The code uses D3’s `scaleBand` and `scaleLinear` for axes, `csv` for data parsing, and manual tick generation for gridlines and labels.

Hhossaphul
90% match
Loading thumbnail…

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

This example shows the basic monthly cost of Netflix in different countries using a horizontal bar chart rendered with React and D3. The visualization maps country names along the y-axis using `d3.scaleBand` and pricing values along the x-axis with `d3.scaleLinear`, displaying red rectangles as marks. Data is loaded from a CSV file via `d3.csv` and limited to the first 20 entries. The chart uses React hooks (`useState`, `useEffect`) to manage data fetching, while D3 generates SVG scales, axes, and grid lines for the static rendering.

99176371431
90% match
Loading thumbnail…

ICE-6

This example visualizes the monthly cost of business internet plans across 12 countries using a horizontal bar chart rendered as SVG. The chart uses D3’s `scaleBand` and `scaleLinear` for positioning and sizing bars, with React managing state and rendering. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the top 12 rows are selected. Axes are drawn manually with D3 ticks and gridlines, while the bars appear in blue without labels.

MMgk1255
90% match
Loading thumbnail…

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

This example displays the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart. Built with React and D3 v5, it loads CSV data via `d3.csv` and renders SVG marks through React components. The chart uses `d3.scaleBand` for the categorical y-axis (countries) and `d3.scaleLinear` for the quantitative x-axis (cost in USD). Grid lines and axis ticks are generated with `xScale.ticks()`. The underlying dataset is derived from public Netflix pricing information.

Bbhanuteja1807@gmail.com
90% match
Loading thumbnail…

ICE-6: Sample example for Marks and channels with d3.js

This example shows the basic cost of Netflix subscriptions for 15 countries using horizontal bars, with each bar’s length encoding cost and the country name as a categorical label. The chart is built with React and D3 v5, using `scaleBand` for the y-axis positions and `scaleLinear` for the x-axis values, rendering SVG rectangles. Data is loaded asynchronously from a CSV file via `d3.csv` and includes a custom row parser to convert numeric values, with axes drawn manually using `xScale.ticks()` and custom text elements rather than D3’s axis components.

SSravaniPosina
89% match
Loading thumbnail…

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

This example displays the basic monthly cost of Netflix across 15 countries as horizontal bars, using bar length to encode price. It renders SVG marks with React, building scales and axes through D3’s `scaleBand` and `scaleLinear`, and draws tick lines and labels manually via `ticks()`. Data is loaded asynchronously from a CSV URL using D3’s `csv` function. The chart uses blue gridlines and text labels, with margins and dimensions fixed in the code.

Ssrividyabachina22
89% match
Loading thumbnail…

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
89% match
Loading thumbnail…

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

This example visualizes the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart rendered as SVG. React manages the component state and lifecycle, fetching CSV data via D3’s `d3.csv`, while D3 scales (`scaleBand`, `scaleLinear`) and axis helpers (`axisLeft`, `axisBottom`) position the marks. The chart encodes cost with bar width and country names on the y-axis, with gridlines and tick labels drawn manually using SVG elements. Data comes from a GitHub-hosted CSV file.

Bbhanuteja1807@gmail.com
88% match