Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6(multi series)

✓ Published0🌍 Public
Vvydeeshm@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025

This fork of ICE-6 combines bar and line series to compare monthly sales and profit data loaded from a CSV file. Bars encode sales values while a monotone-curved line shows profit, with both sharing a linear y-scale and band x-scale. The D3 v7 chart includes gridlines, axis labels, a legend, and interactive tooltips on bars and points. SVG rendering is used throughout, leveraging `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and event handlers for mouse and keyboard accessibility.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6(multi series)

This example combines bar and line charts to compare sales and profit across seven months, with bars encoding sales and a monotone line tracking profit. The SVG visualization is built with D3 v7, using `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` with `d3.curveMonotoneX`. Interactive tooltips appear on bar and dot hover via mouse events, while gridlines, axis labels, and a custom legend clarify the dual-series data loaded from a CSV file.

Vvydeeshm@gmail.com
89% match
Loading thumbnail…

Fork of ICE-6(Scatter plot)

This scatter plot from the ICE-6 series visualizes monthly sales versus profit using D3 v7 with SVG rendering. Each circle encodes a month’s sales on the x-axis and profit on the y-axis, with a hover tooltip revealing exact values via mouse events. The chart includes gridlines, axis labels, and a legend, pulling data from a local CSV file. A title and caption provide context, while the dark theme and scaling functions (d3.scaleLinear, d3.extent) structure the visualization clearly.

Vvydeeshm@gmail.com
88% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 (Multi series chart)

This multi-series chart combines bar and line encodings to compare financial metrics of a fictional company across years, highlighting revenue and expenses as bars against profit and employee counts as overlaid lines. Built with React and D3 v6, the visualization uses separate y-scales for bars and each line series, with axes rendered via `axisLeft`, `axisRight`, and `axisBottom` on an SVG. The code employs `scaleBand` and multiple `scaleLinear` instances, then draws bars as `rect` elements and lines using D3's `line` generator, with gridlines created from a reused left axis.

Ssowjanya
87% match
Loading thumbnail…

Fork of ICE6 - Marks and Channels

This example shows a bar chart of sales revenue per product from January through May 2024. It uses D3 v6 with SVG rendering, loading CSV data from a GitHub gist and aggregating it with `d3.rollup` to sum revenues by product. Horizontal bars are drawn as `rect` elements with a steelblue fill that turns orange on hover, using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are generated with `d3.axisLeft` and `d3.axisBottom`.

Bbhargavinalamothu@gmail.com
86% match
Loading thumbnail…

Fork of ICE-6

This is a bar chart of supermarket sales data, showing the unit price for the first ten product lines from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles for each bar. Data is loaded asynchronously via `d3.csv` and limited to ten entries before being displayed. The chart includes custom axes with gridlines and labels, all rendered as SVG elements within a React component.

SsreepavanKothapalli
85% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of ICE-7 Line Chart visualizes the cost of sales from 2000 to 2013 using an SVG line chart. The chart plots year-based data on the x-axis against cost values on the y-axis, with axis labels and a title displayed directly. Data is loaded from a CSV file via `d3.csv`, and the visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to construct the scales, path, and axes. The final rendering is a red stroke line path within a 960x500 SVG container.

Bbhanuteja1807@gmail.com
83% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of an ICE-7 line chart visualizes the cost of sales from 2000 to 2013 using D3 v5. It renders an SVG line chart with time-scaled X-axis and linear Y-axis, using D3's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The chart loads CSV data from a GitHub gist, converts the Year field to `Date` objects, and draws a red line path via `line()`. The visualization includes labeled axes, a title, and grid lines generated through tick marks.

AAmrutha Mohan
83% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of the ICE-7 line chart visualizes the cost of sales from 2000 to 2013, plotting yearly values as a single red line. It uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the path, with d3.axisBottom and d3.axisLeft rendering labeled axes. The chart loads CSV data from a GitHub gist, parses the year and cost fields, and renders an SVG within a centered container. Axes include gridlines via tickSize, and the code uses D3 v5.

Nnsatyaprakash22
83% match