Pareel Amre

@pareelamre·8 public vizzes

Fork of D3 Git History Streamgraph

This streamgraph visualizes the commit history of the d3 GitHub organization. Each colored layer represents a repository, with thickness indicating the number of commits per week, smoothed via the `array-blur` library. Layer order follows the first commit time, showing the shift from the monolithic d3 repo to a proliferation of packages around the 4.0 release. The visualization uses D3 v6’s `area`, `stack`, and `stackOffsetWiggle` APIs, rendering to SVG with area labels from `d3-area-label`. Data comes from a JSON file of all d3 commits.

Dec 26, 2023

Loading thumbnail…

JS in HTML

This example demonstrates a minimal web page that displays the text "Hello HTML!" using custom CSS styling, specifically setting the font size to 13em and centering it. The core functionality relies on plain JavaScript embedded directly within the HTML file, executed through the browser’s console. It uses the standard `<style>` tag for CSS rules and a `<scripts>` element containing a `console.log()` statement that outputs a greeting to the developer console. The code does not employ any external libraries or frameworks, serving purely as a foundational illustration of integrating HTML, CSS, and JavaScript in a single document.

Dec 25, 2023

Loading thumbnail…

D3 Selection Exploration

A set of animated circles undulates across the screen, their vertical positions and radii oscillating sinusoidally with a slowly changing phase. The visualization demonstrates data joins in D3 v6, using `selectAll`, `data`, and `join` to update SVG circle elements every frame via `setInterval`. Generated data from `makeData` feeds the `vizData` function, which binds new values for `cx`, `cy`, and `r` at 60 frames per second.

Dec 2, 2023

Loading thumbnail…

Plotting Points on a Map

This visualization renders the contiguous United States from a TopoJSON dataset, mapping state boundaries and a light gray national background onto an SVG canvas. It uses the `d3.create` API to build the SVG element and the `topojson-client` feature function to convert the topology into geographic paths, which are then drawn with `d3.geoPath`. The code applies white strokes for state borders with rounded joins and caps, producing a clean, minimal choropleth base map without additional data layers.

Nov 30, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a full Sol LeWitt art piece using D3, displaying a grid of horizontal and vertical stripes that are selectively masked by geometric symbols. The artwork shows alternating bands of lines, with the vertical stripes masked by filled shapes and the horizontal stripes partially obscured. The code uses D3’s `select`, `range`, and `symbols` APIs to generate SVG rectangles and mask paths, rendering 100 lines in each direction across the full browser window. Two separate masks apply contrasting white and black fills to create the overlapping pattern effect.

Nov 22, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical striped rectangles across the full viewport. Two SVG masks, each combining a full-screen rectangle with a centered circle, restrict which stripes are visible. The first mask (circle-mask) reveals horizontal lines through a white circular opening on a black background, while the second (circle-mask-2) inverts the pattern for vertical lines. Using d3.select, range, and data joins, the code generates 100 rect elements per orientation, with masks applied via the mask attribute.

Nov 20, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using dynamically generated SVG elements. It shows a grid of horizontal and vertical stripes, masked to reveal a central circular area where only horizontal lines appear, surrounded by vertical lines. The code uses raw Document Object Model (DOM) methods such as `document.createElementNS` and `setAttribute` to construct the SVG, with two mask definitions (`circle-mask` and `circle-mask-2`) controlling visibility. No external libraries are used; the rendering relies purely on SVG rectangles and masks in the browser.

Nov 20, 2023

Loading thumbnail…

SVG Fundamentals

This example introduces SVG fundamentals by rendering a collection of primitive shapes—circles, rectangles, and lines—directly onto a 960x500 canvas. It demonstrates how SVG elements like circle, rect, and line are configured with attributes for position, size, fill color, and stroke. The rendering relies solely on static SVG markup within an HTML page, with no JavaScript or React components driving the display, highlighting the basic syntax behind vector graphics in the browser.

Nov 19, 2023