Skip to main content
SimilarExport ZIP
100%

ICE-5

✓ Published0🌍 Public
DDaniel Mata
Last edited Feb 27, 2022
Created on Feb 27, 2022
Forked from HTML Starter

This example presents a bar chart summarizing a dataset of musical instruments, highlighting the most common color for guitars, basses, drums, and keyboards. A text panel displays these summary statistics, including dataset size in kilobytes, row count, and column count. The visualization uses D3 v7 to load CSV data via `d3.csv`, group it with `d3.group`, and render an SVG bar chart with band and linear scales for axes. Popular colors are computed using `d3.mode` and displayed alongside the chart.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE5

This example shows an interactive bar chart of letter frequencies, where clicking a bar highlights it and dims the others, with a title reading "Data Visualization" above the plot. Built with React and D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines and labels, and a `ResizeObserver` to adapt the SVG to its container. Data loads from a local CSV file via `d3.csv`, and bar styling transitions smoothly on hover and selection.

Ssrinathkarumuru@my.unt.edu
84% match
Loading thumbnail…

ICE-6_Musical_Instruments

This bar chart displays the average price of musical instruments across several categories. It uses D3.js v7 to load CSV data from a remote gist, aggregate prices by category, and render an SVG chart with axes, gridlines, and hover tooltips. Bars are colored steelblue and highlight orange on mouseover, with value labels shown above each bar. The layout uses responsive styling and a gradient background.

Ppasalabala22@gmail.com
82% match
Loading thumbnail…

ICE 7 - Pie Chart

A pie chart visualizes the distribution of instruments sold, breaking down totals for Guitar, Bass, Drums, and Keyboard from a CSV dataset. The chart renders as an SVG using D3 v7’s `d3.pie` and `d3.arc` generators, with a color scale from `d3.schemeSet2`. A legend lists each instrument with its count, and the chart is accompanied by a title. Data is grouped and counted using `d3.group` and `d3.count`, with the visualization displayed in a React-compatible HTML page.

DDaniel Mata
82% match
Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
81% match
Loading thumbnail…

ice - 6

This example shows a simple bar chart of letter frequencies, with clickable bars that highlight the selected letter while dimming others. The chart is built with D3 v7 inside a React component, using `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for axes, and SVG `rect` elements for bars. Data comes from a local CSV file loaded via `d3.csv`. A `ResizeObserver` in `useDimensions` tracks the container size, and transitions animate bar color and opacity on selection.

Ssrinathkarumuru@my.unt.edu
80% match
Loading thumbnail…

ICE-5

The visualization presents a static summary of sales data, displaying four colored bars that compare revenue figures against a white baseline. The page includes a gradient background with a data overview section showing total records, total revenue, total units sold, and the list of regions. The code fetches a CSV file from a GitHub gist using `d3.csv`, then computes aggregate values with `d3.sum` before rendering both the SVG bar chart and the summary text dynamically via JavaScript.

Sshreshnaanugu@gmail.com
80% match
Loading thumbnail…

ICE 5

This example displays a dataset summary alongside a static SVG composition of colored circles. It loads a hosted CSV file of global economy data and computes basic statistics for numeric columns, including row count, min, max, and mean. The visualization renders a 3-by-10 grid of circles using D3 v7’s selection and data-joining methods, applying a Tableau color scheme and decorative opacity. The code uses `d3.csv` for parsing and `d3.min`, `d3.max`, and `d3.mean` for summary calculations, with all output drawn as SVG elements.

CCharith Kapuluru
80% match
Loading thumbnail…

ICE6

A React-based bar chart visualizes letter frequencies from a CSV dataset. Built with D3 v7, it uses `scaleBand` for the x-axis and `scaleLinear` for the y-axis, rendering bars with rounded corners and a teal fill. Clicking a bar toggles its selection, highlighting it while dimming others. The chart includes axes with gridlines, titles, and responsive sizing via a `ResizeObserver`.

PP Manisha
79% match