Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6 Tutorial Bar Chart

✓ Published0🌍 Public
Ssnehareddygurram
Last edited Mar 11, 2023
Created on Mar 11, 2023

This bar chart displays the 2018 revenue and product names from a dataset of Oscar female winners, with the title "Oscars winners age" and an x-axis labeled "Year." It uses d3.csv to load data from a GitHub gist, then renders with d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom and d3.axisLeft for tick marks. The SVG output includes custom tick formatting that converts large numbers to abbreviations.

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: Rendering Marks and Channels with React & D3

This bar chart displays the ages of the ten most recent female Oscar winners, with each bar’s length encoding the year of the award. The visualization is built using React for component structure and D3 v5 for scales and layout, specifically `scaleBand` for the categorical age axis and `scaleLinear` for the year axis. The SVG rendering is generated directly through React elements, while D3’s `csv` loader fetches the data from a GitHub gist. Axes are manually drawn with `<line>` and `<text>` elements rather than using D3’s axis components.

Ssnehareddygurram
84% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This interactive bar chart visualizes the population of Oscar female winners, focusing on the top three countries. The initial data is loaded from a CSV file via d3.csv, which retrieves a gist dataset. Using d3.scaleBand and d3.scaleLinear, the chart maps country names to the y-axis and population values to the x-axis. SVG rectangles are rendered with React, and axes are drawn using the d3.axis, with tick marks and labels generated programmatically. The visualization dynamically updates as data is fetched, highlighting differences in population counts among the displayed countries.

Ssnehareddygurram
83% match
Loading thumbnail…

Fork of Data Visualization- ICE-06 - Bar chart

This bar chart displays the top 100 female Oscar winners by number of awards, sorted with the highest counts at the top. Using React with D3 v5, it builds an SVG with d3.scaleBand for the vertical name axis and d3.scaleLinear for the horizontal count axis. The code manually renders tick marks, grid lines, and labels via d3.ticks and d3.max, while styling red bars and blue tick text through CSS.

Ssnehareddygurram
82% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the revenue of the top 10 cosmetic products, sorted by product name on the y-axis and revenue in dollars on the x-axis. It uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG with custom tick formatting that abbreviates large numbers (e.g., converting billions to "B"). Data is loaded from a CSV via `d3.csv` and originates from a GitHub gist. The chart also removes default axis lines and includes custom labels for the title and x-axis.

Ssaiteja0725
81% 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
80% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue in dollars, using a horizontal layout with a linear x-scale and a banded y-scale. The visualization is built with D3 v5, leveraging the `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to render axes and bars. Data is loaded from a CSV file via `d3.csv`, with revenue values parsed as numbers. The chart includes axis labels and custom tick formatting that converts large numbers from G to B. The SVG canvas is 860 by 450 pixels, with margins arranged for clear presentation.

DDINESH SAI BOPPANA
79% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using a horizontal layout where product names are on the y-axis and revenue in dollars on the x-axis. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` to map data, and `axisLeft` and `axisBottom` for customized axes with tick formatting that converts large numbers to abbreviations. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The chart includes a title and axis label, with a light styling applied through external CSS.

Vvegurusaiprathyusha
79% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using a horizontal layout where product names are on the y-axis and revenue in dollars on the x-axis. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` to map data, and `axisLeft` and `axisBottom` for customized axes with tick formatting that converts large numbers to abbreviations. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The chart includes a title and axis label, with a light styling applied through external CSS.

Vvegurusaiprathyusha
79% match