Skip to main content
SimilarExport ZIP
100%

ICE-6(multi series)

✓ Published1🌍 Public
Vvydeeshm@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6(multi series)

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.

Vvydeeshm@gmail.com
89% match
Loading thumbnail…

ice 6 multi_series

This multi-series chart tracks Sales, Revenue, and Profit trends for daily business metrics from January to July 2024. It overlays three colored lines on a time-based x-axis, with a combined bar chart highlighting selected sales data points. The visualization uses D3.v7 to render SVG elements, employing `d3.scaleTime` for the date axis, `d3.scaleLinear` for the value axis, and `d3.line` for drawing the series paths. An interactive legend identifies each metric, and the chart includes axis labels for clarity.

HHarshithaDontha@my.unt.edu
86% match
Loading thumbnail…

ice6

A multi-series combined chart displays three time-based metrics (metric_A, metric_B, metric_C) as smooth lines alongside vertical bars representing monthly averages of metric_B. The SVG visualization uses D3 v7 with d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, d3.rollups for monthly aggregation, and d3.line with curveMonotoneX for line generation. Gridlines and a legend support the view, with data sourced from a remote CSV file.

Kkmuktha09@gmail.com
84% 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
84% 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
84% match
Loading thumbnail…

ICE 6 Multi series Chart

This example uses D3 v5 APIs within a React component to render a multi-series chart combining bars and a line. D3’s `csv` loader, `scaleBand`, `scaleLinear`, `line`, and `curveMonotoneX` construct the visualization, which plots M2 Money Supply as bars and GDP as a line over time. The data comes from a remote CSV file, and the SVG rendering includes interactive features, tooltips, and hover effects with drop shadows. Axis ticks and labels are built via custom React components using D3 scales.

Ddiwashhumagain@my.unt.edu
84% 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
83% match
Loading thumbnail…

ICE-6

This example shows a bar chart of value by category using D3 v7 in SVG. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bars and gridlines drawn via `d3.axisLeft` and `d3.axisBottom`. A gradient fill is defined with `linearGradient` stops, and bars include a `<title>` for hover text. The data comes from a local CSV file.

Vvydeeshm@gmail.com
83% match