brunotrindademachado

@brunotrindademachado·4 public vizzes

Fork of HTML Starter

This example shows a simple bar chart rendered as SVG rectangles, with bar widths and colors mapped linearly to the values in a three-element data array. It uses D3 v3’s selection and data binding to append the rectangles, then applies `d3.scale.linear` for both width and color scales (mapping 0–80 to pixel widths and red-to-blue fills). Animated via `transition()` on the width attribute. The rendering relies on D3’s SVG manipulation with no external data source beyond the hardcoded JavaScript array.

Aug 19, 2023

Loading thumbnail…

Fork of React & D3 Starter

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. It uses React for component management and D3 v7 for rendering an SVG with circles and axes. The implementation decouples React and D3, using a custom `useData` hook to fetch CSV data and a `VizWrapper` to orchestrate the D3 visualization.

Aug 19, 2023

Loading thumbnail…

React & D3 Scatter Plot

This React & D3 scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length. Each circle represents a flower sample, with the visualization built using an SVG rendering approach. The code demonstrates a decoupled architecture where React manages the component lifecycle and D3 handles the rendering logic. It uses `d3.scaleLinear` for coordinate mapping, `d3.extent` for domain calculation, and `d3.axisLeft`/`d3.axisBottom` for chart axes, all within a modular structure that scales well for complex projects.

Aug 19, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes rendered directly in a bare HTML page, including two circles, a rectangle with a blue stroke, and a red fill. The code uses inline SVG markup within the HTML document, with CSS and JavaScript referenced for additional interactivity. It shows basic shape properties such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, `fill`, and `stroke-width`. The visualization serves as a minimal starter for understanding SVG fundamentals without external libraries.

Aug 19, 2023