Skip to main content
SimilarExport ZIP
100%

Fork of vamshi

✓ Published0🌍 Public
Kkotlavamsireddy@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024
Forked from HTML Starter

This bar chart visualizes the weight of various fruits from an extended sample dataset. The chart uses steelblue bars on a Cartesian plane, with the fruit names on the x-axis and their corresponding weights on the y-axis. Hovering over a bar changes its color to a lighter royal blue. The visualization is built with D3 v7, using `d3.csv` to load the data, and `d3.scaleBand` and `d3.scaleLinear` to map the categorical and continuous dimensions. Axis labels are added manually, and bar height represents the weight value.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of vamshi

This bar chart visualizes the weight of various fruits from an extended sample dataset. The chart uses steelblue bars on a Cartesian plane, with the fruit names on the x-axis and their corresponding weights on the y-axis. Hovering over a bar changes its color to a lighter royal blue. The visualization is built with D3 v7, using `d3.csv` to load the data, and `d3.scaleBand` and `d3.scaleLinear` to map the categorical and continuous dimensions. Axis labels are added manually, and bar height represents the weight value.

Kkotlavamsireddy@gmail.com
100% match
Loading thumbnail…

Fork of Fork of vamshi scatter

This scatter plot displays the weight of various fruits, with each fruit category plotted along the x-axis and its corresponding weight in grams on the y-axis. The code uses D3.js v7 to fetch data from a remote CSV file via `d3.csv`, then maps the categorical fruit names to a band scale (`d3.scaleBand`) and the numeric weights to a linear scale (`d3.scaleLinear`). Circles are rendered as SVG elements representing each fruit’s weight. The chart includes rotated x-axis labels through `d3.axisBottom` and labeled axes, with the styling applied via CSS classes.

Kkotlavamsireddy@gmail.com
86% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart ranks fruit sales in descending order along a vertical band scale, with horizontal bars extending proportionally to each fruit’s sales value. The visualization loads data from a CSV file, multiplies the sales figures by 10, and renders the result as an SVG using D3 v7. It employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and rectangles, with fixed margins and a steely-blue fill for all bars.

RRadhakrishna246
79% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example shows a static bar chart of a fruits dataset, displaying categorical values along the x-axis and numeric magnitudes on the y-axis. It loads a remote CSV file using `d3.csv` and renders the visualization as an SVG on the page. The code employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the value axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. The chart explicitly constructs bars with SVG `rect` elements, while the data originates from a GitHub-hosted CSV file.

Kkotlavamsireddy@gmail.com
77% match
Loading thumbnail…

Fork of 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.

Mmounishnaidu96@gmail.com
77% 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
76% 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
76% 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
74% match