Erick Brandao

@erickfb5·6 public vizzes

Stylized Attendance

This bar chart displays attendance counts by year. The graph uses a linear scale for the attendance values and a band scale for the years, with the bars extending from the left axis. Built with React and D3 v5, the visualization renders as SVG, pulling data from a CSV file via the `d3.csv` function. The chart includes custom axes (`AxisBottom`, `AxisLeft`) and rectangular marks (`Marks`) to represent each data point.

May 30, 2022

Loading thumbnail…

Refactored Attendance

This example displays attendance counts by year as a horizontal bar chart. The bars, rendered as SVG rectangles, encode attendance values on a linear scale while the y-axis uses a categorical band scale for each year. Built with React and D3 v5, the code separates chart components into modular files, uses `scaleLinear` and `scaleBand` for scales, and fetches data from a CSV file via `d3.csv`. The visualization demonstrates a refactored approach to organizing D3 code within a React framework.

May 30, 2022

Loading thumbnail…

Attendance

This example displays a horizontal bar chart of attendance figures by year using React and D3.js. Data is loaded asynchronously from a CSV file via `d3.csv()`. The chart uses `d3.scaleBand()` for the categorical year axis and `d3.scaleLinear()` for the quantitative attendance axis, with magenta gridlines and value labels. SVG rectangles encode each year’s attendance, with a fixed 960×500 canvas and margins for axis labels.

May 30, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a cartoon smiley face entirely with SVG shapes, using React to create and update the markup while D3’s `arc` generator defines the mouth’s curved path and the eyebrow segment. Static circles and ellipses position the eyes, pupils, and a red nose, with a yellow face outlined by a thick black stroke. The visualization demonstrates how D3 helper functions can be embedded within a React component’s render output, with all geometry computed from fixed constants rather than a data source.

May 30, 2022

Loading thumbnail…

Mouse Follower

This example renders a single yellow circle at the top-left of an SVG canvas, using React to define the circle and D3 v5 to load the visualization. The circle’s radius and position are fixed, and a `handleMouseMove` function is attached to the SVG, logging "aaaaaa" to the console on any mouse movement over the canvas. It demonstrates a minimal interaction pattern where mouse events trigger a JavaScript callback, though no visual response to the mouse is implemented.

May 5, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and SVG. The face is built from three circles—two black eyes and one yellow head—positioned relative to the window’s center, with dimensions calculated from `window.innerWidth` and `window.innerHeight`. The code uses `ReactDOM.render` to mount the component, and the SVG’s `transform` attribute translates the group to the center. The smile is omitted, leaving only the head and eyes, while the stroke width and radii are defined as constant values.

May 4, 2022