Nikki Masroor

@NikkiMasroor·10 public vizzes

Bar chart

This example shows a bar chart of COVID-19 cases per one million people by country, fetching live data from the disease.sh API. The visualization uses React for component structure and D3.js utilities, specifically `d3.max` and `d3.scaleLinear`, to map data values to pixel heights within an SVG rendered via React. The `useEffect` hook triggers the chart-building function, while the fetched JSON populates the state that drives the bars.

May 18, 2022

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG primitives and CSS masking, with no external data. It displays a grid of alternating horizontal and vertical stripes over the full viewport, clipped to reveal two overlapping circular forms at the center. The code builds SVG elements directly via the DOM API, creating 100 horizontal and 100 vertical rectangles. Two SVG masks—one inverting the other—combine to produce the layered visual effect, while d3 is listed as a dependency but not used in the logic.

May 18, 2022

Loading thumbnail…

Sol LeWitt

This example generates a minimalist SVG composition inspired by Sol LeWitt, displaying 100 vertical rectangles evenly spaced across a 960-by-500-pixel canvas. Each rectangle maintains a fixed width of 10 pixels and spans the full height of the canvas, creating a rhythmic, striped pattern. The visualization is built programmatically using raw JavaScript and the SVG API, specifically creating SVG elements via `document.createElementNS` and appending them to the document. No external libraries are used; the rendering relies entirely on native browser support for SVG and scripting.

May 18, 2022

Loading thumbnail…

psuedo Line Chart

This example presents a minimalist line chart as a single, jagged polyline. The chart displays a data series with sharp peaks and valleys, suggesting fluctuating values. The code renders directly to an SVG element within the HTML, using a `path` element with a bold black stroke for the line. The visualization relies on the native SVG API, with no external charting libraries or JavaScript for data processing, creating a static representation.

May 17, 2022

Loading thumbnail…

Pseudo for horizontal bar chart

Six horizontal bars form a small pseudo bar chart, with categories A through F listed along the left edge. Each bar is a simple SVG `rect` with a fixed height, and the bar lengths increase progressively from the top to the bottom of the chart. The SVG `text` elements label the categories, while the chart itself uses no external libraries, relying solely on hand-coded SVG markup within an HTML document. The bars are drawn in black on a white background, with the overall layout fixed by explicit pixel coordinates.

May 17, 2022

Loading thumbnail…

Pseudo bar chart

This SVG-based pseudo bar chart approximates a standard bar chart without using any charting library, instead relying on hand-coded SVG `<rect>` elements. It displays four vertical bars of varying heights and equal widths, positioned along the x-axis with distinct y-coordinates and heights to suggest categorical data. The code uses plain SVG markup within an HTML file, with a fixed viewport of 960 by 500 pixels and no axes, labels, or gridlines, prioritizing visual similarity over statistical accuracy. The rendering approach is direct and minimal, with each rectangle explicitly defined via its `x`, `y`, `width`, and `height` attributes.

May 17, 2022

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot renders eight solid black circles at fixed coordinates across a 1000 by 500 SVG canvas, approximating the look of a point distribution without underlying data or axes. Each circle uses a radius of 21 pixels and a uniform dark fill, with positions hardcoded directly in the SVG markup rather than generated through a data-driven process. The visualization relies solely on static SVG circle elements, offering a minimal, non-interactive representation that mimics a scatter plot’s visual structure while lacking any computed layout or encoding.

May 17, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape creation, including a red circle, a blue-bordered rectangle, and a pink line. The code uses inline SVG elements within an HTML file, setting exact coordinates and dimensions for each shape. The rectangle has no fill and a two-pixel stroke, while the circle and line use simple color attributes. The rendering approach is purely declarative, using the SVG DOM directly rather than any JavaScript library or data binding.

May 17, 2022

Loading thumbnail…

SVG animation using CSS transitions

An SVG rectangle animated entirely through CSS transitions changes its fill color from red to green and its stroke width from 20 to 100 pixels when hovered. The example uses a plain HTML page with embedded CSS rules targeting the `rect` element, leveraging the CSS `transition` property for smooth interpolation over 3 seconds. No JavaScript libraries are involved; the styling is applied directly to the hard-coded SVG markup. The rectangle retains its black stroke, demonstrating how CSS can style and animate inline SVG elements without external frameworks.

May 17, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes by rendering a circle, a red-filled circle, a rectangle outline, and a pink line inside a fixed 960×500 viewport. The code uses raw SVG elements—`circle`, `rect`, and `line`—with inline attributes for coordinates, dimensions, and stroke properties. The rectangle is drawn with a blue stroke and no fill, while the line spans from the origin to (100,100). No external libraries or data sources are involved; the visualization relies solely on native SVG markup within an HTML document.

May 17, 2022