Skip to main content
SimilarExport ZIP
100%

ICE-6 Encoding Data with Marks and Channels Scatter

✓ Published0🌍 Public
KKeith Miller
Last edited Mar 9, 2026
Created on Mar 7, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Scatter Plot

This example presents an ICE-6 scatter plot, a static visualization that displays individual data points as circles within a bounded area. The plot uses D3.js (v7) to create the visualization, with the code defining scales for positioning, axes for orientation, and SVG elements for rendering. The data appears to be plotted without any encoding for size or color, suggesting a focus on spatial distribution rather than multidimensional analysis. The implementation relies on standard D3 methods like `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, and the visualization is contained in a simple HTML file with a single container div.

Nneeharika2023@gmail.com
75% 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
74% match
Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com
74% match
Loading thumbnail…

ICE-6

This scatter plot visualizes the relationship between sales in North America and product ratings, using a dataset loaded from a CSV file via `d3.csv`. The visualization shows individual data points as navy blue circles, with sales figures mapped to the x-axis and ratings constrained to a fixed domain of 7 to 10 on the y-axis. The chart is rendered as an SVG using D3 v6, with linear scales (`scaleLinear`), axes generated via `axisLeft` and `axisBottom`, and data points positioned using the `extent` function to determine the x-domain. The plot is titled and styled directly in the HTML document.

Ssatishnarne99@gmail.com
73% match
Loading thumbnail…

ICE-6(2)

This scatter plot visualizes the relationship between team scores and subject scores, with each data point rendered as a circle. The visualization uses D3 v7 to load tab-separated data from a remote gist, parse it, and render it as an SVG. It includes animated circle transitions using `transition.attr` to grow points from zero radius, plus tooltip interactivity via mouseover events. Red circles mark team scores on the x-axis, while blue circles represent subject scores, with axes labeled through `d3.axisBottom` and `d3.axisLeft`.

SSYAM TEJ
73% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes store sales data, showing the relationship between sales and the number of orders for products across multiple categories, with each category assigned a distinct color. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear` and `extent` to map the axes, with `axisLeft`, `axisBottom`, and SVG circles rendering the points. Axis labels are styled via CSS and SVG text elements.

Llibramanju
73% match
Loading thumbnail…

ICE 6 -2

This scatterplot compares math and reading scores for individual students, plotting each as a semi-transparent steelblue point. The visualization reveals the correlation between the two subjects across the dataset. It uses D3 v7 with an SVG rendering approach, loading CSV data from a GitHub gist and applying linear scales via `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while labels and a title are added as SVG text elements.

Ssakethpapareddy@gmail.com
73% match
Loading thumbnail…

ICE-6(Scatter plot)

This scatter plot visualizes 150 samples of x_value against y_value, with points colored by group using a Tableau10 ordinal scale. The data is loaded from a CSV file via d3.csv and rendered as SVG circles with opacity, axes, labels, and a legend. Built with D3 v6, it uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.axisLeft/d3.axisBottom for tick marks. Points respond to hover with a black stroke, and the chart includes a white background with margin-based layout.

Kkmuktha09@gmail.com
73% match