helloelectro

@helloelectro·11 public vizzes

Sol LeWitt Repro w/ D3 - different method

This example reproduces a Sol LeWitt-inspired wall drawing by filling the screen with horizontal and vertical striped rectangles. It creates 100 rows and 100 columns, each 10 pixels thick, and layers them using two SVG masks to reveal a circular cutout where the orientations intersect. The visualization uses D3 v7’s `select`, `range`, and `join` to append SVG elements, while separate mask definitions with black and white fills control visibility. Rendering is fully SVG-based, with window dimensions driving the canvas size.

Feb 12, 2023

Loading thumbnail…

Sol LeWitt Repro w/ D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical bars whose visibility is controlled by inverted SVG masks, creating a distinctive halftone pattern. The code uses D3 v7’s `select`, `selectAll`, and `data().join()` to bind an array of 100 rectangle marks to SVG `rect` elements, each masked via `url(#mask-Inv)`. A central circular mask region inverts the bar visibility, producing the artwork’s characteristic optical interplay.

Feb 12, 2023

Loading thumbnail…

Sol LeWitt Repro w/ vanilla JS

A full-screen SVG reproduction of a Sol LeWitt wall drawing displays two interlocking sets of thin vertical and horizontal bars. A central circular mask inverts the visibility of the two grids, creating a stark contrast between the denser vertical lines inside the circle and the horizontal lines outside. The piece is built with vanilla JavaScript, dynamically creating SVG elements and applying mask definitions without any external libraries. The code generates one hundred vertical and one hundred horizontal rectangles, using the `mask` attribute to alternate their visibility based on the circle’s boundary.

Feb 10, 2023

Loading thumbnail…

IMDb Movie ratings example

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories. The visualization emphasizes how genre influences rating outcomes, revealing that documentaries and dramas tend to receive higher ratings than action or comedy films. Hovering over any segment displays the exact percentage for that genre and rating level. The chart is built with D3.js v7, using `d3.stack()` to create the stacked segments, `d3.scaleBand()` for the categorical axis, and custom mouse event handlers for the interactive tooltips. Data comes from the included CSV file.

Feb 8, 2023

Loading thumbnail…

Cities with the Largest Population in US 2020 example

This example visualizes the 200 largest U.S. cities by 2020 population as a bar chart, with each bar representing a state’s total population and colored by individual city. It answers questions about top cities and state-level distributions. Built with Vega-Lite, the code uses `vl.markBar()`, `vl.groupby`, and encodings for x, y, color, and tooltip, processing CSV data from World Population Review via d3.csv. The tooltip is enabled through the vega-tooltip API.

Feb 7, 2023

Loading thumbnail…

Javascript Basics (code in index.html)

This example demonstrates JavaScript basics by outputting results to the console, including arithmetic operations, comparisons, variable assignments, loops, and arrow functions. The final active code creates a `person` function that returns an object with first and last name properties, then logs the result. The visualization uses an empty SVG element and plain JavaScript with no external libraries, relying on browser console output for visible results.

Feb 6, 2023

Loading thumbnail…

Pseudo Bar Chart Horiz

A pseudo bar chart displays seven labeled categories (A–G) with rounded bars of varying lengths, where category C is highlighted in pink while the rest are black. The chart uses rotated rectangles drawn directly in SVG, with each bar positioned and rotated via the `transform` attribute. Labels are rendered as SVG text elements, using a Roboto font loaded from Google Fonts. The arbitrary bar heights appear hand-coded rather than derived from a data file, and the minimal styling is applied through CSS classes within the embedded stylesheet.

Feb 6, 2023

Loading thumbnail…

Pseudo Bar Chart Basic

A pseudo bar chart displays nine rounded rectangles as vertical bars, with varying heights and muted colors, including gray and orange highlights. Built with static SVG markup in an HTML file, the visualization uses `rect` elements with fixed `x`, `y`, `width`, `height`, and `rx` attributes to simulate a categorical data series. The chart appears designed as a static image export, lacking axes or interactive features. Its styling suggests a drafted design rather than a data-driven visualization.

Feb 6, 2023

Loading thumbnail…

Pseudo Scatter Plot

This example shows a scatter plot with nine black circles arranged on a white background. It is a static visualization, with the points manually positioned at various coordinates across the SVG canvas. The graphic is created using raw SVG elements, specifically `circle` tags, and is built without the aid of any external JavaScript libraries or data bindings. The data points are hand-coded, making it a simple, non-interactive representation that demonstrates basic SVG rendering within an HTML page.

Feb 6, 2023

Loading thumbnail…

Treemap of video game sales example

This treemap visualizes the top 100 most-sold video games, grouped by platform. The code uses d3.treemap to compute the layout and renders it as SVG rectangles with categorical color scales. Hovering over a tile displays a tooltip with the game’s name, category, and sales value. The dataset is loaded from a JSON file, and the example supports switching between video game, movie, and kickstarter datasets via URL parameters.

Feb 5, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within an HTML page, showcasing interactive hover effects that animate color changes over time. It includes a blue rectangle, a red circle, and a white vertical line, all defined directly in the markup. CSS transitions handle the smooth color shifts, such as the rectangle turning purple and the circle turning white on hover. The SVG canvas scales to full width with a fixed height, and the page uses embedded JavaScript and CSS within a minimal HTML structure, highlighting a straightforward approach to creating responsive, animated vector graphics.

Feb 5, 2023