Alan Santos

Gráfico Voronoi com Rótulos- Mortes Covid19 no Mundo

This interactive line chart visualizes global COVID-19 death counts over time, with each country represented as a gray line on a logarithmic scale. Hovering over any point highlights the full trajectory for that country and displays a tooltip with the country name, death total, and date. Built with React and D3 v5, the visualization uses `d3.Delaunay` and `d3.voronoi` to create an invisible overlay that captures mouse events for precise point selection. Data comes from the CSSE COVID-19 time series CSV, rendered as SVG paths with axes labeled in Portuguese.

Jun 14, 2022

Gráfico Voronoi- Mortes Covid19 no Mundo

This chart shows the global progression of COVID-19 deaths over time, with each country represented by a line on a logarithmic scale. A Voronoi overlay enables interactive highlighting: hovering near any data point activates and emphasizes the corresponding country’s full trajectory. The visualization is built with React and D3 v5, using `d3.Delaunay` and `d3.voronoi` for the hover detection, and renders as SVG with data from the CSSE COVID-19 time series dataset.

Jun 14, 2022

Rótulos na Visualização do Gráfico- Mortes Covid19 no Mundo

This example shows the global cumulative death toll from COVID-19 over time, using a logarithmic scale for the y-axis. The chart, built with React and D3 v5, features a black line path, gridlines via tick marks, and Portuguese labels for the title, axis names, and a marker line. Data is loaded from the CSSEGISandData COVID-19 GitHub repository and rendered as SVG, with `scaleTime`, `scaleLog`, and `axisBottom`/`axisLeft` from D3 controlling the layout and axes.

Visualização do Gráfico Log Linear color por países- Mortes Covid19 no Mundo

This example visualizes global COVID-19 death totals over time, with each country represented by a distinct colored line on a log-linear scale to compare growth rates across nations. The chart uses a React component with D3 v5 scales including `scaleTime` and `scaleLog`, and renders paths via the `d3.line` generator into SVG. The y-axis uses `axisLeft` with a custom tick format, while grid lines are drawn through tick size settings. Data comes from the CSSE COVID-19 time series CSV, filtered to country-level rows and transformed into per-day death totals.

Gráfico Log Scale - Mortes Covid19 no Mundo

This example shows the global cumulative death toll from COVID-19 over time using a logarithmic scale on the y-axis. The line chart displays the rapid growth of deaths, with a marker line highlighting the point where total deaths reached six million. Built with React and D3 v5, the visualization loads data from a CSV file and uses `scaleLog` for the y-axis and `scaleTime` for the x-axis, rendering the result as an SVG path.

Gráfico Linear de Mortes por Covid19 no Mundo

This chart displays the cumulative global count of COVID-19 deaths over time as a single black line, with a marker line highlighting the point where deaths reach 6,000,000. It uses React with d3.scaleTime, d3.scaleLinear, and d3.line to generate an SVG path from a CSV dataset sourced via d3.csv from Johns Hopkins’ COVID-19 time series. Axis components employ d3.axisBottom and d3.axisLeft, with a line generator mapping dates to x-positions and death totals to y-positions.

Gráfico Linear de Mortes Mundial por Covid19

This chart displays the global cumulative death toll from COVID-19 over time, using a simple line plot. It visualizes data from the CSSE COVID-19 time series dataset, showing the total deaths worldwide as a single line across the pandemic timeline. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, and a D3 line generator for the path. It includes horizontal and vertical marker lines at the 6 million death threshold and the most recent date, with axis labels formatted via `timeFormat`. The chart renders as an SVG, filling the browser window.

Jun 11, 2022

Gráfico Linear Covid19

This line chart visualizes the cumulative global death toll from COVID-19 over time, using data from the CSSE COVID-19 time series. The React component renders an SVG path with d3.line, scaling dates with d3.scaleTime and death totals with d3.scaleLinear. The code fetches CSV data via d3.csv, parses dates with timeParse, and sums daily deaths across all countries in useData.js. The chart fills the browser window with a black stroke on the path.

Jun 11, 2022

Carregando dados com React e D3

This example demonstrates the amount of data contained in a CSV file by displaying its size in kilobytes, line count, and column count. It loads data from a remote URL hosted on GitHub Gists using the `d3.csv` and `d3.csvFormat` APIs, while React 18 manages the asynchronous state. The component initially shows a loading message before rendering the computed statistics, with a deliberate delay between fetches to avoid an infinite loop. The presentation uses a large monospace `<pre>` element with minimal styling.

Jun 10, 2022

Mapa-Mundi Cloroplético HIV/Aids

This choropleth map displays the global prevalence of HIV/AIDS among adults aged 15-49 for the year 2019, using a yellow-orange-red sequential color scale to indicate infection rates. Countries without data render in gray. The visualization is built with React and D3 v7, using `geoNaturalEarth1` projection, `geoPath` for country boundaries, and `geoGraticule` for the map grid. Data is loaded from a CSV file containing prevalence statistics, matched to country codes via an ISO-3166 dataset.

Jun 10, 2022

Migrações no Mapa - Mundi

A choropleth-style world map visualizing migration-related fatalities and disappearances, with semi-transparent bubbles scaled by the square root of the total deaths per location. The visualization uses `d3.geoNaturalEarth1` projection, `d3.geoPath`, and `d3.geoGraticule` to render landmasses, interiors, and graticules in SVG. Data from a CSV file is mapped to coordinates and sizes via `d3.scaleSqrt`. The React-based implementation leverages D3 v7 and TopoJSON for geographic boundaries, with the dataset drawn from a GitHub gist on migration casualties.

Jun 10, 2022

Gráfico de dispersão Com Escala de Log / Migração

This scatter plot visualizes migration-related fatalities over time, using a logarithmic scale for the y-axis to accommodate the wide range in the reported death counts. The x-axis represents the report date, rendered as a time scale. Built with React and D3.v7, the visualization uses SVG elements, with separate components managing the axes and marks. Data is loaded from a CSV file using D3's `csv` function, and axes are generated via `scaleTime` and `scaleLog`.

Jun 9, 2022

Performando o Mapa Multi View Migrantes Desaparecidos

This visualization presents a multi-view dashboard tracking missing migrants, combining a geographic bubble map with a time-series histogram. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with circle radii scaled by the total number of dead and missing using `d3.scaleSqrt`. The histogram below aggregates the same metric monthly, with `d3.bin` and `d3.timeMonths`, and supports brushing via `d3.brushX` to filter the map’s data by date range. Built with React and D3 v5, it renders SVG fed by CSV and TopoJSON data.

Jun 9, 2022

Pintando no Mapa Multi View Migrantes Desaparecidos

This interactive visualization combines a natural Earth bubble map with a brushed date histogram to explore reports of missing migrants. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses and graticules, with circle radii scaled by the square root of the total dead or missing count. The histogram aggregates monthly totals using `d3.bin` and `d3.timeMonths`, while a `brushX` brush filters the map’s data by date range. Both views are built with React and SVG, reading from a CSV of migrant disappearance reports.

Jun 9, 2022

Migrantes Desaparecidos Mapa Multi View

A multi-view visualization maps the deaths and disappearances of migrants worldwide, using a bubble map over a Natural Earth projection to show spatial distribution and a time-series histogram to show monthly totals. The map uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic rendering, with circle radii scaled by `d3.scaleSqrt`. The histogram uses `d3.bin` with `d3.timeMonths` thresholds and `d3.scaleTime`/`d3.scaleLinear` for axes. Data comes from a CSV of migrant incident reports, rendered as SVG via React.

Histogram de Migração

This histogram visualizes the total number of dead and disappeared migrants over time, using a time-based x-axis and a count-based y-axis. The code loads CSV data from a GitHub gist, bins the data by month using `d3.bin` with `timeMonths` thresholds, and sums the casualties per bin. React components render SVG axes and rect marks for each bin, with tooltips showing values via `<title>` elements. D3's `scaleTime` and `scaleLinear` handle scaling, while `csv` fetches and parses the dataset.

Menu com React

This example demonstrates a simple interactive dropdown menu for selecting a pet. The interface displays a label and a dropdown list containing six animal options, with the initial value set to "hamster." As the user changes the selection, the current value is logged to the console. Built with React, the application uses the `useState` hook to manage the selected value and a custom `Dropdown` component to render the HTML select element, leveraging React DOM for rendering.

Maiores Populações no Mapa - Mundi

A world map uses sized circles to show the most populous cities globally. The visualization projects geographic coordinates with `geoNaturalEarth1` and `geoPath`, rendering land masses, graticules, and country borders from a TopoJSON world atlas. City populations are encoded by circle radius using a square-root scale (`scaleSqrt`) to vary size proportionally. The data comes from a CSV of cities with latitude, longitude, and population values, rendered as SVG circles with opacity.

Pontos no Mapa - Mundi

This visualization displays world cities as semi-transparent points overlaid on a natural Earth projection map, with country borders and graticules drawn as subtle lines. The map also includes a highlighted sphere outline and landmasses in light gray. The example uses React to manage state and rendering, with D3 v7 functions `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project geographic coordinates. City latitudes and longitudes come from a CSV file loaded via D3's `csv` method, while world topography is fetched from the world-atlas TopoJSON file.

Legenda no Gráfico de Dispersão (scatter plot)

This scatter plot shows the Iris flower dataset, mapping petal length on the x-axis and sepal width on the y-axis, with each point colored by species. A color legend to the right lists the three species; hovering over a legend item fades all other points to 20% opacity while keeping the selected species fully visible. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles. Data is loaded via `d3.csv` from a gist containing United Nations population projections, rendered with custom axis components.

Add Cores no Gráfico de Dispersão (scatter plot)

This interactive scatter plot displays the Iris flower dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as categorical color. Built with React and D3 v7, it uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for color encoding, rendering SVG circles with tooltips. The data is loaded via `d3.csv` from a GitHub gist, and the chart includes labeled axes and tick marks generated by custom React components.

Estilizando Menus do Gráfico de Dispersão (scatter plot)

An interactive scatter plot shows how the Iris dataset's sepal and petal measurements vary. Users select which attributes map to the x- and y-axes via dropdown menus, re-rendering the D3 v7 SVG chart with new axes and marks. The code uses `csv` from D3 to load the data, `scaleLinear` for axes, and React components—`AxisBottom`, `AxisLeft`, and `Marks`—to build the visualization. Dropdown options come from the `react-dropdown-browser` library, and the tooltip uses a `.title` element. Data is sourced from a GitHub-hosted CSV of Fisher's Iris flower measurements.

Gráfico de Dispersão (scatter plot) com Menus

This interactive scatter plot uses React and D3 v7 to visualize the Iris flower dataset, with dropdown menus for selecting which numeric attributes (sepal length, sepal width, petal length, or petal width) map to the x- and y-axes. The code scales the data with `d3.scaleLinear` and `d3.extent`, renders axes as SVG groups, and draws circle marks with native `<title>` tooltips. The data loads from a CSV via `d3.csv` and the view updates reactively through `useState` and component re-rendering.

Jun 6, 2022

Mapa - Mundi

This example displays a natural Earth projection of the world, rendered with D3's `geoNaturalEarth1` projection and `geoPath` for landmasses, graticules, and interior borders. It shows the globe as a sphere with distinct styling for land, ocean, and graticules in a React application. The map is built from the World Atlas TopoJSON source, with land features and a mesh of country interiors generated via the TopoJSON library's `feature` and `mesh` functions, all presented as SVG paths.

Jun 6, 2022

Estilizando Gráfico Linha

This example displays a line chart of daily temperatures for a week in March, using a natural cubic spline to smooth the data points. The visualization is built with React and renders to an SVG, using D3 v7 APIs such as `scaleTime`, `scaleLinear`, and `curveNatural` for the path. Axis ticks and labels are explicitly generated, with the temperature data sourced from a CSV file hosted on GitHub.

Trabalhando com Tempo

A scatterplot displays daily temperature observations over time, with each circle marking a day's reading along a time-based x-axis and temperature-based y-axis. The visualization uses D3 v7’s scaleTime and scaleLinear for axes, with React components managing the SVG rendering. Data comes from a CSV file loaded via d3.csv, and hover tooltips reveal the exact date and temperature value for each point.

Gráfico de Dispersão (scatter plot)

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and sepal width, with each point as a circle. Built with React and D3 v7, it uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.csv` to load data from a GitHub gist. SVG circles are rendered via React components, with axis labels and tick marks generated manually. The plot includes interactive elements like a tooltip title on hover, and data is formatted using `d3.format`.

Gráfico das 10 Maiores Populações

This bar chart visualizes the ten most populous countries using data from the UN’s 2019 World Population Prospects. It displays each nation’s estimated population along a horizontal axis, with country names on a vertical band scale. The visualization uses React components with D3’s `scaleBand`, `scaleLinear`, and `max` to compute layout, rendering SVG rectangles as marks. Interactive tooltips appear via SVG `<title>` elements, while axis ticks are formatted with `d3.format`.

Refatorar População Bar Chart

This example shows a horizontal bar chart of the ten most populous countries in 2020, using data from the United Nations’ 2019 population prospects. The chart is built with React and rendered as SVG, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Custom React components draw the axes and marks, with d3.csv loading the data from a gist.

População Bar Chart 02

This example displays a horizontal bar chart of the ten most populous countries in 2019, based on United Nations population data loaded from a CSV file. It initially renders a loading state while fetching data, then uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to positions and bar widths. The React component manages state and renders SVG elements, including grid lines and axis labels, with D3 v7 functions like `max` and `ticks` to compute scales and tick values. The chart updates directly from the fetched dataset, showing population counts along the horizontal axis.

População Bar Chart 01

This example displays the ten most populous countries as horizontal bars, with bar width proportional to each country’s 2020 population estimate. The chart uses React state to load and parse the CSV data, then renders SVG rectangles with D3’s `scaleBand` and `scaleLinear` for positioning and scaling. The data originates from the United Nations 2019 population perspective.

Renderizando dados com React e D3

A pie chart renders the full set of named CSS colors from a CSV file, with each slice filled by its corresponding hex value. Built with React and D3 v7, the example loads the data via `d3.csv` into React state, then uses `d3.pie` and `d3.arc` to generate SVG paths. The visualization displays all colors in a single circle, demonstrating how React manages data flow while D3 handles geometric computations for the radial layout.

Template Vega-Lite Api

This example demonstrates a scatter plot of automobile data, mapping miles per gallon, horsepower, weight, and origin using the Vega-Lite API. It shows how to declaratively build interactive visualizations with circle marks, color encoding, and tooltips. The code registers Vega, Vega-Lite, and vega-tooltip via `vl.register`, loads CSV data from a gist using d3.csv, and renders to an SVG view that fits the window. Appearance is customized with a configuration object, and the visualization auto-sizes with padding.

Jun 1, 2022

MouseMoveEvent

A smiley face circle follows the mouse cursor across an SVG canvas, updating its position in real time as the user moves the pointer. The React component tracks mouse coordinates through an `onMouseMove` event handler, storing them in state via `React.useState` and updating the circle's `cx` and `cy` attributes. The visualization uses React 18, D3 v7 for the SVG rendering, and demonstrates simple interactive event handling without any external data source.

Jun 1, 2022