Skip to main content
SimilarExport ZIP
100%

ICE-6:Cost of HBO_max

✓ Published1🌍 Public
Yyaswanthsen
Last edited Mar 7, 2023
Created on Mar 3, 2023

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6:Cost of HBO_max

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.

Yyaswanthsen
92% match
Loading thumbnail…

ICE-6

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.

KKiran Jyothi Bodduluri-11604571
81% match
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
78% match
Loading thumbnail…

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

This example shows the cost of a basic Netflix subscription in twelve countries using horizontal bars, with countries labeled along the vertical axis and cost values on the horizontal axis. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub gist, then creates SVG bar marks with `scaleBand`, `scaleLinear`, and `max` for layout. Axis ticks are rendered manually from `xScale.ticks()` and `yScale.domain()`, while each rectangle’s width encodes the numeric cost channel.

MMgk1255
77% match
Loading thumbnail…

Data Visualization ICE-6 Bar Graph

This bar chart displays the cost per month for basic mobile plans across different countries, using a horizontal layout. The visualization loads data from a CSV file, filters it to the first 12 entries, and maps country names to a d3.scaleBand y-axis and costs to a d3.scaleLinear x-axis. Rendered as SVG within a React component, it uses d3.csv for data loading, with d3.max computing the domain and custom SVG elements for ticks and gridlines.

HHema1430
77% 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
76% 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
76% match
Loading thumbnail…

ICE_6_Bar_Graph

This example visualizes the average monthly cost of basic internet service across twelve countries using a horizontal bar chart, with country names on the y-axis and cost in dollars on the x-axis. The React component loads CSV data via `d3.csv` and renders the chart as an SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Red gridlines, generated from the x-axis ticks, extend across the plot area, while each bar’s width reflects the data value. The visualization omits axis labels and tooltips, keeping the focus on comparing costs directly from the raw data source.

Nnikhilagopi
76% match