Fork of Shapes and Colors with SVG and CSS

100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public

Last edited Oct 5, 2025

Created on Oct 5, 2025

Forked from Shapes and Colors with SVG and CSS

This fork presents a car color dataset loaded from a CSV file using `d3.csv`, displaying summary statistics and a styled HTML table. The table renders the first five data rows, with the hex color column including a colored swatch for each car brand. Beneath the table, a custom, hand-coded SVG illustration depicts a simple car with a blue body, roof, wheels, and a yellow headlight. The page is styled with standard HTML/CSS, while D3.js (v7) is used exclusively for data fetching and table generation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a static SVG car graphic alongside a text-based dataset summary. The visualization displays a blue car with white windows and black wheels, while the adjacent summary reports the CSV file’s size, row count, and column count. The code uses D3.js v7’s `csvParse` method and the Fetch API to load and parse the external CSV dataset. Rendering is done via inline SVG elements like `rect` and `circle`, with styling handled through CSS.

Ssriram.official9@gmail.com

81% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a fork of a shapes-and-colors visualization built with D3 v7 and SVG. It renders a static SVG canvas containing a collection of colored shapes, styled entirely through external CSS. The code uses `d3.select` to target the SVG element and loads D3 from a CDN, while the stylesheet controls the visual appearance. No interaction or animation is implemented; it focuses on showcasing basic SVG and CSS integration.

Ggabcee

80% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A fork of an SVG and CSS example, this visualization uses a blank 960x500 SVG canvas as its starting point. The code defines an SVG structure and applies styles through an external stylesheet, with classes for lines and paths that set stroke colors and line properties. Using D3.js to select the SVG element, the example primarily demonstrates how to set up a basic SVG-based visualization scaffold, with the JavaScript beginning to style the background color. The HTML file links the stylesheet and the D3-driven script, showing a minimal setup for SVG rendering.

PPaul Kot

79% match

Loading thumbnail…

Fork of Fork of Vikas Fork of Fork of Fork of Fork of HTML Starter

This example visualizes scientific data about ICE-5, displaying a summary of a CSV dataset alongside a set of SVG color swatches with labels such as Han Purple and Harvest Gold. It uses D3 v7 to fetch and parse the remote CSV via `d3.csv`, then calculates the file size, row count, and column count to display in a pre-formatted text block. The rendering is done entirely in SVG, with static circles and text elements embedded directly in the HTML. The page also includes an external SVG image, though its content is not programmatically processed.

Ppanduvik99@gmail.com

78% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A scatterplot of automobile data from the `cars.csv` dataset displays each car as a semi-transparent circle, with weight on the x-axis and horsepower on the y-axis. The visualization uses D3 v6 to load the CSV, create linear scales with `scaleLinear`, and append SVG circles. Grid lines are drawn via `axisBottom` and `axisLeft` with custom tick sizes, while CSS styles the circles in steelblue. A text label incorrectly reads "Months, count," and the axis title is placed at a fixed position.

KKateryna

78% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the end-to-end process of loading a remote CSV dataset and generating a data-driven SVG visualization. The page presents key statistics, a preview table of the first five rows, and a custom SVG plot where each mark represents one CSV row, with shape and color mapped to the category column and position determined by row index and value. The implementation uses D3.js v7 to fetch and parse the data with `d3.csv` and `d3.autoType`, then dynamically builds the table and SVG elements using JavaScript DOM manipulation and the SVG API.

Ssakethpapareddy@gmail.com

78% match

Loading thumbnail…

Fork of ICE 5

This example displays a tabular view of car data fetched from a GitHub Gist, showing a preview of rows and column names within a styled HTML page. It first renders a decorative SVG image, then uses D3.js `d3.csv` to load the external CSV, computes the file size in kilobytes, and appends a table to the DOM using `d3.select` and `append`. Styling is applied via CSS for the table, borders, and background, providing a clear, albeit basic, data exploration interface.

Mmaheganesh

78% match

Loading thumbnail…

Fork of Fork of Fork of Vikas Fork of Fork of Fork of Fork of HTML Starter

This example demonstrates a scientific data visualization of the ICE-5 dataset, showing summary statistics about the data's size and structure in a text container. It also includes an embedded SVG image and a custom color legend rendered as four simple car graphics, each labeled with a specific color name. The visualization uses D3.js v7 to load and parse a remote CSV file via `d3.csv`, then displays the number of rows, columns, and file size in kilobytes. The SVG elements are drawn manually with basic shapes like `rect` and `circle` to illustrate the color palette.

Ppanduvik99@gmail.com

78% match