Fork of ICE-6:Cost of HBO_max

100%

Fork of ICE-6:Cost of HBO_max

✓ Published0🌍 Public

Last edited Mar 7, 2023

Created on Mar 7, 2023

This visualization shows the cost of HBO Max subscriptions across 15 countries using a horizontal bar chart, with each bar’s length representing the basic monthly fee in local currency. The chart uses React for component management and D3 v5 for data loading and scales, specifically `d3.csv` for fetching the dataset and `scaleBand`/`scaleLinear` for positioning bars and axes. SVG rectangles render the bars, while custom tick marks and labels are drawn manually through D3’s scale methods rather than using axis generators. The data is sourced from a GitHub gist and displayed with a dark blue title and blue gridlines.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6:Cost of HBO_max

This bar chart shows the cost of HBO Max’s basic plan in 15 countries, using horizontal rectangles to compare prices. The visualization is built with React and D3 v5, loading data from a CSV via `d3.csv` and rendering as an SVG. It uses `d3.scaleBand` for the country axis, `d3.scaleLinear` for the cost axis, and `d3.max` to set the scale domain.

Yyaswanthsen

92% 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

83% match

Loading thumbnail…

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

This visualization displays the basic cost of Netflix subscriptions across the top 15 countries, using a horizontal bar chart where bar lengths encode cost values. The chart is built with React and D3 v5, with the React component managing state and rendering SVG elements, while D3’s `scaleBand` and `scaleLinear` handle positioning, and `csv` loads the data. The code manually generates axis ticks and grid lines instead of using D3’s axis components, and updates the visualization reactively when new data arrives.

99176371431

83% match

Loading thumbnail…

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

This example shows the basic cost of Netflix subscriptions in 15 countries using a horizontal bar chart, with countries scaled by cost along the x-axis. The visualization is rendered as an SVG using React for component structure and D3 v5 for data loading and scales, specifically `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear`. Gridlines and axis ticks are drawn manually from scale domains, while rectangles represent each country’s cost. Data comes from a remote CSV file, loaded asynchronously and sliced to the first 15 entries.

Cchandanagandla

83% match

Loading thumbnail…

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

This visualization displays the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart rendered as SVG. It is built with React for component structure and D3 v5 for data loading and scales, specifically using `scaleBand` for the categorical country axis and `scaleLinear` for the numeric cost axis. Data is fetched from a CSV file, and the bars, axis ticks, and gridlines are drawn manually with SVG elements rather than D3’s convenience methods. The chart updates reactively when the data loads, showing the cost range across different markets.

Ssnehareddygurram

83% match

Loading thumbnail…

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

A horizontal bar chart shows the basic monthly cost of Netflix in 15 countries, using blue bars sorted by country name on the y-axis and cost on the x-axis. The visualization is built with React components that render SVG elements, while D3 v5 handles data loading via `d3.csv` and scales with `scaleBand` and `scaleLinear`. Axes are manually drawn using gridlines and text labels rather than axis generators. Data comes from a GitHub-hosted CSV file, and the chart updates reactively through React's `useState` and `useEffect` hooks.

82% match

Loading thumbnail…

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

This visualization displays the basic cost of Netflix subscriptions across fifteen countries using a horizontal bar chart rendered as SVG. The code combines React hooks (useState, useEffect) to manage data loading with D3’s csv parser, scaleBand for the categorical y-axis, and scaleLinear for the numeric x-axis. Country labels and gridlines are manually generated from D3 scale domains, while bars are drawn as rect elements with widths proportional to the cost values. The chart reads from a raw GitHub-hosted CSV dataset, demonstrating a React-D3 integration for declarative mark and channel rendering.

Bbhanuteja1807@gmail.com

82% match

Loading thumbnail…

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

82% match