sara17585

Cars Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent circle. The visualization uses D3 v5's linear scales (`scaleLinear`) to map data values to coordinates, and axes are rendered with `axisLeft` and `axisBottom`, including grid lines and custom tick formatting. The SVG canvas is populated by appending circle elements, and the data is loaded asynchronously from a CSV file using the `csv` function.

Nov 15, 2019

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. Each circle’s position encodes population magnitude, with all countries represented by equal-sized markers. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, rendering as SVG. Gridlines extend from the y-axis across the chart, and the x-axis labels are formatted using `format('.3s')`. Data comes from a local CSV file.

Customizing axes

A horizontal bar chart displays the populations of ten countries, with bars extending from left to right. The example demonstrates customizing chart axes using D3 v5. Population values are scaled with `scaleLinear`, while country names use `scaleBand` for categorical positioning. The code uses `axisLeft` and `axisBottom` to generate axes, formats tick labels with `format('.3s')` to abbreviate large numbers, and removes default axis lines for a cleaner look. Data is loaded from a CSV file and rendered as SVG rectangles.

Making a bar chart

This example shows a horizontal bar chart of the ten most populous countries, using population data from a CSV file rendered as SVG. The chart uses D3 v5 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map country names to y-positions and population values to bar widths. Bars appear in steel blue with a left margin of 200 pixels for labels, and the population values are multiplied by 1000 on load.

Let's make a face with D3.js

This visualization builds a cartoon face in an SVG canvas using D3.js v5, centering a yellow circular head with black eyes, animated eyebrows, and a mouth formed by an arc path. The code constructs the face by appending shapes to a translated group, while the left eyebrow uses chained `transition().duration()` calls to animate its vertical position over two seconds. Rendering relies on SVG primitives like `circle`, `rect`, and `path`, with the mouth drawn via D3's `arc()` generator to create the curved smile.

Let's make a face with D3.js

This visualization builds a cartoon face in an SVG canvas using D3.js v5, centering a yellow circular head with black eyes, animated eyebrows, and a mouth formed by an arc path. The code constructs the face by appending shapes to a translated group, while the left eyebrow uses chained `transition().duration()` calls to animate its vertical position over two seconds. Rendering relies on SVG primitives like `circle`, `rect`, and `path`, with the mouth drawn via D3's `arc()` generator to create the curved smile.

Let's make a face with D3.js!

A smiley face, drawn with yellow circles and a black smile, animates by shifting its eyebrows upward and back down. The entire face is constructed in an SVG canvas using D3.js version 5, with the D3 selection and append API building the DOM elements. The eyebrows move through a chained sequence of D3 transitions, each lasting two seconds, which change the transform attribute of a group containing two rectangles. The mouth is generated using D3’s arc shape helper to create a path with specified inner and outer radii and angular range.

Making a Bar chart

This example demonstrates the initial setup for creating a bar chart with D3 v5. It selects an SVG element and reads its height and width attributes using `d3.select` and `parseFloat`, preparing the canvas dimensions for future data binding and shape rendering. The page loads D3 from a CDN and applies global styling that removes margins and hides overflow. The visualization does not yet display any bars or data; it only establishes the empty SVG container and foundational layout variables.

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling within a gallery context. It shows circles, rectangles, lines, and a path rendered inside an SVG container with a scale transform. The code uses native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, applying fill colors, stroke properties, and the `translate` transform. CSS classes style the line elements with black strokes and red path joins, while inline attributes set shape-specific fills. The visualization highlights how SVG geometry and CSS together control shape appearance without external libraries.

HTML cars Report

This example shows a simple HTML report listing three used cars with their prices, highlighting the 2012 Nissan Leaf in red. The page structure is built with a plain HTML unordered list, styled using a CSS stylesheet that sets the font size and monospace typeface. The `highlighted` class applies the red color to emphasize the first entry. No JavaScript or visualization libraries are used; the report relies solely on static HTML and CSS for presentation. The data is hardcoded directly in the markup.

Hello VizHub

This example displays a static, full-screen message, “Hello VizHub!” centered against a dark blue background with large, light-colored Ubuntu typography. The visualization demonstrates the basic project structure and rendering setup for VizHub. It uses the D3.js library version 5, specifically the `select` API function to target the `#message` div and set its text. The page also loads an external Google Fonts stylesheet via CSS and imports a local ES6 module, `myMessage.js`, which exports the displayed string.