Joseph Bermudez

@JosephBerm·5 public vizzes

Fork of Smiley Face I

A smiling face built from basic SVG shapes—a grey circle for the head, two eyes, red pupils, a mouth arc, a nose, and two ears—renders through React components. The face is centered on a 950 by 500 canvas, with each feature positioned via D3’s `arc()` generator for the mouth, nose, and ears. Pupils and eyes are drawn as circles and ellipses, using React state-free functional components and D3 v7 for coordinate calculations, all output as static SVG elements.

Apr 23, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile fuel efficiency data, plotting each car’s origin against its horsepower as a scatter plot with semi-transparent circles and tooltips that reveal the vehicle’s name. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered as SVG through Vega. Data is loaded from a CSV file using d3’s `csv` function. The visualization auto-fits the window and customizes axis and label styling via a config object.

Apr 23, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of Auto MPG data, where each point represents a car with its miles per gallon on the x-axis, horsepower on the y-axis, and weight encoded by point size. The color distinguishes the car’s origin. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that renders to SVG via Vega and Vega-Lite. Data is loaded asynchronously from a CSV URL using d3.csv. Interactive tooltips display car names, and custom configuration adjusts axis and label styling.

Apr 23, 2022

Loading thumbnail…

Mouse Follower

A single gray circle sits at the center of an SVG canvas, rendered with React elements inside a 950 by 500 viewport. The example demonstrates a minimal interactive setup where the circle acts as a static target, while the code structure imports the `arc` function from d3 but does not use it. React's `ReactDOM.render` mounts the `<App>` component, which returns an SVG containing the `<circle>` with fixed `cx`, `cy`, and `r` attributes. No mouse event handlers, transitions, or dynamic data are present, showing only the basic composition of React and D3 v7 in a single visualization.

Apr 22, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Android

A grid of eighteen identical smiley faces, each rendered as an SVG composition of circles and arcs, forms a repetitive pattern. The faces feature light grey backgrounds, black outlines, red pupils, and simple mouth and nose shapes, all constructed using React components. The visualization leverages D3.js arc generators for curved elements and React's component model for modular assembly, drawing from a fixed set of parameters defined in the main index.js file.

Apr 22, 2022