Skip to main content
SimilarExport ZIP
100%

Madan's ICE-6

✓ Published0🌍 Public
MMadan05101998
Last edited Mar 8, 2023
Created on Mar 6, 2023

This bar chart shows the basic cost of living rent (in USD) for the top 20 cities, with each city labeled on the y-axis and its rent value mapped along the x-axis. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements to encode the rent values. Data is loaded asynchronously via `d3.csv` from a GitHub Gist URL and filtered to the first 20 records. The chart also includes custom tick marks, gridlines, and axis labels generated with `xScale.ticks()`.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar Graph

This bar graph displays the Rent Index for 12 global cities, comparing their relative rental costs. Built with React and D3 v5, it loads CSV data and renders an interactive SVG chart with horizontal bars. The code explicitly uses `scaleBand` for the city categories on the y-axis, `scaleLinear` for the numeric rent values on the x-axis, and manual axis tick generation with D3’s `ticks()` method. Grid lines are drawn as red vertical elements, and the data comes from a GitHub Gist URL.

Kkottenikhil
82% match
Loading thumbnail…

ICE-6 Bar Graph

This bar graph shows average monthly rent prices for twelve US cities, with city names on the vertical axis and rent amounts on the horizontal axis. The visualization uses React hooks to manage state and fetch CSV data via `d3.csv`, then renders SVG rectangles scaled through `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Grid lines are generated with `xScale.ticks()` and labeled using text elements. The data comes from a gist-hosted salaries CSV file, and the graph updates once the asynchronous data loading completes.

SSUSHMA CHIRRA
82% match
Loading thumbnail…

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

This bar chart displays the average rent prices for 25 Moscow metro areas, using horizontal bars scaled linearly by price. It is built with React and D3 v5, using `scaleBand` for the categorical metro names on the y-axis and `scaleLinear` for the numeric rent values on the x-axis. The SVG rendering includes custom grid lines and tick labels generated from D3’s `scaleLinear` ticks. Data is loaded asynchronously from a CSV file via d3.csv, with the first 29 rows selected for display.

Mmanasanimmagadda13
79% match
Loading thumbnail…

ICE-6 Bar Graph

This bar graph displays the cost of living across different Amazon locations, comparing the basic monthly expenses for twelve countries. The visualization uses React to manage the state of the loaded data and renders the chart as an SVG. D3’s `csv` method fetches the dataset, while `scaleBand` and `scaleLinear` position the bars and axes. The code manually constructs the axis ticks and labels using D3’s `format` and `max` functions, with red gridlines marking each tick value along the x-axis.

Yyamunaunt
77% match
Loading thumbnail…

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

This interactive bar chart displays the basic cost of living for 15 cities across various US states. Built with React and D3 v5, the visualization renders SVG marks and channels, using a band scale for the categorical y-axis and a linear scale for the numerical x-axis. Data is loaded from a CSV file via d3.csv. The React component manages state and uses useEffect to fetch and slice the data, while d3.scaleBand and d3.scaleLinear map city names and costs to screen coordinates.

Kkarnisrikanth2212
76% match
Loading thumbnail…

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

The visualization shows the average house prices for fifteen U.S. cities, rendered as a horizontal bar chart using React and D3.js. It loads comma-separated data from a GitHub Gist, maps each city to a band scale on the y-axis, and linearly scales the price to the x-axis. The SVG output uses React DOM elements to draw the tick marks, axis labels, and price bars. The code leverages `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear` to fetch and transform the data.

Kkarumanchimanasa
76% match
Loading thumbnail…

ICE-6

This bar chart visualizes the cost per month of investments across countries using a horizontal bar chart layout, plotting countries on the y-axis and their associated costs on the x-axis. The visualization employs React for the user interface and d3.v5's scaleBand, scaleLinear, max, and csv functions to load and process the financial data from a CSV file. The chart is rendered as an SVG, with red gridlines extending from each x-axis tick to enhance readability.

HHema1430
75% match
Loading thumbnail…

ICE 6

This visualization displays income levels for the top 20 countries using a horizontal bar chart rendered as SVG. The chart maps each country’s income to bar width via a d3.scaleLinear x-axis, while a d3.scaleBand y-axis positions the bars by country name. React’s useState and useEffect hooks load and parse the CSV data, and d3.csv fetches the dataset, which is then sliced to the first 20 rows. The visualization demonstrates a clean, static comparison of income values with labeled axes and blue gridlines.

AAmar09nath
75% match