Felipe Maion

React Maps

This example shows a React application that renders a simple message, “Hello React!”, centered on the page using large, bold text. It demonstrates how to set up a React component and mount it to the DOM via `ReactDOM.render`. The code uses `React` and `ReactDOM` from the UMD production builds loaded via CDN, with the app defined as a functional component returning a `<div>` element with a CSS class. No data source or external visualization library is used; the example only displays static text styled through the `message` class.

Feb 14, 2023

SP - BRAZIL - MAP

This choropleth map displays the municipalities of São Paulo, Brazil, colored by political party affiliation. The geographic boundaries are rendered as SVG paths using D3.js version 7, with each region’s `data-party` attribute determining its fill color. The visualization uses D3’s selection API to attach mouseover event listeners to all geographic elements, triggering a lookup in the imported `SP` dataset to log the corresponding municipality details. The map includes zoom and pan capabilities through a transformable group, and the styling applies white strokes between regions for clear separation.

Nov 9, 2022

Refactor Animated Scatter Plot with Menus

This interactive scatter plot lets users explore the classic Iris Dataset by switching the X and Y axes via dropdown menus. The visualization uses D3 v6 with an SVG rendering approach, animating circle positions and axes over one-second transitions. The reusable chart pattern employs `selection.join` for enter/update/exit cycles, while the menu component handles user input through an event dispatcher. Data is loaded asynchronously via `d3.csv` and `d3.json`, with scales and axes created using `scaleLinear`, `axisLeft`, and `axisBottom`.

Jun 5, 2021

Fork of Animated Scatter Plot with Menus

This example presents an animated scatter plot of the Iris dataset, with dropdown menus that update the x- and y-axis mappings to any of the dataset’s numeric or categorical attributes. The chart is built using D3 v6 with SVG, and relies on reusable components for the plot and menu. Selection joins with transitions (e.g., `transition.attr`) move points smoothly between positions, while axes also transition to new scales when data attributes change.

Jun 5, 2021

Fork of Animated Reusable D3 Scatter Plot

This example demonstrates the reusable scatter plot pattern from Mike Bostock’s “Towards Reusable Charts,” applied to the Iris Dataset. It animates a transition every three seconds, cycling through four measured flower attributes (petal width, sepal width, petal length, and sepal length) as the x-axis variable. Built with d3.v6, the chart uses `scaleLinear`, `axisLeft`, `axisBottom`, and `selection.join` to smoothly update circle positions with a 1000ms `transition`, while axes re-scale in tandem. SVG rendering fills the full browser viewport, with styling from the Share Tech font.

May 29, 2021

Scatterplot of Curranians on VizHub Planet

A scatterplot tracks the growth of registered Curranians on VizHub Planet over time, with each point representing a date and the corresponding number of users. The visualization uses D3.js, loading data from a CSV and mapping dates to the x-axis and user counts to the y-axis. Each data point is rendered as a custom SVG path shape of the Curran logo, scaled and positioned within a white background box. Axis labels clarify that the plot measures dates in the Gregorian calendar against the total number of Curranians.

Curranians on VizHub Planet

This scatter plot visualizes the growth of registered users on VizHub over time, from August 2018 to April 2021. Each data point is rendered as a small custom SVG path of a face, scaled and positioned using D3’s `scaleTime` and `scaleLinear`. The code uses `d3.csv` to load the data, `axisLeft` and `axisBottom` for the axes, and `selection.append('path')` with a pre-defined path string from a separate `paths.js` module.

'Reusable' D3 Scatter Plot with Curranians Symbol with Title

This visualization shows the growth of Curranians on the VizHub Planet over time, with each data point rendered as a custom SVG path of the Curranian symbol. The scatter plot maps dates on the x-axis and user counts on the y-axis, with hover tooltips revealing exact values. The code uses D3 v6 modules including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and a custom path definition from `paths.js`. Data originates from a CSV file containing date and user count pairs, rendered as an SVG with configurable margins and axis labels.

Reusable D3 Scatter Plot with Curran's Symbols

This example visualizes the growth of Curran Kelleher's YouTube channel subscribers over time, plotting each data point as a custom SVG path resembling a person. The visualization uses D3 v6 to load a CSV file, parse dates, and build a scatter plot with time and linear scales for the x and y axes. A unique "Curran" symbol path is applied to every point, with hover tooltips showing the total subscriber count and date via appended `<title>` elements. The code demonstrates D3's reusable chart pattern with getter and setter methods.

All Info In One - Studying of D3 Scatter Plot

This example uses D3 v6 to render the Iris Dataset as an interactive-free scatter plot, encoding petal length and width on the x- and y-axes via `d3.scaleLinear` and `d3.extent`. Each data point is drawn as an SVG ellipse, where the horizontal and vertical radii represent sepal length and width, creating a compact multi-dimensional visualization. Points are colored by species using a simple switch statement, and hover tooltips display all four measurements via appended `title` elements. The plot includes axes generated with `d3.axisLeft` and `d3.axisBottom`.

May 8, 2021

Title to the Dot (Studying of D3 Scatter Plot)

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis as circular marks. Built with D3 v6, it uses `d3.csv` to load data, `d3.scaleLinear` for both axes, and `d3.extent` to set the domains. Each circle renders in SVG and includes a native `<title>` element that displays the exact coordinate values on hover, while `d3.axisLeft` and `d3.axisBottom` generate the labeled tick marks.

May 3, 2021

Studying of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 with SVG rendering, loading data via `d3.csv` and parsing numeric fields. Scales are created with `d3.scaleLinear` and `d3.extent`, while axes are generated using `d3.axisLeft` and `d3.axisBottom`. Each data point is a circle with a tooltip showing its coordinates.

May 3, 2021

Playing with D3 and Gantt

This interactive Gantt chart visualizes the timeline of COVID-19-related events across American countries, using a horizontal bar layout to show each nation’s start and end dates. The view includes a main chart with labeled lanes and a mini overview, linked by a brushX selection tool that filters the time range, while a vertical line marks the current date. Built with D3 v6, the example uses scaleTime, scaleLinear, axisBottom, and brushX APIs, rendering as SVG with animated updates and tooltips. Data is hardcoded in a JavaScript module, with countries like Argentina and Brazil having distinct intervals.

Apr 29, 2021

D3 Starter

This example demonstrates the minimal setup required to render text with D3 version 6, displaying the phrase "Hello D3 version 6" in large, centered type on a blank page. The code uses the `select` function from the D3 library to target the `body` element and sets its text content directly, without any data binding or SVG rendering. The visualization relies on D3’s core DOM manipulation API rather than the data-driven enter/update/exit pattern, serving as a clear starting point for beginners. The HTML file loads d3.v6.min.js from a CDN and a separate bundle.js file, which imports the `select` function specifically.

Apr 18, 2021

Bird's Landscape - D3.js

A D3.js-powered SVG landscape features a sky, sun, land, trees, and birds, with animated gradients simulating a 24-hour day-night cycle. The scene is constructed entirely via the SVG DOM API, using `createSVGElement` and `setAttribute` to build paths, gradients, and groups. Birds are cloned and transformed with CSS `scale` and `rotate`, while the sun and horizon colors animate through `animate` elements with timed `values` arrays.

Apr 3, 2021

SVG Playing Around and Studying

This example demonstrates an animated SVG scene of birds, a tree, and a sun against a dynamic sky and landscape. The visualization uses the SVG API to construct shapes procedurally via JavaScript, including randomized bird and tree elements. Gradients and CSS keyframe animations, like `suntrack`, animate the sun's position and the sky’s color over a 24-second cycle. The code references `createElementNS` for creating SVG elements and applies inline styles and transformations to depict a stylized natural environment.

Mar 29, 2021

Curran's Face a Là Sol LeWitt - Getting it Right B&W Game

The game displays a face made of Sol LeWitt-inspired patterns that flicker between black-and-white and colored states. Players click to freeze the animation when all patterns are monochrome; correct guesses increase score and speed, while mistakes cost lives. The game uses the SVG DOM API to create elements, with `createSVGElement` and mouse event listeners controlling the interaction and timing.

Mar 25, 2021

Curran's Face a Là Sol LeWitt - Getting it Right

An interactive game challenges players to time a screen freeze so that only black-and-white patterns are visible, referencing Sol LeWitt's art. The animation cycles through colorful horizontal and vertical stripe groups masked by a face-shaped SVG path. Using the SVG Mask API and `createElementNS`, the code builds layered `<rect>` elements and toggles their visibility via `getComputedStyle` and `setInterval`. A score increments on correct timing, and the timer accelerates after each success, increasing difficulty.

Mar 24, 2021

Curran's Face a Là Sol LeWitt - Click TimerOnOff

A generative SVG portrait of a face emerges through layered, animated masks that reveal and conceal alternating stripe patterns. The piece draws on Sol LeWitt’s aesthetic by combining vertical and horizontal color bands with a hand-drawn path, the face repeated as both white and black masks. JavaScript builds the SVG structure, cycling through nine colors and toggling visibility of four background groups on a timer, while CSS transitions apply to the masks. The code uses `svgdata()`, DOM creation via `createElementNS`, and inline styles for randomization, yielding a flickering, patterned rendering with an abstract, geometric quality.

Mar 24, 2021

Curran's Face a Là Sol LeWitt - BackGround OffSet

Four layered geometric backgrounds—horizontal bars, vertical stripes, and their offset variants—flicker on and off behind a portrait silhouette. The portrait derives from an SVG path, scaled and used as a mask to constrain the patterned layers. JavaScript randomizes the visibility of each background group, blending the work with Sol LeWitt's aesthetic. The animation runs purely on a timer, toggling CSS visibility states within a dynamic SVG structure.

Mar 23, 2021

Test with Path

A generative animation reproduces a Sol LeWitt-inspired face using a single SVG path that defines both a mask and the trajectory of a moving ball. The path, generated by the `svgdata()` function, contains a complex curve that is applied as a mask to two layered background grids of colored rectangles. A red circle follows the same path via an SVG `animateMotion` element, while the visibility of four background groups randomly toggles to create shifting color patterns. The animation runs indefinitely, cycling through a palette of nine colors.

Mar 23, 2021

Curran's Face a La Sol LeWitt - Bouncing

Curran's Face a La Sol LeWitt renders a geometric face as an SVG path, which is animated through a series of bouncing color-grid backgrounds. The face path is defined by a large string of cubic Bézier commands (`svgdata()`), scaled and positioned via `transform`. It is used as a mask for two layered groups of colored rectangles, with alternating visibility toggled every 1000ms. The animation uses raw DOM manipulation via `document.createElementNS` and CSS transition properties, with no external libraries.

Mar 22, 2021

Fork of Curran's Face a La Sol LeWitt Reproduction 'Switchart' Randomized Spinner

A fork of Curran’s Face a La Sol LeWitt reproduction, this visualization presents a randomized spinner that animates a black-and-white Sol LeWitt-inspired face path. The SVG path is drawn using raw SVG API calls, with a mask and CSS transitions controlling visibility and movement. The piece uses `document.createElementNS` to build the SVG structure, while CSS rules and transforms create the spinning effect. It showcases generative, geometric line art in a minimalist, browser-based rendering.

Mar 22, 2021

Curran's Face a La Sol LeWitt Reproduction 'Switchart' Randomized

This visualization reproduces a Sol LeWitt-style portrait of Curran using an SVG mask that reveals the face through randomized shape switching. The code constructs an SVG canvas with a mask containing a black rectangle and a complex path defining the face, while CSS transitions animate the mask’s transform properties. A separate stylesheet defines transitions for `#curran-white-mask` and `#curran-black-mask`, though these elements are not created in the script shown. The rendering relies entirely on raw SVG DOM manipulation via `createElementNS`, with no external libraries, and the randomized effect appears tied to the mask’s animated scaling or positioning.

Mar 22, 2021

Fork of Curran's Face a La Sol LeWitt Reproduction 'Switchart'

This piece reproduces Curran’s “Face a La Sol LeWitt” artwork as an interactive SVG. The page uses a dynamically created SVG with a mask applied to a detailed path that traces the face’s outline, with tiny geometric shapes forming facial features. The CSS defines transitions on mask elements for potential animation. The visualization is entirely code-generated from path data, with no external data source, using raw SVG and DOM manipulation.

Curran's Face a La Sol LeWitt Reproduction 2

This generative artwork renders a facial portrait constructed from a Sol LeWitt-inspired SVG path. It uses JavaScript and the DOM API to create a full-screen SVG and applies a mask to reveal the path. The piece uses a `mask` element to define visibility for the image, and its styling is handled by CSS for a specific animation class.

Curran's Face a La Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired face using a single SVG path that is revealed through an animated mask. The drawing, defined by a complex series of cubic and quadratic Bézier curves, is clipped by a black mask rectangle that grows to expose the face. The visualization relies on raw SVG elements created via the Document Object Model API, with CSS transitions controlling the mask’s expansion. No external libraries are used; the rendering approach is purely native SVG.

Curran's a La Sol LeWitt Reproduction

This interactive SVG reproduction of Sol LeWitt’s “Face à La” uses a hand-drawn SVG path of a face as a mask over the full viewport. The mask’s fill starts black and likely reveals colored or animated content beneath, with CSS transitions on the mask’s transform for smooth movement. The code uses raw DOM APIs like `createElementNS` and `setAttribute` to build the SVG structure, with inline path data defining the face’s contours. Styling comes from an external stylesheet, and the example demonstrates generative geometric art through procedural SVG manipulation.

Random Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing as an interactive SVG visualization. The artwork appears as a black-and-white geometric composition centered on the screen, with the shape defined by an intricate SVG path. The code creates an SVG element sized to the browser window, applies a circular mask, and draws the path using SVG’s native `path` element and `d` attribute. The rendering is purely random in placement, with no external data source or additional libraries beyond standard DOM manipulation and SVG APIs.

Sol LeWitt Reproduction Exercise

This generative art piece recreates a Sol LeWitt-inspired composition using raw SVG elements created via the DOM API. It shows a field of randomly placed horizontal and vertical rectangles, where two circular masks reveal distinct visual layers: one masking a set of horizontal bars, and another revealing a grid of random rectangles. The code uses `document.createElementNS` to build SVG masks, circles, and rectangles, with random dimensions and positions for the geometric forms.

Pseudo Gantt Chart

This pseudo Gantt chart displays activity durations across a weekly timeline using an SVG canvas. The chart maps eight activities (A through H) against weeks 1 through 17, with a light gray grid and column headers. It uses a static SVG structure with rectangles and lines styled via CSS classes, and text elements for labels. The rendering is purely SVG-based, with no JavaScript libraries involved, relying on hard-coded coordinates and styles.

Mar 14, 2021

Fork of HTML Starter

This example showcases a hand-crafted SVG path tracing the outline of Curran's face, which scales up smoothly on mouse hover using CSS transitions. The path data was generated in GIMP by converting a selection to a path and then refining it manually. The visualization is built entirely with raw SVG elements and styled with CSS, using the `transform: scale()` property on a `#scale` span to animate the image from 2x to 4x magnification over two seconds.

Mar 11, 2021

Line Chart with Multiple Lines

This line chart displays a week of temperature data (in degrees Celsius) for cities worldwide, sourced from Data Canvas - Sense Your City. It uses D3 v5 to render an SVG visualization, with the `scaleTime` and `scaleLinear` functions mapping timestamps and temperatures to axes. The chart includes multiple smoothed lines (`line` with `curveBasis`) colored by city via a `scaleOrdinal` color scale, a legend built with a custom `colorLegend` function, and grid lines generated by `axisBottom` and `axisLeft`.

Dec 19, 2020

Bar chart

This bar chart displays population counts for China, India, and Brazil using horizontal rectangles scaled by value. The visualization loads data from a CSV file and renders SVG elements. It uses d3.csv for data loading, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis categories, and d3.axisLeft and d3.axisBottom for tick marks. Population values are multiplied by 1000 before being plotted.

Dec 14, 2020