Adam Usmani

@adamusmani95·9 public vizzes

Fork of Types of vehicles for a fuel type - Adam Usmani

This visualization shows the distribution of 746 car models across vehicle classes, colored by fuel type, with tooltips revealing the make and model of each vehicle. It uses a bar chart where the y-axis counts the number of models per vehicle class, and the color encoding distinguishes fuel types. Built with the vega-lite-api and vega-lite library, the chart loads CSV data from a GitHub Gist and renders interactively using vega-tooltip for hover details. The visualization adapts to the full window size with a customized dark theme.

Apr 14, 2021

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, from China at the top to Mexico at the bottom. Using D3 v5, the code loads the data with `d3.csv`, maps population values with a linear scale, and positions bars with a band scale. It draws an SVG with `d3.axisLeft` for the country labels and a bottom axis created via a custom `axisBottom` call, while styling removes domain lines and ticks.

Feb 26, 2021

Loading thumbnail…

Making a bar chart

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face whose eyebrows animate up and down. An SVG circle forms the face, with additional circles for eyes and a path created using the `d3.arc` function for the mouth. The eyebrows are rectangles that move via `transition.attr` to shift their vertical position over time. The code uses selections like `select` and `append` to build the SVG hierarchy, with a two-second duration for each eyebrow movement.

Feb 17, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js

A smiling cartoon face is drawn with SVG shapes, including a yellow circle for the head, black circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back downward over four seconds using chained D3 transitions. The code uses d3-selection to append elements to an SVG canvas and d3-shape’s `arc()` function to generate the mouth path. The face is centered via a group transformation, with eye spacing and offsets defined as constants.

Feb 17, 2021

Loading thumbnail…

Let's make a face with D3.js

This visualization constructs a cartoon face from basic SVG shapes using D3.js v6, including a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The eyebrows animate up and down repeatedly through chained `transition.duration` calls, moving their vertical position by 50 pixels and back. The face is centered in a 960x500 SVG canvas, with all elements grouped and positioned via transform attributes and hardcoded constants for spacing and dimensions.

Feb 15, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid on a 960×500 canvas. It demonstrates how inline SVG elements combine with CSS styling to control appearance, including fill colors, stroke widths, and line join styles. The scene explicitly assigns colors via attributes and CSS classes, with a transformed group and translated lines adding visual variety. The rendering uses raw SVG markup with no external libraries, relying on the browser's native SVG engine and CSS rules defined in a separate stylesheet.

Feb 15, 2021

Loading thumbnail…

HTML Cars Report

This example presents a simple list of three used cars, each with its model year, name, and price. It demonstrates a static HTML report styled with a monospace font at a large size, where CSS classes are used to visually highlight one specific car in red. The page is built with plain HTML and styled using a linked `styles.css` file, which sets the body font and applies the `.highlighted` class to the first list item. No JavaScript or data libraries are involved.

Feb 14, 2021

Loading thumbnail…

Fork of Hello VizHub

This example displays a single, large, centered text message rendered on a plain white background. It uses a `<div>` element with the ID `message` and CSS styling to set the font size to 12em and center the text. The visualization is built using D3.js version 5, though the code does not perform any data binding or dynamic updates, serving as a minimal scaffold for further development.

Feb 14, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal visualization project using D3 v5 loaded from a CDN. It displays a single message in a div element, showing the basic structure of importing D3, local CSS, and an ES6 module bundle. The code uses the `d3` library via UNPKG and illustrates how to organize files for a VizHub project.

Feb 14, 2021