Skip to main content
SimilarExport ZIP
100%

ICE-6 Encoding Data with Marks and Channels Mulit-series

• Draft0🔗 Unlisted
KKeith Miller
Last edited Mar 9, 2026
Created on Mar 7, 2026
Forked from D3 Starter

This multi-series line chart visualizes how average credit amount, age, and installment commitment vary with loan duration, using normalized values to compare three metrics on a single axis. The D3.js v7 code loads a CSV dataset from a GitHub gist, aggregates records by duration, and applies min-max scaling to each series. Three separate line paths, colored blue, green, and an additional series, are drawn using d3.line and d3.scaleLinear, with axes generated via d3.axisBottom and d3.axisLeft. The chart renders as an SVG, with data aggregation performed through d3.rollups and d3.mean.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Encoding Data with Marks and Channels Scatter

This scatter plot visualizes the relationship between loan duration and credit amount, with each point representing an individual credit record. The visualization uses D3 v7 to load CSV data from a remote GitHub gist, map the numeric fields to linear scales, and render circles as marks. The SVG output includes axes generated with `d3.axisLeft` and `d3.axisBottom`, along with descriptive labels and a title. All circles are uniformly filled in forest green, encoding the data solely through spatial position along the x and y channels.

KKeith Miller
88% match
Loading thumbnail…

ICE-6 Encoding Data with Marks and Channels

This bar chart shows the average credit amount for each loan purpose in a German credit dataset, with purposes on the x-axis and average amounts on the y-axis. The visualization uses d3.csv to load the data, d3.rollups to aggregate by purpose, and d3.mean to compute averages. Rectangles are drawn with d3.scaleBand and d3.scaleLinear, while axes are rendered using d3.axisBottom and d3.axisLeft, with rotated x-axis labels and SVG text for titles.

KKeith Miller
83% 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
78% 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
78% match
Loading thumbnail…

ICE 6 multi line

This example displays a multi-series line chart titled "Sales Multi-Series Line Chart," plotting Sales, Profit, and Expenses across 161 time points. The chart filters the CSV data to every tenth month, reducing visual clutter. Built with D3.js v7, the visualization uses `d3.line` to create three distinct colored paths and renders the output as SVG. The code also includes axes, a legend, and data point markers, with the y-axis scaled to accommodate the maximum value across all three series.

GGuntupalli Mohan kalyan
76% 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
76% 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
76% 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
76% match