Gray1011

@Gray1011·11 public vizzes

Shapes and Colors with SVG and CSS

This example uses D3 v5 and SVG to create a simple interactive canvas with a red background, as defined by an inline SVG style attribute. The visualization demonstrates how D3 can select and manipulate SVG elements, specifically by setting the SVG's background color via `d3.select('svg').style('background', 'red')`. The page layout is controlled through CSS, which removes margins and hides overflow for a full-viewport display. The code is minimal, focusing on the integration of D3 with SVG and CSS styling without any data binding or complex charting.

Jun 26, 2019

Loading thumbnail…

Making a bar chart with D3.js!

This example demonstrates a simple bar chart visualization of population data for several countries, including China, Indonesia, Pakistan, Bangladesh, and Mexico. The chart is rendered as an SVG element with fixed dimensions, and the data is loaded from a CSV file. The code uses D3.js version 5.9.2, specifically the `select` and `csv` functions to manipulate the SVG and parse the data file. The bars are styled with a steelblue color via CSS.

Jun 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion. The SVG face uses simple shapes—circles for the eyes and head, rectangles for eyebrows, and an arc path for the mouth—all positioned relative to a centered group. D3’s selection and transition methods, including `transition().duration()`, move the eyebrow group up and down repeatedly. The code demonstrates fundamental DOM manipulation by binding data-less SVG elements and applying chained transitions without external data sources.

Jun 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using D3.js v5's `select` and `arc` APIs, with SVG circles for the eyes and a path for the mouth. The eyebrows, rendered as rectangles, animate upward and back downward over four seconds via chained `transition().duration(2000)` calls. The code demonstrates fundamental DOM manipulation by building the face from scratch in an SVG container, using hardcoded dimensions and positions.

Jun 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

Jun 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG shapes animates its eyebrows in a looping vertical motion. The example demonstrates fundamental D3.js DOM manipulation by chaining `select`, `append`, and `attr` calls to construct circles, rectangles, and an arc-based mouth. Using `d3.arc` for the mouth and `transition().duration()` on a group element, the eyebrows shift up and down over two-second intervals. D3 v5 handles all rendering in an inline SVG, with no external data source.

Jun 26, 2019

Loading thumbnail…

Mysterious VizHub Error Debug Helper

This example demonstrates a debugging helper for the VizHub platform, presenting a blank SVG canvas that prepares to render data from an array of three values. The code imports D3 v5 functions including `select`, `scaleBand`, and `axisBottom`, though the commented-out sections reveal planned bar chart features that are not active. The visualization currently renders an empty 960x500 SVG element, with the main rendering function structured to accept CSV data but left incomplete. The helper highlights common D3 patterns like margin conventions and scale setup while serving as a starting template for error troubleshooting.

Jun 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example shows a minimalist red circle placed on an SVG canvas, styled with a red background, to suggest a simplified face. The code uses the D3.js v5 library, specifically the `select` and `append` APIs, to target the existing `<svg>` element and add a `<circle>` element to it. The circle’s radius is set to 200 pixels via the `attr` method, while the SVG’s background is colored through D3’s `style` method. The visualization relies entirely on SVG rendering, as defined in the accompanying HTML file.

Jun 25, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with styling applied through both inline attributes and external CSS. It shows how circles, rectangles, lines, and a path can be combined and transformed using SVG’s `transform` attribute, including scaling and translation. The code uses plain SVG markup and CSS selectors, such as the `.lines` class, to control stroke properties like color and width. The HTML file includes the SVG directly, with no JavaScript libraries or data sources involved.

Jun 24, 2019

Loading thumbnail…

HTML Cars Report

This example shows a simple inventory report for three used cars, listing the model year, make, and price for each vehicle. The report uses plain HTML markup to structure the data as an unordered list and relies on CSS to set the overall presentation, including a monospace font and a red highlight color for the first item. The file contains no JavaScript or charting libraries; it is a static web page that relies entirely on the browser’s built-in HTML and CSS rendering.

Jun 24, 2019

Loading thumbnail…

Hello VizHub

This example displays a large, bright “Hello VizHub!” message centered on a dark blue background, demonstrating basic DOM manipulation with D3 v5. The code uses `select` from the D3 library to set the text of a `<div>` element, while an ES6 module exports the message string. Custom styling comes from a CSS file that imports the Ubuntu font and sets the page’s background color, text alignment, and font size. The visualization is a static text display, showing how VizHub combines modular JavaScript, D3, and external stylesheets.

Jun 24, 2019