J

Jonas Carvalho

@Jon83Carvalho·39 public vizzes

Loading thumbnail…

IternetIndex-GENDERGAP

This visualization plots Internet Gender Gap against Corruption Perception for various countries. Each circle’s position encodes corruption values via a radial scale, while its radius represents the gender gap, and its color maps to corruption perception using a custom ordinal color scale. Hovering reveals a tooltip with exact country details. The code uses D3.js scales and arrays for layout, with React managing state and SVG rendering from CSV data sources.

Loading thumbnail…

LoveWord

An animated scatter plot visualizes the relationship between corruption perception and internet gender gap across countries, with a dynamic circle layout that shifts positions over time. Each circle’s color encodes corruption perception and radius reflects the gender gap, while hover interactions reveal detailed country-specific values in a tooltip. The visualization updates every 100 milliseconds by fetching new data from a remote CSV file, combining React state management with D3.js (v6) scales and transitions to animate the SVG marks. The code uses D3’s `csv` loader and custom legends to interpret the streaming dataset.

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through different measurements of the Iris dataset, shifting the x-axis every three seconds among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Built with D3 v6, it uses a reusable chart pattern and selection.join to smoothly transition circles and axes over one-second durations. The SVG visualization grows circles on entry, staggers update delays, and renders axis labels in the Share Tech font.

Loading thumbnail…

Fork of SVG Animation Playground

This example demonstrates an SVG animation inspired by the opening crawl of Star Wars, featuring two rotating images and a spinning headline that fade in and out with a 3D perspective effect. The animation uses CSS keyframes defined in a separate stylesheet, with properties like `transform`, `opacity`, and `translateZ` to create scale, rotation, and depth transitions over a 10-second infinite loop. The scene is composed of inline SVG images loaded from external gist URLs, styled with the `Lato` font, and set against a fixed background image. The container uses `perspective` and `transform-style: preserve-3d` to enable the three-dimensional motion.

Loading thumbnail…

Interact Color Legend

This scatter plot of the Iris dataset uses D3 v6 within React to visualize the relationships between flower measurements, such as petal length and width. Users can select the X and Y axes from dropdown menus. The visualization features an interactive color legend for the three iris species; hovering over a legend item fades non-matching data points, highlighting the selected species.

Loading thumbnail…

Fork of Hello HTML teste

A single stylized cartoon face is rendered using React and D3. The face, composed of SVG circles, rectangles, and an arc for the mouth, is built from reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses D3's `arc` generator to create the mouth path and applies a linear gradient to the eyes and a specular lighting filter to the background, all within a 960 by 500 SVG canvas.

Loading thumbnail…

Polished Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, depicting measurements of sepal and petal dimensions for three flower species. Users can dynamically select which quantitative attribute to map to the x-axis and y-axis through dropdown menus, with points colored by species and a corresponding legend. The visualization is built using React with D3’s `scaleLinear`, `scaleOrdinal`, and `extent` functions to compute scales, while SVG components like `AxisBottom`, `AxisLeft`, and `Marks` render the axes, circles, and tooltips. Data is loaded asynchronously via `d3.csv` from a remote GitHub source.

Loading thumbnail…

WITH D3 ARC Actually Visualizing data D3 and react

This example shows a full-screen, circular visualization of named CSS colors loaded from a remote CSV file. The chart displays one pie slice per color, with each slice’s fill set to its corresponding hex value, creating a rainbow-like wheel. The code uses `d3.csv` to load data, `d3.pie` to compute slice angles, and `d3.arc` to generate SVG paths within a React component. Rendering is done via SVG elements, with React managing state and lifecycle through hooks like `useState` and `useEffect`.

Loading thumbnail…

coronavirus line

This line chart visualizes global COVID-19 deaths over time as a single increasing curve. The data comes from the CSSE at Johns Hopkins, aggregated from all countries on each date. Built with React and D3 v6, it uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and renders the line as an SVG path. The chart loads CSV data asynchronously via `d3.csv` and transforms it using `timeParse`.

Loading thumbnail…

Untitled

This example loads a COVID-19 deaths time series from a GitHub-hosted CSV file using d3.csv, then displays summary statistics (kilobytes, column count, row count) via a React component. It uses React's useState and useEffect hooks to fetch and manage the data asynchronously, and the d3.range method to iterate once. The visualization ultimately renders a single face-like SVG shape—composed of circles with randomized eye, mouth, and stroke parameters—centered on a 960×500 canvas. The d3.csvFormat API is used to calculate the data size in kilobytes.

Loading thumbnail…

parsing coronavirus

This example parses the CSS Named Colors CSV dataset and displays summary statistics in a large, plain-text format. It reports the file size in kilobytes, the number of data rows, and the number of columns. The visualization uses d3.csv to load and parse the remote CSV, then d3.csvFormat to calculate the data size, presenting the results via a simple DOM update. A commented-out alternative using fetch, async, and await with d3.csvParse demonstrates another parsing approach.

Loading thumbnail…

chorplotmap

This choropleth map visualizes the prevalence of HIV/AIDS among adults aged 15–49 by country for the year 2017. The color of each country reflects its value using a sequential yellow-orange-red color scale, with missing data shown in gray. The map is rendered with `d3.geoPath` and `geoNaturalEarth1` projection, while country boundaries and graticules come from a TopoJSON world atlas. React manages the component structure, and the data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

logscale

This scatter plot displays San Francisco temperature readings over a week, using a logarithmic y-axis (d3.scaleLog) to compress the range of temperature values. React components render the SVG, with d3.scaleTime mapping timestamps to the x-axis and d3.extent computing the domain. The visualization includes custom axes, radial gradient eyes, and a face-like background circle, while data loads from a CSV via d3.csv.

Loading thumbnail…

migrants on map

A choropleth-style map displays migrant deaths and missing persons, with circles sized by the count of dead and missing. A linked histogram below shows the same data over time, allowing users to brush a date range to filter the map. The visualization uses React with D3 v6, including `scaleSqrt` for circle sizing, `geoNaturalEarth1` and `geoPath` for the map projection, and `brushX` for the range selection. Data comes from a CSV of global missing migrants.

Loading thumbnail…

Migrants

This histogram shows the total number of dead and missing migrants over time, with monthly bins spanning the reported dates. The bar chart uses a time-scaled x-axis and a linear y-axis for death counts. Built with React and d3.v6, it loads CSV data, applies d3.bin for histogram generation, sums values per bin, and renders SVG rectangles with axes, tooltips, and labels via d3.scaleTime and d3.scaleLinear.

Loading thumbnail…

5.0 LSS Dashboard

This dashboard compares a control chart with a capability analysis histogram to assess process stability. The left panel displays a line chart of the selected phase, including the average and control limits, with special cause rules highlighting out-of-control points in red. The right panel shows a histogram with an overlaid normal distribution, depicting short-term (ST) and long-term (LT) process capability lines. Users adjust the mean and standard deviation via sliders, which recalculates the data. The visualization uses React for components and D3 (v6) for SVG, scales, axes, and rendering.

Loading thumbnail…

Point on a map

This example displays a natural Earth projection of the world map, with landmasses rendered in light blue and graticules in a darker blue, upon which cities are plotted as semi-transparent green circles sized by population using a square-root scale. The map is drawn with D3’s `geoPath`, `geoNaturalEarth1`, and `geoGraticule` projections, while city data is loaded from a CSV file and world topology from a JSON atlas. React manages the SVG rendering, updating the visualization once both datasets are fetched.

Loading thumbnail…

Menus React

The example shows a React component that renders a dropdown menu with three predefined options (Valor1, Valor2, Valor3), where the current selection is tracked in React state via the `useState` hook. It demonstrates how a controlled `select` element updates its displayed value and logs the selected value to the console. The `Dropdown` component receives options, an ID, a selected value, and a callback, using React 17 and D3 v6 loaded via CDN. The menu is styled with large font sizes for labels and selects, and the root element is rendered using `ReactDOM.render`.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements via dropdown menus that select the variables for the x and y axes. Built with React and D3 v6, the visualization uses SVG circles and linear scales to plot data points, with axis labeling and tick formatting provided by custom components. The code leverages D3's `scaleLinear` and `extent` for scaling and domain calculation, and CSV data loading through the `csv` function, all rendered within a React-based SVG framework.

Loading thumbnail…

react starter code

A concise React starter template demonstrates a minimal integration of React with D3. The app renders a single `div` element containing the text "Hi react" by mapping over an array generated with `d3.range`. React 17 and ReactDOM handle the component lifecycle, while D3 v6 provides utility functions. The code displays a static result without interaction, using `ReactDOM.render` to mount the component into the root element. It serves as a foundational example for combining React’s declarative UI with D3’s data manipulation capabilities.

Loading thumbnail…

World Map

This world map visualization displays the Earth’s landmasses and country interiors using a Natural Earth projection, rendered as SVG paths. It shows a sphere, graticule lines, land areas in blue, and interior boundaries in a lighter stroke. The code utilizes `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.geoGraticule` for the grid. Geographic data comes from the World Atlas TopoJSON (countries-50m.json), processed with `topojson.feature` and `topojson.mesh`. The visualization is built with React, managing data loading via the `useData` hook.

Loading thumbnail…

Line with time temperature

This example displays a line chart of temperature over time, using a smooth natural curve to connect weekly data points. The chart includes labeled axes for time and temperature, with a clean SVG rendering that emphasizes the trend. It uses React to structure the visualization and D3 v6 functions like `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` for data mapping and path generation. Data comes from a CSV file of San Francisco weekly temperatures, loaded with `d3.csv`.

Loading thumbnail…

Working with time temperature

This visualization displays temperature readings over time as a scatter plot, with time on the x-axis and temperature on the y-axis. The React-based chart uses D3’s `scaleTime` and `scaleLinear` to map the data, and renders SVG circles for each observation. Data comes from a CSV file loaded via `d3.csv`.

Loading thumbnail…

A Scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each point represents an individual flower, with a tooltip displaying the exact petal length value. The visualization uses React to render SVG elements, with d3.scaleLinear for both axes and d3.extent to set the domains. Axes are generated with custom tick components, and the chart includes labeled axis titles with rotated y-axis text. The data is loaded asynchronously from a CSV file using d3.csv.

Loading thumbnail…

Stulized Axis react and D3 The margin convention ActualBarchar d# react

This example shows a horizontal bar chart of the top ten countries by 2020 population, using the D3 margin convention to position axes and a styled SVG rendering with a yellow face motif. D3’s `scaleBand` and `scaleLinear` map country names to bar positions and population values to bar widths, while the React components `AxisBottom` and `AxisLeft` generate tick marks and labels. Data is loaded via `d3.csv` from a GitHub gist, sorted descending, and formatted with `d3.format` to display values in billions.

Loading thumbnail…

Axis react and D3 The margin convention ActualBarchar d# react

This example shows a horizontal bar chart ranking the top 10 countries by 2020 population, rendered as an SVG using React components and D3 scales. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with custom `AxisBottom` and `AxisLeft` components that generate ticks and labels. Data is loaded asynchronously via `d3.csv` from a gist, sorted in descending order, then sliced to the top 10. Bars are drawn as `rect` elements in the `Marks` component using the computed scales.

Loading thumbnail…

Loading data with react and d3

This example shows a stylized face built from SVG shapes, with a loading message that reports the size, column count, and row count of a remote CSV dataset. The face includes gradient-filled eyes, an arc-based mouth, and a specular lighting filter, all rendered through React components. Data is fetched asynchronously using `d3.csv` inside a `useEffect` hook, and the loading summary is computed with `d3.csvFormat` and displayed in a `<pre>` element. The visualization demonstrates integrating D3’s data-loading and formatting utilities with React state and SVG rendering.

Loading thumbnail…

The margin convention ActualBarchar d# react

A horizontal bar chart displays the top ten countries by 2020 population, loaded from a CSV file using d3.csv and sorted descending. The React-based example uses d3.scaleBand and d3.scaleLinear to position bars within a margin convention, with the chart rendered as SVG rectangles. The visualization demonstrates loading external data with React hooks (useState, useEffect) and reusing legacy face-drawing components (BackgroundCircle, Eyes, PieArc) that showcase D3 shape generators like d3.arc and SVG gradients.

Loading thumbnail…

ActualBarchar d# react

This example shows a bar chart of the top 10 countries by 2020 population, with each bar rendered as an SVG `<rect>` element. The bar lengths are scaled using `d3.scaleLinear`, while the country names are positioned along the y-axis using `d3.scaleBand`. Data is loaded via `d3.csv` from a remote gist and sorted in descending order. The visualization is built with React components, using React hooks like `useState` and `useEffect` to manage the asynchronous data loading and state. Additional unused face and pie chart components are also included in the project.

Loading thumbnail…

Barchart D3-React

This bar chart displays country populations, sorted in descending order with a truncated y-axis to emphasize differences. It is built with React and uses the vega-lite-api to construct the visualization, while D3’s `csv` function loads the data from a remote GitHub gist. The chart renders as an SVG, with tooltips provided by the vega-tooltip handler, and includes custom font sizes and colors for readability.

Loading thumbnail…

Actually Visualizing data D3 and react

A React application maps CSV color data to horizontal bars while displaying a reusable SVG face composed of components for background, eyes, and mouth. The face uses D3’s `arc` generator for the mouth path and SVG linear gradients for the eyes. Data loads asynchronously via `d3.csv` from a GitHub gist, with each row rendered as a colored div sized by the CSV’s hex values. The visualization demonstrates combining D3’s data utilities with React’s component model, though only the loading state and bar rendering are visible in the provided code.

Loading thumbnail…

satacke BarChart -barchart Vega-Lite API Template

This example uses the Vega-Lite API to create a stacked bar chart representing the population of the top five religions by country. It shows the distribution of adherents across nations, with country on the x-axis and religion on the y-axis, while circle size encodes population magnitude. The visualization is rendered as SVG via Vega and Vega-Lite, with data loaded asynchronously from a CSV file using d3.csv. Custom configuration and tooltips are applied to enhance readability, and the chart automatically fits the window dimensions.

Loading thumbnail…

countries -barchart Vega-Lite API Template

This example presents a bar chart of country populations from a 2015 CSV dataset. The visualization uses the Vega-Lite API to define a bar mark with country names on the x-axis sorted by descending population, and a quantitative population scale on the y-axis with a zero baseline disabled. The chart is rendered as an SVG via vega-lite-api, with the view dimensions set to fill the window and custom axis and label styling applied from a config object. Tooltips display country names on hover.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a week of temperature data from San Francisco using an area mark, with time on the x-axis and temperature on the y-axis. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `d3.csv` to load data from a remote gist. The chart auto-sizes to the full window and applies a custom configuration for axis and label styling, with a tooltip handler from Vega-Tooltip.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from an auto-mpg dataset, plotting horsepower against origin of manufacture. Each car is represented as a semi-transparent circular mark, with tooltips revealing the vehicle’s name on hover. Built with the Vega-Lite API, the example uses `vl.markCircle`, `vl.x().fieldN()`, and `vl.y().fieldQ()` to encode categorical and quantitative fields. The code registers Vega and Vega-Lite with `vl.register`, loads CSV data via `d3.csv`, and applies a custom config to adjust axis and label appearance.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization presents CSS named colors as a radial burst, with each color represented by a wedge-shaped slice emanating from the center of an SVG canvas. The code loads color data from a CSV file using D3’s `csv` utility, then employs React’s `useState` and `useEffect` hooks to manage the asynchronous data fetching. D3’s `pie` and `arc` functions compute the angles and paths for each slice, while React renders the resulting `<path>` elements with the appropriate fill colors. The example demonstrates a hybrid approach where D3 handles data parsing and geometry calculations, and React manages the component lifecycle and DOM rendering.

Loading thumbnail…

Mouse-follower

A cartoon face rendered in SVG follows the mouse cursor across the screen, with its yellow circular head repositioning to track pointer movement. Built with React and D3 v6, the face uses reusable components for the background circle, gradient-filled eyes, and an arc-based mouth. The `Face` component manages mouse position via React state and updates the circle's coordinates through `onMouseMove` events, while `range(1)` from D3 generates a single face instance.

Loading thumbnail…

Load data

This example demonstrates how to load and summarize a remote CSV file. It displays the file size in kilobytes, the number of columns, and the number of rows in large text. The page uses the `d3.csv` function to fetch and parse the named CSS colors dataset from a GitHub gist, then `d3.csvFormat` to compute its size. The asynchronous `fetch` API retrieves the raw text before D3 processes it.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the parsing of a CSV file containing CSS named colors, displaying the file size in kilobytes, row count, and column count. It uses D3 version 5’s `d3.csv` method to fetch and parse the remote data asynchronously. The code also includes commented-out alternatives using `fetch` with async/await and a nested promise approach. The parsed information is rendered in a large `<pre>` element using JavaScript.