Skip to main content
SimilarExport ZIP
100%

Fork of A4_Bar-chart

✓ Published1🌍 Public
Mmounishnaidu96@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024
Forked from A4_Bar-chart

This fork of A4_Bar-chart visualizes fruit sizes as a bar chart. The SVG bars are rendered using D3’s `scaleBand` and `scaleLinear`, with a `mouseover` handler that turns a bar orange and shows a tooltip. Data is fetched from a GitHub gist and parsed from CSV text. The chart includes rotated x-axis labels and axis titles labeled "FRUITS" and "SIZE". Built with React but uses vanilla D3 for SVG layout and interactions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes the total marks achieved by individual students, with each bar representing a student’s score. The chart uses an interactive tooltip that appears on hover, changing the bar’s color to orange and displaying the student’s ID and marks. Built with D3.js v6 and rendered as SVG, the visualization loads data from a CSV file and employs `d3.scaleBand` and `d3.scaleLinear` for axes. The chart includes rotated x-axis labels for student IDs, axis titles, and a descriptive title, all styled with basic CSS for clarity.

Ppavan vasamsetti
83% match
Loading thumbnail…

Fork of A4_Bar-chart

A bar chart compares the populations of cities, with each bar colored steel blue and turning orange on hover, while a tooltip displays the city name and population value. The visualization is built with React and uses D3 v6 to load data from a CSV file via `d3.text`, parse it into an array, and render the chart as SVG. Axes are added with `d3.axisBottom` and `d3.axisLeft`, using a band scale for cities and a linear scale for population, with the chart including rotated x-axis labels and a title.

Mmounishnaidu96@gmail.com
83% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes life expectancy against population, using the D3.js library (v6) to render SVG bars and axes. The data is loaded from a CSV file via `d3.text`, then parsed and bound to rectangles. Hovering a bar triggers `mouseover` and `mouseout` handlers, changing the bar’s fill to orange and displaying a tooltip with the exact values. The chart includes rotated x-axis labels, axis labels, and a title, with scales set via `d3.scaleBand` and `d3.scaleLinear`.

Ppavan vasamsetti
82% match
Loading thumbnail…

Fork of d3.js learning

This stacked bar chart visualizes the relative proportions of four fruit types (redDelicious, mcintosh, oranges, and white) across the years 2006 to 2016. Each bar segment represents the quantity of a fruit per year, with colors mapping each category. The chart uses d3.layout.stack to stack the series, along with d3.scale.ordinal for the x-axis and d3.scale.linear for the y-axis. Axes are rendered with d3.svg.axis, and the SVG output is styled with CSS. The data is embedded as an array of objects in the code.

RRohit-2710
82% match
Loading thumbnail…

Fork of Making a Bar Chart

This example shows a simple bar chart comparing quantities of five fruits, with each bar filled in orange against a blank background. The visualization renders in SVG, using D3 version 5’s core selection and data-binding methods to load values from an external CSV file. The code creates a fixed 960 by 500 pixel canvas and uses D3’s `scaleBand` and `scaleLinear` to position and size the rectangles based on the parsed data, while the stylesheet sets the fill color.

BBhanu Siva Kumar Kommana
81% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes average salaries by job title, with each bar’s height mapped to the population value from a CSV file loaded via `d3.text`. Built with D3 v6 in a React framework, it uses `d3.scaleBand` and `d3.scaleLinear` to position rectangles, includes interactive tooltips on hover that change bar color, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The SVG output is styled with rotated x-axis labels and a title.

Ppavan vasamsetti
81% match
Loading thumbnail…

Fork of Reusable Barplot

This fork of a reusable barplot shows grouped bars comparing element quantities—like Nitrogen, Oxygen, and Helium—across fruit categories (Banana, Apple, Mango, Orange). Built with D3 v7, it uses `scaleBand` for x-axis grouping, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. Animated transitions via `transition()` and `axisBottom`/`axisLeft` render the SVG. Interactive legend labels toggle bar visibility by filtering data and re-rendering the chart through the custom `toggleBars` handler.

SSubhendu Karmakar
81% match
Loading thumbnail…

Fork of Bar Chart D3

This bar chart visualizes XYZ Foods stock prices over time, with dollar-labeled y-axis ticks and a year-based x-axis. The chart uses D3 v4’s `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG `rect` elements for bars. Data loads from an external CSV file via `d3.csv`, with the chart rendered inside an SVG container.

SSimon Hackbert
81% match