Skip to main content
Log in
A

astrologyhesitant

@astrologyhesitant·13 public vizzes

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries in 2020, using horizontal bars scaled by population. The visualization ranks countries from largest to smallest, with a formatted x-axis labeling population values in billions. Built with React and D3 v5, the code uses `scaleBand`, `scaleLinear`, and `csv` to load and map data from the UN World Population Prospects 2019 dataset. SVG rendering handles the axes and rectangular marks, while CSS styling applies a teal fill and Poppins font throughout the chart.

Mar 1, 2023
Loading thumbnail…

Lesson - Sol LeWitt reproduction Vertical portion

This example reproduces a vertical portion of a Sol LeWitt wall drawing using SVG. It shows a series of thin horizontal rectangles clipped by a circular mask, creating a striking geometric composition of striped bands within a circular boundary. The code builds the SVG dynamically with `document.createElementNS`, setting a `mask` element containing a white circle to reveal the rectangles. The mask uses a black background rect and a white circle to define the visible region, with all elements generated through a simple JavaScript loop.

Sep 20, 2022
Loading thumbnail…

Lesson - Sol LeWitt reproduction

This example reproduces a Sol LeWitt-style drawing using raw SVG elements generated through JavaScript. It creates a full-screen SVG canvas and populates it with one hundred vertical rectangles, each 10 pixels wide, spaced 20 pixels apart, filling the viewport’s height. The code uses the Document API’s `createElementNS` to programmatically construct SVG `<rect>` nodes and appends them to the document body, with CSS setting the fill to black. The result is a minimalist, grid-like pattern of evenly spaced black bars across the screen.

Sep 20, 2022
Loading thumbnail…

Fork of Curran lesson - Sol LeWitt Reproduction

This interactive SVG reproduction of a Sol LeWitt drawing uses a generative approach to create two overlapping circular patterns. It renders a grid of thin horizontal and vertical rectangles, with a circular mask cutting out the center of the horizontal set and an inverse mask revealing the center of the vertical set. The code builds the SVG entirely through the DOM API, setting up two masks—one with a black rectangle and white circle, the other with the inverse—and then appending 100 rects for each orientation. The result is a dynamic, browser-resizing geometric composition that mirrors LeWitt’s conceptual art style.

Sep 20, 2022
Loading thumbnail…

JavaScript basics

An empty SVG container awaits JavaScript logic that logs a series of console outputs, demonstrating variable assignment, object mutation, a for loop, and an arrow function with explicit return syntax. The code exercises basic language constructs—numbers, objects, and functions—without rendering any visual elements. The rendering approach is static SVG markup, while the observable behavior resides entirely in the browser’s developer console.

Sep 20, 2022
Loading thumbnail…

Fork of Line Graph Figma input

This example visualizes a single bold black line winding across a white 960×500 SVG canvas, with coordinates that trace a pronounced curve from the upper-right down to the lower-left. The rendering uses raw SVG elements defined directly in the HTML, including a `clipPath` to confine the stroke, while the JavaScript entry point imports `select` from `d3` and a custom `message` from a local ES6 module to display "Hello VizHub!" on the page. The code demonstrates how to combine D3 utility functions with modular imports, though the line itself is static and not generated by D3's data-driven methods.

Sep 17, 2022
Loading thumbnail…

Line Graph Figma input

This example demonstrates a hand-drawn polyline chart rendered directly as SVG markup, with eight thick black line segments forming a jagged trend across a 960×500 canvas. The visualization imports D3’s `select` function from UNPKG and local ES6 modules to display a “Hello VizHub!” message, while the chart itself is static SVG defined in the HTML body without any data binding or scales. The lines are styled with a 10-pixel stroke and clipped to the viewport using an SVG `clipPath`, showing a purely declarative approach to line-graph construction.

Sep 17, 2022
Loading thumbnail…

Test Figma input

A single SVG chart displays three gray horizontal bars labeled A, B, and C with varying widths. The visualization is rendered directly in static SVG markup within an HTML file, using the Familjen Grotesk font for text labels. No dynamic data or interactivity is present, as the layout is fixed. The example primarily demonstrates loading D3 via UNPKG and importing a local ES6 module, where `select` from D3 is unused in the visible chart.

Sep 17, 2022
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple SVG triangle rendered on a blank HTML page. The code uses an inline SVG `<path>` element with hardcoded coordinates to draw the shape, while CSS styles the page layout. Though the file references the HTML Starter template, the implementation is pure SVG and does not utilize JavaScript or external libraries. The triangle is centered and displayed at a fixed size, with the markup commented to explain the path commands that specify its vertices.

Sep 12, 2022
Loading thumbnail…

Course_start

This example displays a static SVG composition of geometric shapes: a green circle with a red stroke, a large blue circle, a small rectangle, two blue lines, and two black polygonal paths. It shows how SVG elements can be layered and styled via CSS, with the first circle receiving a distinct class-based fill. The rendering relies on raw SVG markup in `index.html` and uses React starter code commented out in `index.js`, indicating the visualization currently renders without React’s involvement. The layout is fixed, using explicit coordinates and pixel-based dimensions.

Sep 12, 2022
Loading thumbnail…

Course_start

This example shows a set of SVG shapes—two circles, a rectangle, and a line—on a 960 by 500 canvas, with interactions triggered by hovering. The circles and rectangle respond to mouseover events with CSS transitions: the first circle changes fill and stroke width, the second also scales, and the rectangle rotates. Built with plain HTML, CSS, and JavaScript, it uses React only as a starter framework, with all styling defined in a style block and no external data sources.

Sep 1, 2022
Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape

A dynamic SVG landscape depicts a stylized sun and layered mountains that transition through a day-night cycle. The code uses SVG gradients (`radialGradient`, `linearGradient`), animated `stop-color` values, and an animated `circle` element's `cy` attribute via the `<animate>` tag. The scene comprises three overlapping path-based terrain layers, with colors shifting between aliceblue, steelblue, and indigo over a 15-second loop. The rendering approach is pure SVG with declarative SMIL animations for both the sun’s movement and the gradient color changes.

Sep 1, 2022
Loading thumbnail…

Fork of AQI Data in America in 2021 with Histogram and Brushing

This visualization displays daily Air Quality Index (AQI) readings across the United States in 2021, combining a geographic scatterplot with a synchronized time-series histogram. Users can brush over the histogram to filter the map’s colored circles by date, with color intensity reflecting AQI levels. The map uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries, while the histogram employs `d3.bin`, `d3.scaleTime`, and `d3.brushX` for interactive selection. Data is loaded via `d3.csv` from a GitHub-hosted dataset, and React manages component state for the brushing extent.

Sep 1, 2022