Skip to main content
SimilarExport ZIP
100%

Shapes of Data

✓ Published0🌍 Public
Bbadrinath888@gmail.com
Last edited Oct 3, 2025
Created on Oct 3, 2025

This interactive table pairs geometric properties with SVG diagrams, allowing viewers to explore shapes like circles, triangles, and cubes. The visualization uses D3.js (v7) to load a remote CSV dataset, rendering a sortable table that highlights the corresponding SVG shape when hovering over a row. The table displays each shape's edges, vertices, faces, and category, while hover states trigger red strokes on the matching graphical element. Built with standard SVG polygons and rectangles, the example also demonstrates custom sorting logic for comparing shape characteristics across both 2D and 3D forms.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes

This example displays a simple set of primitive shapes—a light blue rectangle, a blue circle, a green ellipse, a red line, and text—drawn in an SVG canvas, alongside HTML heading and paragraph elements. The page also includes a placeholder for a map and code that fetches salary data from a GitHub-hosted CSV file using `d3.csv()`, parsing the state and mean salary fields into console output. The visualization uses hardcoded shape coordinates within an inline SVG, with styling defined through CSS classes.

Jjyjuni
80% match
Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001
79% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how D3.js can render population data using SVG shapes. The visualization loads a CSV file containing country and population values, then logs the parsed data to the console. The SVG canvas displays a yellow background with basic rectangular styling applied through CSS. The code uses d3.csv for data loading and d3.select to manipulate the SVG element, though the actual bar or shape rendering is not implemented in the provided files.

Ssarakouzayha
79% match
Loading thumbnail…

Shapes with SVG and CSS

The visualization shows a daily count of users over time, displayed as a series of identical, fixed-size square shapes laid out on an SVG canvas. The code reads the date and user count from a local CSV file (123.csv) and uses D3 v5 to create the shapes. It defines time and linear scales for potential coordinate mapping but ultimately places each rectangle with a constant width and height of 200 pixels, without using the data values for sizing or positioning. The rendering relies on D3’s SVG selection and appending methods.

Mmorjyooo
79% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style geometric shapes using SVG elements and CSS. The page sets up an empty SVG canvas with dimensions of 960 by 500 pixels and loads D3.js version 6.2.0 from a CDN. The code initializes D3 and logs the library to the console, while the accompanying CSS applies margin and overflow styling to the body. The visualization relies entirely on SVG for rendering, with no data manipulation or dynamic shape generation visible in the provided implementation.

Ssarakouzayha
78% match
Loading thumbnail…

Shapes with SVG and CSS

This example visualizes country population data from `dataSet.csv` as simple SVG shapes, initially rendering a blank 900-by-580-pixel canvas. It uses D3 v5 to load and parse the CSV, converting the population strings to numbers. The example demonstrates styling with CSS by targeting `.lines` and `.lines path` rules, though the JavaScript only logs the parsed data to the console and does not yet draw any marks. The SVG and CSS structure suggests potential for future path-based charting, but the current code stops at data preparation.

Mmorjyooo
78% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a grid and styled through CSS classes and inline attributes. It shows how presentation properties like fill, stroke, stroke-width, and transforms (scale, translate) apply both directly and via stylesheet rules. The visualization loads D3.js from UNPKG and uses its `select` API to inject a message into an HTML element, while a local ES6 module supplies the text. Rendering relies entirely on SVG markup within the HTML file, with CSS controlling the appearance of grouped elements.

Ccharliekramer
78% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling to create a simple interactive visualization. It shows a red-background SVG canvas with geometric elements styled through custom CSS classes, including highlighted shapes and line properties. The code uses D3 v7 for SVG selection and attribute manipulation, specifically the `d3.select` method to target the SVG element and apply the background color. The visualization includes CSS-defined classes for line styling, such as stroke color and width, and path-specific properties like stroke-linejoin. Built as a React application, the example renders through standard SVG markup within an HTML page.

KKelseyXu5
78% match