L

Leandro Da Souza

@Leandro-Da-Souza·17 public vizzes

Loading thumbnail…

world map

This example displays a world map using a Natural Earth projection, showing graticule lines, landmasses, and interior boundaries. The visualization loads country topology data from the world-atlas package via a JSON URL, then processes it with topojson’s `feature` and `mesh` functions. D3’s `geoNaturalEarth1` projection and `geoPath` render the map as SVG paths, with separate classes for the sphere, graticule, land, and interior shapes, styled via CSS. The React component uses a custom `useData` hook to fetch and transform the data asynchronously.

Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature variations, plotting timestamps on the x-axis and measured temperature on the y-axis. The React app uses the `useData` hook to fetch a CSV file from a GitHub gist, then renders the data with SVG elements. The implementation leverages d3's `scaleTime`, `scaleLinear`, and `line` curve functions to construct the axes and path, with `curveNatural` smoothing the line. Circles mark each data point, and tooltips display the date and temperature values.

Loading thumbnail…

Curran's Stylized Scatter Plot

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and sepal width for individual specimens. The visualization is rendered as an SVG using React components, with D3 v5 handling the data loading, linear scaling, and axis generation. Despite being styled with a clean, modern aesthetic using the Poppins font, the chart incorporates interactivity through native SVG tooltips that display the coordinates of each data point. The axis tick labels are formatted using D3’s `format` function for readability, creating a polished yet functional presentation of the classic multivariate dataset.

Loading thumbnail…

Stylized United Nations Bar Chart

This stylized bar chart displays the population of the top 10 United Nations member states in 2019, using data from a CSV file with 2020 population estimates. The React application uses D3 v6's `scaleBand` and `scaleLinear` to map countries and population values, rendering horizontal bars as SVG rectangles. The code imports `csv` from D3 to fetch the data, applies a custom tick format that converts population values from scientific notation to billions, and includes interactive tooltips via SVG `<title>` elements.

Loading thumbnail…

Fork of Margins And Axis United Nations Bar Char REFACTORED

This example uses a bar chart to visualize the top 10 countries by population from a 2019 United Nations dataset. The code loads the data with `d3.csv` and renders the bars as SVG `rect` elements within a React application, using `d3.scaleBand` and `d3.scaleLinear` for scaling. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the axes and chart marks, with margins creating space for the categorical y-axis labels.

Loading thumbnail…

Margins And Axis United Nations Bar Char

This example visualizes the top 10 most populous countries in 2019 using a horizontal bar chart, rendered as an SVG via React components. The chart encodes population values with bar widths and country names along the y-axis, employing D3’s `scaleBand` and `scaleLinear` for positioning. The code fetches data from a CSV using `d3.csv`, then maps it to React elements, with margins applied through a translated `<g>` group. D3’s `xScale.ticks()` generates grid lines and tick labels for the x-axis, while y-axis labels are manually positioned.

Loading thumbnail…

United Nations Bar Chart With React AND D3

This example displays the top 10 countries by United Nations population estimates for 2020 as horizontal bars, using React to render SVG rectangles and D3 scales for layout. It loads data from a CSV file via `d3.csv`, parses the population column, and maps countries to a `scaleBand` y-axis and populations to a `scaleLinear` x-axis. React’s `useState` and `useEffect` manage the asynchronous data fetching, while `ReactDOM.render` mounts the visualization. The chart updates when data arrives, though it does not include axes or labels.

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays a bar chart of the 10 most populous countries, with each bar’s length proportional to its 2020 population estimate from the United Nations World Population Prospects 2019 dataset. Rendering as SVG via React, the code uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. It loads CSV data with `d3.csv`, parses the population column, and maps each country to a `<rect>` element, notably omitting any axes or labels.

Loading thumbnail…

Vizualizing Data With React AND D3

This example displays a full-spectrum color wheel built from CSS named colors, with each color represented as a slice of a pie chart. It uses React hooks (`useState`, `useEffect`) to load CSV data via `d3.csv` and renders SVG `<path>` elements generated with `d3.arc`. The visualization maps each color’s hex value to the fill of its corresponding arc, creating a circular organized palette.

Loading thumbnail…

Vizualizing Data With React

This example displays all 148 named CSS colors as a vertical strip of horizontal lines, one per color, ordered as they appear in a CSV file loaded from a GitHub gist. Using React with ReactDOM, the app fetches the CSV via D3 v6’s `d3.csv`, stores the parsed rows in state with a `useState` hook, and renders each color’s hex value as a div’s `backgroundColor`. The lines span the full window width at four pixels tall, creating a simple color spectrum visualization that updates after the asynchronous data load completes.

Loading thumbnail…

STACKED BAR CHART BEBE

This stacked bar chart visualizes the distribution of religious affiliations across countries, with bar length representing population and color encoding religion. The visualization uses d3 v5's CSV loader to fetch data from the UCI Machine Learning Repository via a Gist, then renders the chart through the Vega-Lite API, which translates specifications into executable Vega views. The chart sorts countries by total population and includes tooltips that display population values on hover, while a custom config adjusts axis labels and font styling for improved readability.

Loading thumbnail…

NEW CHART BEBE

A bar chart displays population figures for countries, sorted by value, with a tooltip revealing each country’s exact population on hover. The visualization uses Vega-Lite 4 and the vega-lite-api to define the bar marks and encoding, while D3’s `csv` loader fetches data from a 2015 country population CSV hosted in a GitHub Gist. Custom axis and label styling via a config object improves readability against a dark theme.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a line chart of daily temperature readings from San Francisco over a week. The visualization is built by combining the Vega-Lite API and D3, with `vl.markLine` defining the encoding and `getData` fetching the CSV from a GitHub gist. The chart uses `vega`, `vega-lite`, and `vega-lite-api` to render an interactive SVG, includes a custom dark-themed config, and enables tooltips via `vega-tooltip`.

Loading thumbnail…

CSV Data With React

A D3.js and React visualization demonstrates how to load and summarize a CSV file of CSS named colors. The example fetches remote CSV data using `d3.csv` and then displays a text summary of the dataset. The React app uses the `useState` and `useEffect` hooks to manage asynchronous data loading and rendering. The summary, produced by a custom `message` function, reports the data size in kilobytes via `d3.csvFormat`, the row count, and the column count. The example illustrates a minimal integration of D3's data processing capabilities with React's component-based UI.

Loading thumbnail…

Loading And Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js version 6. It displays the file size in kilobytes, the number of rows, and the number of columns in the parsed dataset. The code uses `d3.csv()` to fetch and parse the CSV, `d3.csvFormat()` to calculate the data size, and the promise-based `.then()` method to process the result. The output is rendered as plain text in a large font within an HTML pre-element. The data comes from a GitHub Gist containing CSS named colors.

Loading thumbnail…

Mouse Follower

A full-screen SVG circle follows the user's mouse in real time, updating its center position with every pointer movement. The example shows React state management driving SVG rendering, where the circle's `cx` and `cy` attributes are bound to the current mouse coordinates tracked via `onMouseMove`. The code uses React's `useState` and `useCallback` hooks within a functional component, rendering through `ReactDOM.render`. No data source is involved; the visual is purely interactive, with the circle radius fixed at 30 pixels and initial position centered on the viewport.

Loading thumbnail…

Face

A grid of 18 identical cartoon faces fills the screen, each rendered with a gold background circle, black outline, two black eyes, and a curved mouth. The visualization demonstrates React component composition, where each face is built from reusable subcomponents like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using `d3.arc()` from D3 v6, while all other shapes use plain SVG elements within a React rendering pipeline.