Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6 Tutorial Bar Chart

✓ Published0🌍 Public
Eeravellisaimeghana
Last edited Mar 8, 2022
Created on Mar 8, 2022

This bar chart displays the prices of various pizzas, with each bar representing a pizza name and its price. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map price values and categories, while `axisBottom` and `axisLeft` generate the axes. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered as an SVG. The code also customizes axis tick formatting and removes gridlines, with the source data based on 2018 United Nations population estimates.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 6

A bar chart displays automobile prices across car makes, sourced from a CSV dataset. The visualization uses D3 v5 to load data via `d3.csv` and render SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels. The chart includes titles and axis labels, with bars colored steelblue.

Iindushashi.g@gmail.com
79% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This fork of the ICE-6 tutorial displays a horizontal bar chart ranking the top 10 cosmetic products by revenue, with the title and axis label hardcoded in the script. The data is loaded from a CSV file hosted on GitHub, with the revenue column parsed as a number. It uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, with custom tick formatting that abbreviates large numbers (e.g., converting billions to "B"). The visualization is rendered as an SVG, with bars styled via CSS.

Ppavan0828
79% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, using a linear scale for the value axis and a band scale for product categories. The visualization, built with D3 v5, demonstrates axis customization by removing domain lines and tick marks while applying a custom formatter that converts thousands to billions. Data is loaded from a CSV file hosted on GitHub, sourced from United Nations population estimates, and rendered as SVG rectangles with steelblue fill.

Bbhargavarathod
78% match
Loading thumbnail…

Fork of ICE-6

This is a bar chart of supermarket sales data, showing the unit price for the first ten product lines from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles for each bar. Data is loaded asynchronously via `d3.csv` and limited to ten entries before being displayed. The chart includes custom axes with gridlines and labels, all rendered as SVG elements within a React component.

SsreepavanKothapalli
78% match
Loading thumbnail…

Fork of ICE-6 Bar Graph

This fork of ICE-6 renders an SVG bar chart of Amazon prices in different states, showing the first 12 countries from a CSV dataset loaded via `d3.csv`. It uses React with the `useState` and `useEffect` hooks to fetch and store the data, then maps it to rectangular bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are custom-built using `d3.axisBottom`-style tick generation, though the code manually draws grid lines and labels with SVG elements. The chart is titled “Amazon Prices in different States” and displays loading text until data arrives.

MMgk1255
78% match
Loading thumbnail…

Fork of ICE-6 Bar Graph

This fork of ICE-6 renders an SVG bar chart of Amazon prices in different states, showing the first 12 countries from a CSV dataset loaded via `d3.csv`. It uses React with the `useState` and `useEffect` hooks to fetch and store the data, then maps it to rectangular bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are custom-built using `d3.axisBottom`-style tick generation, though the code manually draws grid lines and labels with SVG elements. The chart is titled “Amazon Prices in different States” and displays loading text until data arrives.

MMgk1255
78% match
Loading thumbnail…

Fork of ICE-6

This visualization presents a horizontal bar chart displaying the "Unitprice" for the top 10 records from a Supermarket Sales CSV dataset. Each bar represents a product line, with its length proportional to the unit price. The chart is built using React and D3 v5, leveraging `d3.csv` for data loading, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis price scale. The SVG rendering includes grid lines and axis labels, with blue bars drawn using SVG rectangles within a transformed group.

LLakshmiManjushaReddyYarreddu
78% match
Loading thumbnail…

Fork of ICE-6 bar graph

This example visualizes Amazon prices across different countries using a horizontal bar graph, displaying the top 12 countries by basic monthly cost. Each bar’s length represents the cost value, with red vertical gridlines and labeled axes for clarity. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv()` to load data from a GitHub gist. Bars are rendered as SVG `<rect>` elements, while axes and ticks are manually generated from the scales.

Kkakumanusreya
77% match