Skip to main content
Log in
L

LucyI

@LucyI·20 public vizzes

Loading thumbnail…

Rendering Data with React

A pie chart visualizes the distribution of CSS named colors, with each color represented as a slice filled with its own RGB hex value. The application loads the color data from a CSV file using the D3 `csv` function, then maps each row to a pie slice using the D3 `arc` generator within a React component. The SVG rendering is built with React, combining ReactDOM for mounting and D3's utility functions for data processing and geometry.

Nov 21, 2021
Loading thumbnail…

Rendering Data with React

A React application renders CSS named colors from a CSV file as vertical color bars. The code uses React hooks (useState, useEffect, useCallback) and ReactDOM to display the data, while d3.csv loads the dataset from a GitHub gist URL. Each bar’s background color is set from the 'RGB hex value' column, creating a 960-pixel-wide stacked swatch with a loading state.

Nov 21, 2021
Loading thumbnail…

Vega-Lite API Template

This example displays a bubble chart of religious populations by country, with circle size encoding population and axes for country and religion. It uses the Vega-Lite API to construct the visualization declaratively, with the `vl.markCircle()` and `vl.encode()` methods. The chart renders via the Vega rendering engine with SVG output, and data is loaded from a CSV file using D3's `d3.csv()`. The `autosize({ type: 'fit' })` setting makes the chart responsive to the window.

Nov 17, 2021
Loading thumbnail…

Loading Data with React & D3

This example shows how React state and D3 utilities work together to load and summarize a CSV dataset. It displays the file size in kilobytes, the number of rows, and the number of columns inside a large <pre> element. The code uses React’s `useState` and `useEffect` hooks to fetch the CSV from a GitHub gist via `d3.csv`, then formats the result with `d3.csvFormat` and passes it to a custom message function. The visualization is minimal, focusing on data-loading mechanics rather than graphical output.

Nov 17, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data with D3. It displays a summary message showing the data size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch and parse a remote CSV file containing CSS named colors from a GitHub gist. It also calculates the formatted data length with `d3.csvFormat` and accesses rows and columns through the parsed data object’s `length` and `columns` properties.

Nov 17, 2021
Loading thumbnail…

Mouse Follower

A single yellow circle of radius 30 follows the mouse cursor across an otherwise blank SVG canvas. The React app uses a `useState` hook to track mouse coordinates, updated via an `onMouseMove` event handler that reads `clientX` and `clientY`. The circle’s `cx` and `cy` attributes are bound directly to these state values, so its position re-renders on every pointer movement within the 960×500 SVG viewport.

Nov 16, 2021
Loading thumbnail…

Smiley Face Part 1

A grid of randomized smiley faces demonstrates how React components and D3's `arc` API combine to build a modular SVG visualization. Each face, generated from a `range(6 * 3)` array, uses the `Face` component with `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, whose parameters like `eyeOffsetX`, `eyeRadius`, and `mouthRadius` vary per instance via `Math.random()`. The `Mouth` component leverages `d3.arc` to draw an arc path, while `FaceContainer` wraps all elements in a translated SVG group.

Nov 15, 2021
Loading thumbnail…

Currency Pattern for text input (US)

This example demonstrates a US currency input field that uses an HTML pattern attribute to validate dollar amounts. It shows how a regular expression restricts user input to acceptable formats, including an optional dollar sign, commas for thousands separators, and up to two decimal places. The code defines a single `<input>` element of type `text` with an ID of `dollarAmount`, applying the `pattern` attribute for validation and a `title` attribute to provide a custom error message. No JavaScript libraries or frameworks are used; the rendering relies entirely on native HTML5 form validation behavior.

Jul 27, 2017
Loading thumbnail…

Set Active Class on Nav-Menu-Item in Nunjucks

This example demonstrates a Nunjucks template pattern for conditionally applying an "active" class to a navigation menu item based on the current page. It shows how a `page_title` variable, set in an extending template, is compared against each item in a `navItems` array from a `data.json` file. The `for` loop iterates through the items, and an inline `if` statement appends the `menu-item-current` class when the titles match. The resulting HTML output is displayed, highlighting the active "about" link.

Apr 29, 2017
Loading thumbnail…

Stacked-to-Grouped Police Killings

This visualization displays police killings from 2015 (January through June) using data from FiveThirtyEight, with the x-axis showing months and bar segments representing different racial categories. A radio-button control lets users switch between stacked and grouped bar layouts, with sequenced transitions that animate the bars smoothly between the two configurations to maintain visual continuity. The implementation uses D3.js version 3.5.5 with the `d3.layout.stack` API to compute stacked positions and SVG rect transitions to update positions and heights.

Mar 31, 2017
Loading thumbnail…

Three y-axes in v4

This example displays three lines on a single chart, each paired with its own color-coded y-axis. A steelblue line plots the `close` values against a left axis, a red line plots `open` values against a right axis, and a purple line plots the logarithm of `open` against a second left axis positioned over the chart. Built with d3.v4, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisLeft`, and `d3.axisRight` to render SVG paths and axes. The data comes from a local CSV file with date, close, and open columns.

Mar 31, 2017
Loading thumbnail…

Scale & Axis example

This example demonstrates how to construct and customize a linear scale and axis for a single city’s temperature time series. It loads tab-separated values from a local data.tsv file, parses the date column, and isolates the values for San Francisco. Using D3 v4’s `d3.scaleLinear` and `d3.extent`, it computes the data’s domain and maps it to a fixed pixel range, then renders a left-oriented axis via `d3.axisLeft` onto an SVG element. The visualization focuses on the mechanics of scaling and axis generation rather than presenting a full chart.

Mar 31, 2017
Loading thumbnail…

D3.Unconf 2016 Badge

A flower-shaped badge encodes movie metadata from a JSON dataset, with each flower's petal count, size, and colors mapping to IMDb votes, ratings, and genres. The visualization uses D3 v4 to generate SVG paths for petals and applies a multiply blend mode for overlapping color effects, while D3 scales and Lodash handle data binning and aggregation. A motion blur filter on the SVG defs adds a subtle animated quality to the static rendering.

Mar 31, 2017
Loading thumbnail…

Basic starter code for many simple D3 charts, v4

A scatterplot displays Anscombe’s Quartet, with points labeled by their x- and y-coordinates and grouped by quartile. The chart uses D3 v4’s `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisRight`, with axes positioned on the right and bottom of an SVG canvas. Data loads from a tab-separated file via `d3.tsv`, and the x- and y-domain extents are updated based on the loaded values. Each point is drawn as a `circle` with a sibling `text` label, both grouped in a transformed `<g>` element.

Mar 31, 2017
Loading thumbnail…

Click Transition

Eight red circles sit in a vertical column on an SVG stage. A click triggers a D3 v4 transition that splits the data array, moving the four exiting circles horizontally to the right with staggered delays before removing them, while the four remaining circles turn blue and shift position. The example demonstrates the enter-update-exit pattern using `d3.transition`, `selection.data`, `exit`, and `remove`, with hardcoded data arrays and a linear easing function.

Mar 31, 2017
Loading thumbnail…

Converts Bulma CSS framework from SASS to SCSS

This example converts the Bulma CSS framework from SASS syntax to SCSS using a custom Gulp pipeline. It shows how `gulp.src` selects both root and nested `.sass` and `.scss` files from `node_modules/bulma`, then pipes them through the `sass-convert` converter with `from: 'sass'` and `to: 'scss'` options. The `gulp-replace` plugin rewrites any `.sass"` file-path references to `.scss"` in the source files, and a separate `gulp-sass` task compiles the converted `bulma.scss` to CSS. The gist demonstrates automating framework migration and recompilation with Node.js tooling.

Mar 30, 2017
Loading thumbnail…

Gist a8da3e8cbb2e652a76db50d9774e916a

This visualization is a reference document for Nunjucks template filters. It shows the input syntax and corresponding output for a wide range of built-in filters, including `abs`, `batch`, `capitalize`, `dictsort`, `escape`, `groupby`, `indent`, `join`, `random`, and `replace`. The examples use Jinja-style template syntax with `{{ }}` for expressions and `{% %}` for statements, and the outputs are displayed as plain text results.

Jul 25, 2016
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates a modular scale for typography, applying a consistent proportional size and margin rhythm to headings and paragraphs. A Sass loop through the heading elements h6 to h1 assigns font sizes computed by the Modular Scale library, with negative margins creating a tight vertical rhythm. The body’s line-height is set to the golden ratio (1.61803) via `$ms-ratio`, and headings use `white-space: nowrap` and `overflow: hidden` to preserve their single-line layout. Latin filler text shows the scaling effect across all levels.

Jun 30, 2015
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates a responsive web page layout using the Susy framework for Sass, showing how a seven-column grid reconfigures at a wider breakpoint into a twelve-column layout with distinct regions for banner, navigation, main content, summary, and footer. The page includes a visible grid background overlay generated by Susy's `susy-grid-background` mixin, which displays column and gutter proportions. The layout uses Susy mixins like `container`, `span-columns`, `prefix`, and `pad`, while the HTML provides semantic structural elements for comparison.

Jun 18, 2015
Loading thumbnail…

Gist 749f66edf8a547d2508e958f7ec38e50

This example displays a styled list of articles with titles, publication dates, short descriptions, and "Read More" buttons, built using a Nunjucks template that extends a layout file. It shows how to structure a content listing page by iterating through articles sorted by a helper function, pulling metadata like feature images and date formatting. The template integrates Jinja-style logic with `moment` for date display and uses environment helpers to retrieve local assets. The rendering relies on HTML and CSS classes, with no client-side JavaScript libraries involved.

Jul 26, 2013