Skip to main content
SimilarExport ZIP
100%

ice6

✓ Published0🌍 Public
Kkmuktha09@gmail.com
Last edited Oct 20, 2025
Created on Oct 19, 2025
Forked from ice6- q3

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ice 6 (bar+line)

This visualization combines a time-series line chart with a monthly bar overlay, showing three metrics (metric_A, metric_B, metric_C) over time alongside the monthly average of metric_A as semi-transparent blue bars. The code uses d3.csv and d3.rollup to aggregate the data, with d3.scaleTime, d3.scaleLinear, and d3.scaleBand for positioning, and d3.line for the trend lines. The SVG is rendered with an axis on the bottom and left, a legend on the right, and a light blue bar fill at 50% opacity. The source data is loaded from a GitHub Gist as a multiseries CSV.

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

Ice7task2_2

This example shows three metrics—metric_A, metric_B, and metric_C—plotted as separate colored lines over time in a single SVG line chart. The data loads from a remote CSV file and is parsed with d3.csv, with dates converted to JavaScript Date objects. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, d3.line to generate each path, and d3.axisBottom and d3.axisLeft to render the axes. A legend, created manually with SVG rect and text elements, identifies each metric’s color.

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

ICE6-multiline

This multi-series line chart displays Sales and Profit trends over time, with two lines drawn in steel blue and green on a shared axis. The visualization uses D3.js v7, loading CSV data from a GitHub gist and mapping numeric Day, Sales, and Profit fields. The code employs `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the SVG rendering, including labeled axes and a title.

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

ICE-6 Multi-Series and Combined Chart

This example presents two D3.js v7 charts built with SVG, using data from a city_temps.csv file. The first is a multi-series line chart for Dallas showing monthly Temperature, Rainfall, and Humidity trends with distinct colored lines and a legend. The second is a combined chart overlaying steelblue bars for rainfall with a tomato-colored line for temperature, using a band scale for months and a linear scale for values. Both charts utilize d3.csv, d3.line, d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, and D3 selections to render the visualizations.

Jjanisha30gowda@gmail.com
80% match
Loading thumbnail…

ICE 6 -3

This example shows a multi-series line chart comparing math, reading, and writing scores across sampled students, with interactive hover tooltips displaying exact values for each score type. The visualization uses D3 v7 to load CSV data from a GitHub gist, downsamples every 10th record, and renders the series with `d3.line` and `d3.curveMonotoneX` on an SVG canvas. Horizontal gridlines, a legend, and axes are generated via `d3.axisLeft` and `d3.axisBottom`. Three colored lines—steelblue, tomato, and seagreen—represent the respective subjects, with hover circles attached via `mouseover` events to populate the tooltip div.

Ssakethpapareddy@gmail.com
80% match
Loading thumbnail…

Multiline & Combined

Two D3.js v7 SVG charts display monthly data from ICE.csv. The first is a multi-series line chart plotting signups, revenue, and support tickets over time on a shared axis, using distinct pastel strokes and a legend. The second combines a bar chart of revenue with an overlaid line for support tickets, using shared time and value scales. Both charts employ d3.csv, d3.timeParse, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft.

Mmaddulanagasanjana@gmail.com
80% match