ICE-6 Encoding Data with Marks and Channels

100%

ICE-6 Encoding Data with Marks and Channels

• Draft1🔗 Unlisted

Last edited Mar 9, 2026

Created on Mar 4, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

KKeith Miller

83% match

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

83% match

Loading thumbnail…

ICE-6-Q1

A horizontal bar chart displays the top 10 customers by credit amount from a German credit dataset, with steel-blue bars and customer IDs on the y-axis. The visualization uses D3 v5's `scaleLinear` and `scaleBand` to map the data, while `axisLeft` and `axisBottom` generate the axes. Credit amounts are formatted using D3's `format` function, and the chart is rendered as an SVG with a title and axis labels. Data is loaded asynchronously via `csv` and truncated to the first ten records.

Hhossaphul

77% match

Loading thumbnail…

ICE-6

The visualization displays the credit limit for ten clients as a horizontal bar chart. Each bar’s length encodes the `Credit_Limit` value, with clients listed on the y-axis. The chart is built with React and D3 v5, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering is generated manually with React elements.

CChandrashekharRamamuthi

73% match

Loading thumbnail…

ICE-6: Marks and Channels

A bar chart displays sales data for eleven items, with each item’s sale amount encoded by the horizontal bar length. The visualization uses React to manage state and render the SVG, while D3 v5 scales (`scaleBand`, `scaleLinear`) and CSV loading (`d3.csv`) handle data binding and axis generation. Rectangular marks represent values, with orange gridlines and labeled axes for clarity.

SSaiSree0122

72% match

Loading thumbnail…

ICE-6

A horizontal bar chart displays the credit limits of the first twenty clients from a CSV dataset, with each client identified by their CLIENTNUM on the y-axis. The chart uses React with D3 v5, employing d3.csv for data loading, scaleBand for the categorical y-axis, and scaleLinear for the numeric x-axis. SVG rectangles render the bars, while custom AxisLeft and AxisBottom components provide tick labels and grid lines. The visualization focuses on comparing credit limits across individual clients.

CChandrashekharRamamuthi

72% match

Loading thumbnail…

ICE-6 Creating Marks And Channels

This bar chart visualizes the relationship between time invested in studying and marks scored for 15 students, using a horizontal bar layout. The chart maps time spent studying to the y-axis against a blue horizontal rectangle for each student, whose width encodes the marks obtained. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.max` to determine the scale domain. The SVG rendering includes custom axis lines and labels, with data sourced from a CSV file.

Aakhilgupta11

72% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example renders a horizontal bar chart of the ApplicantIncome for the first fifteen Loan IDs from a CSV hosted on GitHub. The visualization is built with React and D3 v5, using D3's `scaleBand` and `scaleLinear` for axes and `csv` for data loading. It renders SVG directly through React, with pink rounded rectangles as marks and custom grid lines and tick labels.

CCHANDU BHARGAVI

71% match