Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 25, 2023

Created on Jul 25, 2023

This bar chart visualizes the ratings of various mobile phone brands, including Motorola, Nokia, Samsung, HUAWEI, Apple, and Sony. It shows the distribution of numeric rating values across brands using horizontal bars, with the highest rating value determining the linear scale domain. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with data loaded from a CSV file. The chart also customizes the axes by removing default domain lines and adding an axis label for the brands.

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 Making a Bar Chart

This example displays a horizontal bar chart of brand ratings from a CSV dataset, with each bar’s length proportional to the rating value. It uses D3 v5’s `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for axes. The SVG is rendered via D3 selections, with margins and labels for the axes. Data is loaded asynchronously with `csv`, and ratings are converted to numbers before rendering. The chart highlights brand comparison, with blue bars and a clean layout.

SSwapna1915

80% match

Loading thumbnail…

Mobiles brand Rating

This chart displays the distribution of mobile phone ratings for six brands, showing the percentage of reviews falling into five rating categories from "below 5.0" to "above 8.5". Each brand is represented as a horizontal stacked bar, with colored segments corresponding to each rating band. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.stack` to create stacked data, `d3.scaleLinear` for the percentage axis, and `d3.scaleBand` for the categorical brand axis. Interactive tooltips display exact percentages on hover, with the data loaded from a local CSV file.

SSwapna1915

80% match

Loading thumbnail…

Mobile Inventory stacked bar chart

This example shows mobile inventory counts for three brands—Samsung, OnePlus, and Motorola—broken into Mobile, Tablet, and Earpods categories using a stacked bar chart. Each bar segments three colored rectangles (pink, yellow, red) representing the product types, with axis labels and a legend to the right. The code uses D3 v7 via UNPKG, building the visualization with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` in an SVG. The dataset is hardcoded in the script, and the legend maps each color to its corresponding value name.

VVenkat-Sumith-Thota

77% match

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower for seven car brands, sorted from lowest to highest, with each bar colored according to a sequential red color scale that encodes the horsepower value. The visualization loads data from a CSV file using d3.csv, binds it to SVG rectangles, and uses d3.scaleBand, d3.scaleLinear, and d3.scaleQuantize for positioning and color mapping. Interactive tooltips appear on mouseover, while d3.legendColor adds a legend, and axes are rendered with d3.axisBottom and d3.axisLeft.

SShishiraRudrabhatla

75% match

Loading thumbnail…

Barchart

This bar chart displays the distribution of brand ratings from a CSV dataset, with each bar’s length representing the rating value and brands ordered along the vertical axis. Using d3.csv to load the data, d3.scaleLinear and d3.scaleBand map ratings and brands to screen coordinates, while d3.axisLeft and d3.axisBottom render the axes. The SVG rectangles are appended and sized via the scales, with a fixed margin and teal fill defined in CSS.

SSwapna1915

75% match

Loading thumbnail…

Fork of Smoothed D3.js Radar Chart

This radar chart compares three smartphone brands—iPhone, Samsung, and Nokia—across eight attributes such as battery life, brand, and contract cost. The chart uses smoothed, rounded paths and colored blobs with glow filters to highlight each brand’s profile, with seven concentric grid levels and percentage labels. Built with D3.js v3 and React, it renders as SVG with animated transitions, using an ordinal color scale and a linear radius scale to map values within a circular grid.

Mmayhob

74% match

Loading thumbnail…

Fork of Smoothed D3.js Radar Chart

A smoothed radar chart visualizes three mobile phone brands—iPhone, Samsung, and Nokia—across eight attributes such as Battery Life, Brand, and Price of Device. Each brand appears as a colored, semi-transparent polygon overlaid on a circular grid of seven concentric rings, with glowing SVG paths and dot markers at each axis value. The chart is rendered in React using D3.js v3, leveraging the `d3.scale.linear` API for radial scaling and `d3.select` to append SVG elements, with an animated glow filter applied via `feGaussianBlur`.

Llimenzi

74% match

Loading thumbnail…

Fork of Smoothed D3.js Radar Chart

This example shows a smoothed radar chart comparing three mobile phone brands across eight attributes such as battery life, brand, and price. Three colored polygons represent iPhone, Samsung, and Nokia, with circular grid lines and labeled axes. The chart is built with D3.js version 5, using `d3.scaleOrdinal` for colors and `d3.scaleLinear` for the radial scale. The code sets `roundStrokes` to true, producing cardinal-closed curved paths for the area and stroke of each blob.

Llimenzi

74% match