Barchart_Niharika_ICE_6

100%

Barchart_Niharika_ICE_6

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This interactive dashboard presents campus snack data through three coordinated visualizations: a bar chart comparing a chosen metric across categories, a scatter plot examining relationships between two quantitative attributes, and a multi-series chart combining bars with an overlaid line. Built with D3 v7, the SVG-based implementation uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and includes interactive controls for metric selection, fullscreen toggling, and glassmorphic tooltips via the `tooltip` helper function.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 5_Niharika

This example presents a tabular preview and a suite of chart-based visualizations for a campus snacks dataset loaded from a CSV file. Using D3.js v7, it renders a bar chart, donut chart, scatter plot, and stacked charts directly into SVG elements, with a tooltip for interactions. The page also includes a U.S. map drawn with TopoJSON, loaded dynamically via the `topojson-client` library. Data is summarized and displayed across multiple chart types to explore patterns in the dataset.

118121a1545

82% match

Loading thumbnail…

ICE-6 BARCHART

This bar chart visualizes sales figures for 100 products, with each bar’s height mapped to the product’s sales units. The visualization uses D3 v7 to load a CSV file from a GitHub gist, then renders an SVG with steel-blue bars that turn orange on hover. A band scale positions categorical products along the x-axis, while a linear scale maps sales values to the y-axis. The chart includes axis labels, a rotated x-axis to accommodate product names, and a title, with horizontal grid lines for readability.

Uuguggila@gitam.in

75% match

Loading thumbnail…

Fork of Barchart_ICE-6

This example shows an interactive bar chart rendered as SVG via D3 v5 within a React framework. The chart visualizes categorical data with vertical bars, featuring hover interactions and tooltips that display values. The graphic includes a stylized decorative header illustration with abstract curves and shapes, and a complex y-axis with value labels. The visualization uses a clean, minimal design with gray tones and orange highlights for the bars, with axes and labels clearly delineated.

74% match

Loading thumbnail…

ICE

This example displays a 3D bar chart of student marks across four subjects: Science, English, History, and Maths. The visualization uses the `d3-x3d` library to render the chart in a web browser, with data loaded from a CSV file via `d3.csv`. The chart is created using the `barChartMultiSeries` API, which draws multiple series of bars for each student, while `d3.scaleLinear` and axis functions position the bars along the axes.

SSnarasimhap

74% match

Loading thumbnail…

Barchart

This interactive bar chart displays multiple data series as colored bars, with buttons allowing users to toggle between grouped and stacked layouts and show or hide individual series. The chart uses D3 v6 with SVG rendering and animated transitions. Data is generated procedurally using a bump function that creates smooth, pseudo-random positive values. Tooltips show precise values on hover, while radio-style buttons and series toggles control the visualization state.

Ppsabela

74% match

Loading thumbnail…

ICE-5 Campus Food Trucks

This example visualizes campus food truck data by showing a bar chart of cuisine counts alongside summary statistics and a full data table. It loads a CSV file from a GitHub gist using D3.js’s `d3.csv` method with `d3.autoType` for type inference. The bar chart uses `d3.scaleBand` and `d3.scaleLinear` to map cuisine categories to rectangular bars, with counts labeled above each bar. Summary values are calculated via `d3.mean`, and the table is populated using D3’s data join pattern.

Jjanisha30gowda@gmail.com

74% match

Loading thumbnail…

ICE-5 Harsh

This dashboard displays a summary and preview of a Student Performance dataset, showing the first five students in a styled table and a bar chart of their GPAs. The D3.js v7 code loads CSV data via `d3.csv` and uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the chart. A `<div>` message container reports dataset size, while the table uses CSS for zebra striping and hover effects.

HHarshithaAru06

74% match

Loading thumbnail…

barchart-monthwise

This interactive bar chart displays malnutrition metrics across eight administrative blocks, letting users switch between height percentage, weight percentage, or their combined value, and filter by month (August, September, October). The visualization uses D3 v5 with SVG and animated transitions, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Bars are colored with a sequential `d3.scaleSequential` interpolating through `d3.interpolateRdYlGn`. Tooltips appear on hover, and the data comes from external CSV files.

AAnimesh Nautiyal

73% match