Muhammad Usman

@MuhammadUsman786786·7 public vizzes

Fork of Hello HTML

This is a fork of the basic "Hello HTML" example, presenting a minimal web page that loads a JavaScript bundle. The `index.html` file contains only the document structure, while the rendering logic is in the external `bundle.js` file, which is not included. The example uses the standard HTML5 `<script>` tag to load the bundle, and the page includes an embedded YouTube video iframe. It demonstrates the simplest possible setup for a web-based visualization, with no other libraries or data sources visible in the code.

Aug 14, 2022

Loading thumbnail…

Scatter Plot Country Population

This visualization shows population counts for eight labeled countries (A through H) as red circles arranged along a horizontal population axis and a vertical categorical country axis. The x-axis uses a linear scale with scientific notation, while the y-axis uses a point scale with padding for discrete labels. The SVG rendering is built with D3.js v5, using `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`; country data comes from a local `data.csv` file. Grid lines extend across the plot, and the chart includes bold titles for the overall heading and the x-axis label.

Aug 23, 2020

Loading thumbnail…

Bar Chart Country Population

This bar chart displays country populations from a local CSV file, with countries on the y-axis and population on the x-axis using a linear scale. Red horizontal bars are rendered as SVG rectangles, with axis labels and a bold title. The code uses D3 v5 functions such as `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` within a React starter template. Gridlines are drawn via tick sizes, and population values are formatted in scientific notation.

Aug 23, 2020

Loading thumbnail…

Cars report

A yellow, smiling face with red eyelashes (rendered as arcs) is drawn as an SVG. The eyes are black circles with red lash arcs above them, built using `d3.arc`. The lashes animate vertically via chained `transition().duration()` calls, moving up and down. The face is centered using a `g` element transform, with the data visualization code in React, using d3.v5 to select the SVG and append shapes.

Aug 23, 2020

Loading thumbnail…

Cars report

A yellow smiley face rendered as an SVG displays a large circle for the head, two black circles for eyes, and a curved path for the mouth defined by an annular arc. The visualization uses D3 v5’s `select`, `append`, and `arc` APIs to construct the static composition within a 400 by 400 viewport. The data originates from a source labeled `v3`, and the React-based code explicitly sets pixel coordinates and radius values for each shape.

Aug 23, 2020

Loading thumbnail…

Cars report

This example displays a small set of shapes inside an SVG canvas, including circles, rectangles, and lines, organized into groups with transforms and CSS styling. The code uses React and renders static SVG elements with explicit coordinates, applying scaling and translation to position the shapes. A red rectangle, grey shapes with black strokes, and a green path within a red-stroked container illustrate grouped styling and inheritance. The visualization demonstrates basic SVG composition and CSS selectors, though no interactivity or data binding is present.

Aug 23, 2020

Loading thumbnail…

React Starter

This React Starter example displays the text “Hello React!” centered on the page at an extremely large font size. The application uses the React and ReactDOM libraries to render a single component into a root div. The rendering approach relies on `ReactDOM.render` to mount the `App` component, which is defined using JSX syntax. The code imports React and ReactDOM directly and uses a className of "message" to apply the CSS styling.

Aug 23, 2020