Basic Geometries

100%

Basic Geometries

✓ Published1🌍 Public

Last edited May 27, 2020

Created on May 27, 2020

This example displays a simple scatterplot-like visualization using basic SVG geometries, including squares, rectangles, and circles, rendered against a dark background. The code defines custom helper functions—`squ`, `rect`, and `cir`—to append SVG shapes, and uses D3 v5’s `select`, `csv`, `scaleLinear`, and `max` to load and process population data from `data.csv` before rendering. The visualization is drawn with SVG elements via D3’s selection API, with axis functions `axisLeft` and `axisBottom` available but not explicitly invoked.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Example

This example demonstrates a simple scatter plot where circular marks are placed on an SVG canvas based on data loaded from an external CSV file. The visualization shows how data points are bound to SVG circles, with their horizontal and vertical positions determined by the `x` and `y` properties of each data record. The code uses D3.js version 3.5.5, specifically the `d3.select`, `d3.csv`, and the `data`, `enter`, `update`, and `exit` selection methods to manage the circles. All circles are styled with a uniform teal fill (`#40E0D0`) and a fixed radius of 15 pixels, while the SVG viewport is set to 250 by 250 pixels. The rendering relies entirely on SVG elements.

AAlvaroMoro

79% match

Loading thumbnail…

Basic shapes

This example demonstrates a collection of fundamental D3.js shapes, including circles, rectangles, arcs, lines, and paths, all rendered as SVG elements on a canvas. It showcases various ways to construct these shapes, such as using the `d3.arc` function for annular sectors, `d3.line` for splines, and data-driven bindings with `.datum()` and `.data()`. The scene also includes programmatically generated rectangles with a purple fill, a pink circle, and a custom path created via `d3.path`. A small CSV dataset is linked but not directly used. The code relies on D3 v6 for shape creation and SVG manipulation.

Hhanulik.ondrej@gmail.com

78% match

Loading thumbnail…

SVG Shapes

This example demonstrates fundamental SVG shape elements—circle, rect, and line—positioned within a fixed 960 by 960 coordinate system. The visualization compares shapes with default styling against those customized with explicit `fill` and `stroke` attributes, while a `<g>` group applies shared `fill="teal"` and `stroke="black"` to its children. Beyond these static SVG primitives, the code also showcases basic D3 integration by importing `select` from `d3` and using it to set the text content of a div element, along with a separate ES6 module export. The rendering relies entirely on SVG markup.

YYogesh Joshi

77% 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

77% 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

77% 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

77% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates an interactive scatter plot where users can dynamically select which data columns to display on the x- and y-axes using dropdown menus. It visualizes relationships between numeric attributes like horsepower, weight, and acceleration. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Circles transition smoothly to new positions over one second using chained `transition` and `delay` methods when axes change, with data loaded from a CSV file containing automotive specifications.

OOsekovS

76% match

Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Nnikomc

76% match