Rodrigo Zanco

@rmzanco·14 public vizzes

Grafico de pontos

This scatterplot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The React application loads CSV data via the `csv` function from D3 v5 and renders SVG circles using reusable axis and mark components. Linear scales map data values to pixel coordinates, with margins defining the chart’s inner dimensions. Axes are generated from scale ticks, while tooltips appear via SVG `<title>` elements. The visualization uses d3.scaleLinear, d3.extent, and d3.format for tick formatting.

Nov 15, 2021

Loading thumbnail…

Grafico de barras Estilizado

A horizontally oriented bar chart ranks ten countries by 2020 population, using a teal fill and a clean Roboto typeface. The React application, built with D3 v5, loads CSV data via `d3.csv` and renders SVG elements through scaleBand and scaleLinear for the axes. Styled ticks and a formatted axis label display values in billions, while each bar includes a native SVG tooltip. The code is refactored into separate AxisBottom, AxisLeft, and Marks components for clarity.

Nov 7, 2021

Loading thumbnail…

DataViz training

A static smiley face rendered as SVG components shows a red circle with eyes, a nose, and an arched mouth. The React code composes reusable elements like `BackgroundCircle`, `Eyes`, `Mouth`, and `Nose` inside a `FaceContainer` that centers the SVG group. D3’s `arc` API generates the mouth path, while other shapes use plain SVG circles. No data is loaded; the face’s dimensions and positions are fixed through React props passed from the main `App` component.

Aug 21, 2021

Loading thumbnail…

Grafico de barras Refatorado

This horizontal bar chart displays the population estimates for the top ten countries in 2020, with country names on the y-axis and population values on the x-axis. Built with React and rendered as SVG, the chart uses D3 v5 functions like `scaleBand` for the discrete y-axis and `scaleLinear` for the continuous x-axis. The component extracts reusable `AxisBottom`, `AxisLeft`, and `Marks` modules, loading data from a CSV file via `d3.csv`.

Jun 10, 2021

Loading thumbnail…

Grafico de barras com eixos (axis)

This example shows a horizontal bar chart of the top ten countries by estimated 2020 population, with labeled x- and y-axes rendered as SVG elements. The React app loads the UN population dataset via `d3.csv`, then uses `scaleBand` for country categories and `scaleLinear` for population values. Axes are manually drawn by mapping `xScale.ticks()` to grid lines and labels, while country names are positioned against the band scale. The bars themselves are simple `rect` elements whose width derives from the linear scale.

Jun 10, 2021

Loading thumbnail…

Grafico de barras com Margin Convention

This example shows a horizontal bar chart of the top ten countries by 2020 population, using a margin convention to position the visualization within an SVG. The React component fetches CSV data from a GitHub gist and renders bars with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It applies `d3.csv` for parsing, `max` for domain calculation, and a translated `<g>` group to offset the chart by the specified margins. The chart displays population values as bar widths, with a simple loading state before data arrives.

Jun 7, 2021

Loading thumbnail…

Renderizando dados com CSV, React & D3

This example renders the ten most populous countries from a UN population CSV dataset as horizontal bars in an SVG. It uses React hooks (useState, useEffect) to fetch and transform the data, then maps it to rectangles styled with d3.scaleBand and d3.scaleLinear for positioning and width. The visualization demonstrates a simple bar chart without axes or labels, relying on d3.csv for data loading and d3.max for domain calculation.

May 30, 2021

Loading thumbnail…

Renderizando dados com React & D3

This example renders a radial burst visualization of CSS named colors using React and D3. It loads color data from a CSV file via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute and draw pie-slice paths as SVG elements, with each slice filled by its corresponding hex value. The visualization is centered and fills the viewport, with React managing state and rendering the SVG output.

May 17, 2021

Loading thumbnail…

Renderizando dados com React

This example renders a horizontal striped visualization from a CSS named colors dataset. It uses React to map each row of the CSV data to a `<div>` element whose background color corresponds to the color’s RGB hex value, creating a stacked color bar. The code loads data via `d3.csv`, manages state with React’s `useState` and `useEffect` hooks, and renders the stripes using inline styles rather than SVG. The chart displays 960-pixel-wide stripes, each 4 pixels tall, producing a compact color spectrum.

May 17, 2021

Loading thumbnail…

Template do Vega-Lite API

This example displays a scatter plot of automobile acceleration versus horsepower, with tooltips showing the car name. It uses the Vega-Lite API in JavaScript to define the visualization declaratively, while handling data loading and rendering through D3’s `csv` method and Vega’s runtime. The code retrieves the auto-mpg dataset from a GitHub gist and applies custom axis and label styling via a configuration object. The SVG output is rendered full-window with a tooltip handler from the vega-tooltip library.

May 11, 2021

Loading thumbnail…

Alimentando dados com React & D3

This example demonstrates how to feed data into a React component using D3 utilities, displaying a summary message about the loaded dataset. It loads a CSV file of CSS named colors from a GitHub gist, then uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously. The `d3.csv` function parses the remote file, and the `message` function computes file size, row count, and column count using `d3.csvFormat`. The result is rendered as plain text in a `<pre>` element via ReactDOM.

May 6, 2021

Loading thumbnail…

Carregar dados em CSV

This example demonstrates how to load and summarize a remote CSV file using D3’s `d3.csv` parsing method, displaying the file size, row count, and column count in a large text block. The data comes from a GitHub-hosted CSS named colors dataset. The code calls `d3.csv(url).then(...)`, formats the raw text with `d3.csvFormat(data)` to compute its kilobyte size, and reports the number of rows and columns from the parsed array. A commented alternative shows the equivalent approach using the Fetch API with `d3.csvParse`.

May 4, 2021

Loading thumbnail…

Mouse Follower

A single circle follows the mouse cursor within an SVG canvas. The example demonstrates the basic concept of tracking pointer movement and updating a visual element's position in response. It is built with React hooks, specifically `useState` to manage the circle's coordinates and `useCallback` to handle the `onMouseMove` event, rendering the circle with SVG attributes `cx` and `cy`. The scene is initialized with the circle centered, and no external data source is used.

May 4, 2021

Loading thumbnail…

Protótipo 2 | c3 + pureJS

This example demonstrates a C3.js chart rendered alongside a second chart generated through a React component. The first chart displays two static data series, while the second chart, created via the `GerarChart` function, shows a different set of values. The code integrates C3.js with React 17, using the `c3.generate` API to create both visualizations. A file input and button are present, though their functionality is not fully wired to the charts.

Apr 28, 2021