Mohammed Jumail Shibily

@shibilyt·6 public vizzes

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris Dataset rendered as SVG circles, with interactive dropdown menus to select which measured attribute (sepal length, sepal width, petal length, petal width, or species) maps to the x- and y-axes. Built with React and d3.scaleLinear for axis scaling, the visualization updates axis labels and tick formatting in real time as menu selections change, with tooltips showing formatted x-values on hover.

Jun 29, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics about a CSV file containing CSS named colors, showing the file size in kilobytes, the number of rows, and the number of columns in a large text format. The visualization uses D3.js v7 to load and parse the data via `d3.csv` and `d3.csvFormat`, with the message rendered inside a `<pre>` element. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, illustrating different approaches to handling remote tabular data.

Jun 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s fuel efficiency (mpg) against its horsepower. Each circle’s size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car’s name. The visualization is built programmatically using the Vega-Lite API (`vl.markCircle`, `vl.x`, `vl.y`), with data loaded asynchronously via `d3.csv`. Rendering is handled by Vega and Vega-Lite, with tooltips provided by Vega-Tooltip, and custom axis and label styling is applied through a shared config object.

Jun 22, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a React SVG visualization of a smiley face that responds to mouse movement. The code uses React 16.9.0 and ReactDOM to create a single yellow circle that tracks the cursor position via an `onMouseMove` event handler on the SVG element. The circle’s coordinates are derived from window dimensions (`window.innerWidth` and `window.innerHeight`), though the circle radius is fixed. The visualization is a minimal, interactive demonstration of using React’s declarative rendering with SVG for real-time user input.

Jun 22, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-window smiley face using React and D3 v7. It shows a yellow face with black outline, two eyes, and a smiling arc, all positioned dynamically based on the browser viewport size. The code defines reusable React components like `FaceCircle`, `LeftEye`, `RightEye`, and `SmileArc`, with the latter using D3’s `arc()` generator to create the mouth path. SVG elements are drawn inside a `<g>` transform, and ReactDOM renders the composite face component into the page.

Jun 19, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a simple, static SVG face composed of a large yellow circle with a black outline and two smaller unfilled circles for eyes. The drawing is created directly with SVG elements—`<circle>` tags—embedded in an HTML page, with no JavaScript or external libraries. The page and SVG are sized at fixed dimensions, and the body margin is zeroed to eliminate surrounding space. It serves as a minimal demonstration of hand-coded vector graphics in a bare HTML structure.

Jun 19, 2021