RonanFonseca

@RonanFonseca·10 public vizzes

Sol Lewitt Reproduction - Ronan

This example reproduces a Sol LeWitt-inspired drawing using raw SVG elements created dynamically with JavaScript. It renders a series of vertical rectangles, each with a fixed width of 10 pixels, spaced 20 pixels apart across the full width and height of the browser window. The code uses `document.createElementNS` to construct SVG `rect` elements and appends them to an SVG container, with the canvas size set to `window.innerWidth` and `window.innerHeight`. No external libraries are used; the work relies solely on the SVG DOM API and a loop that generates the geometric pattern.

Aug 19, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG drawing using four nested circles to create a concentric target pattern in red, white, and red. The circles are centered at the same coordinates, with radii decreasing from 110 to 20 pixels, achieving a layered bullseye effect. The code uses raw SVG elements within an HTML page, styled with CSS to remove the scrollbar. JavaScript is not active in this visualization; instead, the circles are declared directly in the `index.html` file. The `body` margin is set to zero and `overflow` is hidden to maximize the viewing area.

Aug 19, 2022

Loading thumbnail…

Fork of Rendering Data With React - Ronan

This visualization displays the full list of CSS named colors as wedges in a semi-circular pie chart. It loads color data from a CSV file using `d3.csv`, then renders each color as an SVG path generated with `d3.arc`. React manages the data-fetching state via `useState` and `useEffect`, while `ReactDOM` renders the SVG structure. The chart uses a fixed arc with an inner radius of zero and an outer radius matching the viewport width.

Aug 18, 2022

Loading thumbnail…

Rendering Data With React - Ronan

This example displays a list of CSS named colors as horizontal bars, each rendered with its corresponding RGB hex value as the background color. The visualization loads color data from a CSV file using D3’s `csv` utility, then manages the asynchronous data fetch with React’s `useState` and `useEffect` hooks. While the data loads, a "Loading..." message appears. Once loaded, React maps over the data array, producing stacked color strips that fill the viewport. The code uses React 16.9, D3 v5, and ReactDOM to render the results.

Aug 18, 2022

Loading thumbnail…

Fork of Vega-Lite API Template 2019 - Ronan

This example presents a ranked bar chart of country populations, with bars sorted in descending order and sized at a fixed width. The visualization loads population data from a CSV file hosted on GitHub, then renders it using the Vega-Lite API, which builds on Vega and Vega-Lite. The code registers the Vega-Lite API with D3’s CSV loader, applies a custom configuration for axis styling and font sizes, and fits the chart to the full window dimensions. Tooltips display the country name on hover, and the rendering uses SVG output.

Aug 18, 2022

Loading thumbnail…

Fork of Vega-Lite API Template - Ronan

This visualization displays Auto MPG data from the UCI Machine Learning Repository, plotting each car's miles per gallon against its horsepower. Points are colored by origin and sized by vehicle weight, with tooltips revealing car names. The chart is built using the Vega-Lite API atop Vega and Vega-Lite, with D3’s `csv` function loading the external dataset. Custom configuration adjusts axis and label styling, while the view autosizes to the window, using SVG rendering and a Vega Tooltip handler for interactions.

Aug 18, 2022

Loading thumbnail…

Loading Data with React & D3 - Ronan

This example shows a React component loading a CSV dataset of CSS named colors from a GitHub gist and displaying its metadata as a text summary. It demonstrates the integration of D3’s `csv` loader with React’s `useState` and `useEffect` hooks to fetch data asynchronously and store it in component state. Once loaded, React renders a custom `message` function that calculates and formats the file size in kilobytes, row count, and column count using `d3.csvFormat` and `data.columns`. While the data is pending, the interface shows a simple “Loading...” placeholder. The example uses d3.v5, React 16.9, and a plain `<pre>` element for output.

Aug 17, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basic mechanics of loading and parsing a CSV dataset with D3.js. It displays three key statistics about the retrieved file: its size in kilobytes, the number of rows, and the number of columns. The visualization uses the `d3.csv` function to asynchronously fetch and parse the data from a GitHub Gist containing CSS named colors. The parsed result is then accessed to count rows and columns, while `d3.csvFormat` calculates the total data size for the reported metrics.

Aug 17, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor as it moves across a blank SVG canvas. The circle’s position is updated on every mouse-move event, using React’s `useState` and a custom `handleMouseMove` callback. The example uses React and ReactDOM to render an SVG `<circle>` element, with the cursor’s `clientX` and `clientY` coordinates directly mapping to the circle’s `cx` and `cy` attributes. The initial circle is centered at 480, 250 with a radius of 30.

Aug 17, 2022

Loading thumbnail…

Smiley Face Part I - Ronan

Eighteen identical smiley faces are arranged in a grid, each rendered as an SVG circle with two dot eyes and an arc-shaped mouth. The faces vary randomly in eye radius and mouth width, giving each a slightly different expression. The React code uses reusable components (`BackgroundCircle`, `Eyes`, `Mouth`) and a `FaceContainer` to manage the SVG coordinate system, while the `d3.arc()` API generates the curved mouth path for each face.

Aug 16, 2022