M

mirna981

@mirna981·28 public vizzes

Loading thumbnail…

Make a bar chart

This example displays a bar chart of population data for ten countries, with each rectangle representing a nation’s population in thousands. The chart uses D3 v5’s `select`, `csv`, and `scaleLinear` to load the CSV file and prepare the scales. Rectangles are appended to an SVG canvas with fixed width and height, though the bars are not positioned or scaled to the data values. The visualization shows the raw data loading and initial rendering setup without completing the full chart layout.

Loading thumbnail…

Make a bar chart

This example renders a static bar chart of population data for ten countries, showing each country’s population in thousands. The chart uses an SVG element and selects and binds the data from a CSV file using d3.csv, converting population values to numbers with d3 selection. The code initially selects all existing rect elements and binds the data, but does not yet create or update bars, leaving the visualization blank. The layout uses a fixed SVG width and height, with the stylesheet hiding overflow.

Loading thumbnail…

Make a bar chart

This bar chart displays population figures for the top ten most populous countries, using a horizontal layout where each bar’s length corresponds to the population value. The visualization reads population data from an external CSV file, converting the values from thousands to absolute numbers. Built with D3.js version 5, the code uses the `select` and `csv` methods to load the data and render the chart as SVG elements within a 960×500 pixel viewport. The chart currently loads and parses the data but has not yet drawn the bars.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face in SVG using D3.js v5, with select and append methods placing circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered via a group transform, while transition calls animate the eyebrows upward and the mouth downward over two-second intervals, demonstrating basic DOM manipulation and chained transitions without any external data.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, then animating its eyebrows and mouth. The code uses d3-selection to append and configure circles, rectangles, and an arc-based path for the face components. A chained `transition().duration(2000)` moves the eyebrow group vertically and shifts the mouth, creating a subtle facial expression change. The visualization runs entirely in the browser using D3 v5 and renders via SVG, with all geometry defined through static attributes rather than data binding.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face in SVG using D3.js v5, with select and append methods placing circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered via a group transform, while transition calls animate the eyebrows upward and the mouth downward over two-second intervals, demonstrating basic DOM manipulation and chained transitions without any external data.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and rectangular eyebrows that animate upward and back in a looping motion. The example demonstrates fundamental SVG DOM manipulation by selecting an `<svg>` element and appending grouped shapes with `d3.select` and `append`. It uses D3's `arc` generator to create the mouth path and `transition().duration()` to move the eyebrows and mouth, with attributes like `attr` and `translate` transforms controlling position and animation.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face in SVG using D3.js v5, showing fundamental DOM manipulation with selections and SVG shape elements. It draws a yellow circle for the head, two eyes, eyebrows as rectangles, and a mouth created with `d3.arc()`. The animation uses `transition().duration()` to move the eyebrow group up and down repeatedly, demonstrating chained transitions over a two-second interval. The page is set up with a simple HTML structure and imports D3 via a CDN, with all elements positioned relative to the SVG center.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG primitives, including animated eyebrows. The code uses D3 selections and the `arc` generator to draw the mouth, while `circle` and `rect` elements form the eyes and brows. The face is centered via a translated `<g>` group, and the eyebrows are positioned relative to the eye spacing. The visualization runs entirely in the browser with d3.v5, rendering static SVG without external data sources.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a static smiley face built with SVG shapes: a yellow circle for the head, black circles for the eyes, and a curved line for the mouth. The code demonstrates fundamental DOM manipulation by using D3.js v5 selection and append methods to create and position each shape. It draws directly from the index.js file, which uses `select` and `append` to construct elements on an SVG canvas, with coordinates derived from the `width` and `height` attributes. The project is minimal, focusing on basic shape creation rather than interactive or animated behavior.

Loading thumbnail…

Let's make a face with D3 new

This example displays a cheerful cartoon face constructed from SVG primitives: a yellow circle for the head, two smaller circles for eyes, a rectangle for an eyebrow, and an arc-based path for the mouth. Built with D3 v5, the code uses `select` to target the SVG element and `attr` to position shapes, while the `arc` generator computes the mouth’s path geometry. The face is centered via a translated group, and all elements are drawn directly to the SVG canvas with fixed dimensions.

Loading thumbnail…

Let's make a face with D3 new

This example draws a stylized face using basic SVG shapes and D3’s arc generator. It shows a yellow circle for the head, two black circles for eyes, and a mouth formed by a path created with D3’s `arc()` function, which specifies inner and outer radii along with start and end angles. The code uses D3 v5 to select and append elements to the SVG, applying translations for centering. The rendering approach is entirely SVG-based, with no external data source.

Loading thumbnail…

HTML

This example presents a blank HTML page with an empty body, demonstrating the minimal structure of an HTML document. It contains only the `<!DOCTYPE html>` declaration, opening and closing `<html>` and `<body>` tags, and a `<title>` element. The code uses no external libraries or data sources, serving as a bare-bones starting point for web development. The visualization gallery likely uses this to illustrate the foundational markup required before adding any content or scripting.

Loading thumbnail…

Happy Face with D3

A minimal SVG scene of a green background is rendered by a D3 selection, with the body margin removed to eliminate scrollbars. The code imports the `select` function from D3 v5 and applies a background color to the root `<svg>` element, which is sized at 960 by 500 pixels. The page includes a linked stylesheet for global styling and loads D3 from a CDN, while the interactive script runs from a separate bundle. This example primarily demonstrates basic SVG setup and styling rather than data-driven visualization.

Loading thumbnail…

Happy Face with D3

A green SVG canvas displays a large static happy face composed of simple shapes. The visualization uses D3 v5 to select and style the SVG element, setting the background color to green, while the face itself is rendered through the SVG markup defined in the HTML. The example demonstrates basic D3 selection and styling with the `d3.select` API, alongside CSS for page layout and font import.

Loading thumbnail…

Happy Face with D3

A simple green SVG face with a yellow circular head, black eyes, and a smiling mouth demonstrates basic D3 selection and styling. The code selects the SVG element with `d3.select` and applies a green background via `style`. It uses D3 v5 loaded from a CDN, with the SVG rendered in the browser and a hidden body overflow. The example highlights how D3 can manipulate SVG attributes and styles to create a static, playful visual without data binding or interactive features.

Loading thumbnail…

Shapes with SVG new

This example showcases basic geometric shapes rendered with SVG, including circles and rectangles with varied fills and a translated group containing outlined shapes. It also demonstrates line and path elements with custom stroke styling, such as rounded joins and a distinct color. The code uses plain SVG markup within an HTML document, leveraging the `<svg>`, `<g>`, `<circle>`, `<rect>`, `<line>`, and `<path>` elements. Styling is applied via CSS classes and inline attributes, with the body hidden from overflow for a clean presentation.

Loading thumbnail…

Shapes with SVG new

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements. It shows default black shapes, shapes with explicit fill colors, a group with white fills and black strokes, and a separate group styled with thick lines and rounded line joins. The rendering relies solely on SVG’s native markup within an HTML document, with CSS imported from Google Fonts controlling the layout and hiding overflow. No external JavaScript libraries are used.

Loading thumbnail…

Shapes with SVG new

This example demonstrates how to draw basic geometric shapes and lines using raw SVG elements in VizHub. It shows circles, rectangles, and a line with a path that are positioned on a 960x500 canvas. The code uses native SVG tags including circle, rect, line, path, and g, with inline attributes for styling and transforms to group shapes. The CSS file applies stroke colors and widths to the line elements while hiding page overflow.

Loading thumbnail…

Shapes with SVG new

A minimal SVG shapes example renders a single circle element inside an SVG container sized 960 by 500 pixels. The page imports D3.js’s `select` function and a local ES6 module exporting a "Hello VizHub!" message, though the circle remains static without any data binding or interaction. The rendering relies entirely on raw SVG markup in the HTML, with no JavaScript-driven updates to the shape’s attributes. The example demonstrates basic SVG structure and ES6 module usage within a VizHub project.

Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a cartoon face using D3.js v5, with each facial feature—eyes, nose, and mouth—drawn as separate SVG shapes. The code uses `d3.forceSimulation` to position the features dynamically, creating a playful, animated arrangement. The page renders to an SVG canvas of 960 by 500 pixels, with styles handled in a separate CSS file. The face emerges from the interaction of simulated forces, showcasing how D3's physics-based layout can organize visual elements.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a playful face out of basic SVG shapes using D3.js v5, with the drawing placed directly inside an SVG container. The page loads D3 from a CDN and sets up a simple 960×500 viewport with a clean, margin-free body. Though the code includes an empty console.log(d3) call and minimal styling, it demonstrates how D3 can be used to structure and manipulate SVG elements for custom illustrations. The visualization relies on standard D3 selection and joining methods to create a character from scratch, showing the library’s flexibility beyond data-driven charts.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a playful face out of basic SVG shapes using D3.js v5, with the drawing placed directly inside an SVG container. The page loads D3 from a CDN and sets up a simple 960×500 viewport with a clean, margin-free body. Though the code includes an empty console.log(d3) call and minimal styling, it demonstrates how D3 can be used to structure and manipulate SVG elements for custom illustrations. The visualization relies on standard D3 selection and joining methods to create a character from scratch, showing the library’s flexibility beyond data-driven charts.

Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to combine SVG shapes and CSS to create a static composition with varied fill colors, stroke styling, and geometric transformations. The code uses raw SVG elements—circles, rectangles, lines, and paths—with attributes like `fill`, `stroke`, and `transform` to apply color and position changes. CSS classes in a linked stylesheet define stroke properties for grouped line elements. The rendering relies entirely on SVG markup and external CSS, with no JavaScript libraries involved.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape styling and CSS-based presentation through geometric primitives. The visualization shows circles, rectangles, lines, and a path rendered in an SVG canvas, with colors applied both through inline attributes (e.g., `fill="red"`, `fill="#83cc2a"`) and inherited group styles. The SVG uses `transform` for scaling and translation, while the `styles.css` file applies stroke properties to line and path elements via class selectors. The code relies entirely on native SVG APIs and CSS, with no external JavaScript libraries.

Loading thumbnail…

Hello VizHub

This example renders a simple text message, “Hello VizHub,” in a web page. It loads the D3.js library version 5.9.1 from a CDN and uses a minimal HTML structure with a dedicated div element. The JavaScript code imports a `cars` dataset, though the specific visualization or rendering logic for that data is not shown in the provided files. The page relies on an external stylesheet and a bundled script to execute the main logic, demonstrating a basic setup for a D3-based project.