D3-coding-challenge#2:SVG-Rectangle Matrix

100%

D3-coding-challenge#2:SVG-Rectangle Matrix

✓ Published0🌍 Public

Last edited Feb 19, 2022

Created on May 25, 2019

This example displays a 5x5 SVG rectangle matrix built from car data, with a header listing cars priced under $2000 and a list of car makes rendered as list items. The visualization uses D3 v5 selections to append colored rectangles to the SVG canvas, populating the diagonal in blue, the lower triangle in green, and the upper triangle in yellow, while adding boundary and diagonal lines. The code imports car data from a local module and uses `select`, `selectAll`, `data`, `enter`, and `append` from D3 to construct the matrix.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3-coding-challenge#1:Read cars JSON data and Display in a list

This example reads a JSON array of four cars—each with a year, make, model, and price—and renders the data as two separate HTML lists using D3 v5’s `select`, `selectAll`, `data`, `enter`, and `append` methods. The first list shows only the car makes, while the second displays a descriptive sentence for each car via the `print_info` helper. The page also uses an ES6 module (`constants.js`) to define a title, subtitle, and developer name, which are injected into header elements. All rendering targets SVG and HTML elements, with styling provided by an external Ubuntu font stylesheet.

MMartin MIAO

76% match

Loading thumbnail…

Cars Report

This example renders a simple bar chart of five car prices using D3 v5’s `select` and data-join pattern. Each rectangle’s height corresponds to a price value from the embedded `cars` JSON array, while the x position is computed from the index. The SVG is appended directly to the body, with `rect` elements styled via a CSS rule that sets a steelblue fill. No axes or labels are included, focusing solely on the raw geometric encoding of the data.

Yylzami40

75% match

Loading thumbnail…

Cars Report

This example demonstrates a basic D3 version 6 setup with a static SVG scene containing a green circle, rectangle, and a polyline path, accompanied by a text report that lists cars priced above $2,000. The visualization shows how D3 can structure SVG elements while also illustrating asynchronous data loading. The code uses the native `fetch`-like pattern through a custom `getCars()` promise, which resolves after a two-second delay, and then applies array filtering and mapping to format the car data into readable strings. The SVG rendering is done directly with hardcoded shapes rather than data-driven joins.

Aalbatross97

75% match

Loading thumbnail…

Practic03 | SVG

This example demonstrates static SVG shapes and primitives, including circles, rectangles, lines, and paths, drawn directly on a 960x500 canvas. It uses D3 v5 only to load the library, while the visualization itself is composed entirely of hand-coded SVG elements with inline styles and CSS classes for grouping and theming. A JavaScript snippet parses a hardcoded JSON array of car data, filters it by price, and formats a text report, though this output is not visibly integrated into the SVG graphic. The page also imports a `bundle.js` file, suggesting additional external code.

Hhimanshucse2012

74% match

Loading thumbnail…

Car Data

This example displays a car listing with the year, make, model, and price in South African rand, rendered as a large text element in an SVG-based page. The visualization loads data from a CSV file containing country population figures, though the primary car data is formatted via a custom `carFormat` function. The code uses D3 v4's `select` and `csv` methods to read data, while a separate `svgMan.js` module also selects the SVG element. The page includes a 1000x500 SVG canvas with minimal styling, and the project follows a React-based structure with a bundled script.

DDante L. Lentsoe

74% match

Loading thumbnail…

Cars Report

This example renders a blank SVG canvas with a red background using D3 v5 and a minimal HTML page. It selects the `<svg>` element with `d3.select`, then applies the background color via `style('background-color', 'red')`. The visualization does not yet display any data, serving as a starting point for adding car-related charts or reports. The code relies on the D3 library loaded from a CDN and demonstrates basic DOM selection and styling through D3’s API.

RRomans Gainanovs

74% match

Loading thumbnail…

Assignment 5 - Scatterplot matrix

This visualization combines a scatterplot matrix of car attributes with a bubble chart comparing average horsepower, torque, and highway MPG by brand. The matrix displays pairwise relationships among six numeric variables, with each point colored by car make using `d3.scaleOrdinal` and `d3.interpolateTurbo`. The bubble chart encodes highway MPG through circle radius via `d3.scaleLinear`, with a tooltip implemented using D3’s event handlers. Both views use `d3.csv` to load data and D3 v7 to render SVG elements.

Vvishusikka

73% match

Loading thumbnail…

automobiles

This example displays a summary, a preview table of the first five rows, and a static SVG flower illustration for a 100-row car dataset embedded as CSV. The page uses D3 v7 to render the data summary and table into the DOM, while the decorative SVG flower is drawn with basic shapes. It works offline in VizHub, with an optional CSV_URL variable for loading an external dataset.

Llohitsai.nikkil@gmail.com

72% match