mars

100%

✓ Published1🌍 Public

Last edited Aug 27, 2024

Created on Aug 27, 2024

This example demonstrates a collection of basic D3.js v4 shapes and drawing techniques on a green SVG canvas. It shows circles, rectangles, arcs, lines, and data-driven line and bar charts using `d3.arc()` and `d3.line()`. The code includes static elements bound with `.datum()`, a data join with `.data()` and `.enter()`, and a custom path built via `d3.path()`. No external data source is used; all values are hardcoded in the script.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

marsIc

This example demonstrates various SVG shape drawing techniques using D3.js v4, including arcs created with `d3.arc()`, lines via `d3.line()`, and data-driven rectangles bound through `selection.data()` and `selection.enter()`. The visualization also includes circles, rectangles, and path elements constructed with `d3.path()`. The code shows how to bind static data using `datum()`, apply transformations like rotation and translation, and build a custom path for a yellow outline. The sample data comes from `employee.csv`, and the rendering uses an SVG container with a green background.

Hhanulik.ondrej@gmail.com

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

82% match

Loading thumbnail…

D3.js| Path

The example displays a collection of primitive shapes and line types in an SVG canvas using D3.js v4. It shows circles, rectangles, and various path elements, including arcs drawn with the `arc()` function and lines generated by `d3.line()` and `d3.path()`. The visualization uses D3’s selection, data-binding with `.datum()`, and data-driven loops via `.data()` and `.enter()` to create elements from an array of values. The SVG background is green, with a GeeksforGeeks header, and all shapes are rendered statically without interaction.

Hhanulik.ondrej@gmail.com

80% match

Loading thumbnail…

D3 Scatter plot

This example demonstrates fundamental SVG shapes and styling within an HTML page. It shows a circle, a rectangle, and a line positioned on a canvas with a visible border. The circle uses a blue stroke with no fill, the rectangle is filled green with a blue border, and the line is drawn in red. The code directly uses the SVG API with elements like `<circle>`, `<rect>`, and `<line>`, and sets coordinates and dimensions through attributes. The rendering is handled entirely through inline SVG within the `index.html` file, with no external data sources or additional JavaScript libraries.

AAshwani Sajwan

75% match

Loading thumbnail…

Circles with D3

This example displays a static collection of eight colored circles of varying sizes and positions on an SVG canvas. Each circle’s radius, stroke color, stroke width, and fill color are defined in a JavaScript array and rendered using D3’s data join with `selectAll`, `data`, `enter`, and `append`. The visualization demonstrates basic SVG shape creation with D3 v7, using attributes like `cx`, `cy`, `r`, `stroke`, and `fill` to map data properties directly to visual elements.

BBismark Kofi Owusu Sarfo

74% match

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck

74% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, lines, and paths—rendered on a static 960×500 canvas. Overlapping red and green circles show layering, while path elements illustrate coordinate-based drawing commands. The code uses plain SVG markup within an HTML page, with D3 v7 loaded via a script tag but not actively driving any dynamic behavior. The visualization focuses on the raw vector graphics API, showing how basic geometric primitives combine to form static illustrations.

TTanguy RENAUDIE

73% match

Loading thumbnail…

mars2.0

This visualization compares temperature ranges on Earth and Mars using vertical scales and colored bars, with labeled markers for average, maximum, and minimum temperatures alongside planet icons. The dark background and planet circles frame the data prominently. The code uses D3 v4 selections and SVG primitives (`append`, `attr`) to construct all elements manually, reading no external data file despite the presence of `data.csv`. Temperature values are positioned via hard-coded pixel offsets and spacing constants, with white tick marks and pointer rectangles indicating specific measurements.

Hhanulik.ondrej@gmail.com

73% match