Skip to main content
SimilarExport ZIP
100%

ICE_5_Nirupama

✓ Published0🌍 Public
NNirupama Karanam
Last edited Oct 3, 2025
Created on Oct 3, 2025
Forked from ICE 5_Harish

This example loads a cars dataset from a raw GitHub gist and presents an overview with summary statistics, a preview table of the first 10 rows, and a bar chart counting cars by color. It uses D3 v7 to parse the CSV, compute aggregated values with `d3.rollup`, and render the chart as an SVG with `d3.scaleBand` and `d3.scaleLinear`. Data is displayed in an HTML table, and the visualization includes styled axes and color-coded bar fills.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Vikas ICE5

This example visualizes the ICE-5 scientific dataset by summarizing its contents through colorful, car-shaped icons. It shows the data’s basic properties—file size, row count, and column count—alongside a legend of four categorical colors (Han Purple, Green, Harvest Gold, and Hanasa Yellow). The visualization uses d3.csv to fetch and parse the remote CSV file, then computes and displays the summary statistics in a text container. The page combines static SVG graphics for the color-coded cars with D3’s data-loading API to present both the dataset’s structure and its visual palette.

Ppanduvik99@gmail.com
82% match
Loading thumbnail…

ICE_7_Nirupama_Scatterplot

This scatterplot displays the relationship between mileage (MPG) and price for a dataset of cars, with each point colored by brand using a Tableau10 ordinal scale. The reusable component pattern in `index.js` builds the SVG chart with D3 v7, using `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Hover tooltips appear via the SVG `title` element, showing the car model, mileage, price, and brand. Data loads from a raw GitHub Gist CSV file, processed with `d3.csv` and `d3.autoType`. The legend, positioned to the right, lists all brand categories with matching colors.

NNirupama Karanam
81% match
Loading thumbnail…

Fork of ICE-5 mm

This example presents a tabular preview of a car performance dataset, displaying the first ten rows from a CSV file loaded from a remote GitHub gist. The page shows a summary of the dataset’s size, row count, and column count above the table. The visualization is built using the D3.js v7 library, specifically using `d3.csv` to parse the data and `d3.select` with `.append` and `.join` methods to construct the HTML table structure. Styling is applied via an external CSS file, with column headers transformed from underscores to uppercase text.

Kkmuktha09@gmail.com
80% match
Loading thumbnail…

Fork_ICE_6_Nirupama

This interactive scatter plot visualizes the relationship between car mileage (MPG) and price, with each point colored by car color. The chart uses D3 v7 and loads data from a GitHub Gist, presenting an SVG rendered via a viewBox for responsiveness. Users can hover over points to see details. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors from ColorBrewer, and d3.csv for data loading, with a d3-legend for the color key.

NNirupama Karanam
80% match
Loading thumbnail…

ICE-5: Loading and Parcing the CSV data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js v7, displaying a summary of the resulting dataset in a styled HTML page. The code fetches car data from a GitHub gist via `d3.csv`, then computes and presents the file size in kilobytes, row count, and column count within a green `<pre>` element. The page includes a yellow heading and a background image of a sports car, with formatting controlled through embedded CSS. No additional visualization or chart is rendered beyond the textual data summary.

Aavinash021997
80% match
Loading thumbnail…

ICE 5

This example presents a plain HTML table and summary statistics for a vehicles dataset loaded from a remote CSV file. The page displays the approximate size of the data in kilobytes, the number of rows, and the number of columns, followed by the full dataset in a styled table. It uses D3.js v7’s `d3.csv` to fetch and parse the data, then builds the table and summary text with string templates and D3’s selection API. The styling relies on standard CSS for the container, table, and hover states.

Ssaisathwikaguntupalli@gmail.com
80% match
Loading thumbnail…

Fork of ICE 5_Mukthamukhi

This example presents a data overview of a cars dataset, displaying a summary of file size, row count, and column count before rendering a preview table of the first eight rows. The page loads CSV data via `d3.csv` and constructs the table using D3's data join pattern. The visualization dynamically creates and styles page elements, including a message banner and chart containers, using D3 v7 and custom CSS, all rendered through SVG and standard DOM manipulation.

Kkmuktha09@gmail.com
79% match
Loading thumbnail…

ICE_7_NIRUPAMA_AREACHART

This area chart displays the average car price per year, aggregated from a Cars.csv dataset. It uses D3 v7's `d3.csv` and `d3.rollup` to process the data, then renders an SVG area chart with `d3.area` and `d3.scaleLinear`. The chart includes axes, gridlines, and labeled axis titles, with interactive tooltips on data points showing the year, average price, and model count.

NNirupama Karanam
79% match