Skip to main content
Log in
M

Mario Ibarra

@coderinspain·20 public vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset allows users to dynamically select which flower attributes to plot on the x and y axes via React dropdown menus. Colored by species, the plot displays circles with a supplementary legend and axis labels. Built with React, the visualization leverages D3 v5 for scales, axes, and CSV data loading, rendering to SVG. Users can explore relationships between sepal and petal measurements across three iris species.

Apr 21, 2021
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot displays measurements from the Iris Dataset, letting users compare four flower attributes (sepal and petal length/width) by selecting which to plot on the X and Y axes. Each point is colored by iris species, with a color legend identifying the three varieties. The visualization is built with React and uses D3’s `scaleLinear`, `scaleOrdinal`, and `extent` functions to map data to positions and colors, rendering circles as SVG elements. Dropdown menus control the axis selections, while D3’s `csv` loads the data asynchronously.

Apr 21, 2021
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot displays the Iris dataset, with dropdown menus enabling users to select which flower measurements appear on the x- and y-axes. Each point is colored by species using a D3 ordinal scale, and hovering reveals the sepal length via SVG circle titles. Built with React hooks for state management, the visualization uses D3 scales and the `csv` loader to parse data, while custom React components render the axes and marks.

Apr 21, 2021
Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot of the Iris dataset, this visualization displays the relationship between any two selected attributes. Users choose the variables for the X and Y axes from dropdown menus, with the plot updating dynamically. Built with React and D3 v5, it uses `d3.scaleLinear` for scales and `d3.extent` for domain calculation. The SVG render includes custom axis components and marks with tooltips, with data loaded via `d3.csv`.

Apr 21, 2021
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two numerical attributes by selecting them from dropdown menus for the X and Y axes. Each point represents a flower sample, with hover tooltips revealing precise values. Built with React and D3 v5, the visualization uses SVG rendering and scales created via `d3.scaleLinear` and `d3.extent`, with axes generated by custom React components. The menus update the state to re-render the chart dynamically.

Apr 21, 2021
Loading thumbnail…

United Nations World Population 2019

This chart shows the top ten countries by their 2020 population estimates, rendered as a horizontal bar chart using SVG. It loads a CSV dataset of United Nations population figures, parses it with D3’s `csv` utility, and uses React’s `useEffect` and `useState` to fetch and store the data. The bar widths are scaled with `d3.scaleLinear` and positioned vertically via `d3.scaleBand`, with each rectangle’s width proportional to the population value.

Apr 21, 2021
Loading thumbnail…

Drop down Menu

This example demonstrates a simple interactive dropdown menu that lets a user select a pet from a predefined list, with the chosen value logged to the console. Built with React, it uses the `useState` hook to manage the selected value and the `Dropdown` component, which renders a native HTML `<select>` element. The options are defined as an array of objects with `value` and `label` properties, and the initial selection is set to “hamster.” Styling is applied via embedded CSS in the `index.html` file.

Apr 20, 2021
Loading thumbnail…

React Starter Code

This example displays a minimal React application that renders the text "Hello React" on a webpage. It uses React and ReactDOM to mount a simple component into a root div element. The code loads React libraries from unpkg and defines an App function that returns the greeting message. The ReactDOM.render method then places this component into the designated HTML container, demonstrating a basic setup for starting a React project.

Apr 20, 2021
Loading thumbnail…

World Map

This map visualizes world landmasses and country borders using a Natural Earth projection. The React-based application loads GeoJSON data from the World Atlas TopoJSON file, converting it with `topojson.feature` and `topojson.mesh`. Using D3’s `geoNaturalEarth1` projection and `geoPath`, the SVG rendering displays land in teal, graticules in light gray, and country boundaries with a subtle stroke. The sphere outline and graticule grid provide geographic context, while the Poppins font styles the interface.

Apr 20, 2021
Loading thumbnail…

Working with Time

A line chart visualizes temperature over time for one week in San Francisco, with each day’s timestamp plotted along the x-axis and temperature along the y-axis. React renders SVG elements, while d3.scaleTime, d3.scaleLinear, d3.extent, and d3.line with curveNatural generate the axes and smooth path. Circles mark individual data points, and hover reveals the day via d3.timeFormat. The dataset is loaded as CSV using d3.csv from a GitHub gist.

Apr 19, 2021
Loading thumbnail…

Stylized Scatter Plott

This scatter plot visualizes the Iris Dataset, mapping sepal length against sepal width for individual flower specimens. The visualization uses React to render SVG elements, with D3 v6 functions like `scaleLinear` and `extent` for scaling and domain calculation. Axis components are built with reusable React components, while the marks are circles with tooltips displaying values via native SVG `<title>` elements. The chart features a custom Poppins font, light grid lines, and teal-colored data points, with D3's `csv` loading the data from a GitHub-hosted CSV file.

Apr 19, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top ten countries for 2020, sourced from UN Population data. The chart uses horizontal bars, colored in a teal tone, with a clean, minimal aesthetic. Built with React and D3 v6, the visualization leverages `scaleBand` and `scaleLinear` for layout, and renders as an SVG. The code uses React components, including custom `AxisBottom`, `AxisLeft`, and `Marks`, and includes interactive tooltips powered by the `<title>` element to show precise population values.

Apr 19, 2021
Loading thumbnail…

Refactored Bar Chart

This is a bar chart ranking the ten most populous countries according to UN 2019 population data. The visualization uses React to manage component state and rendering, while D3 v6 utilities like `scaleBand` and `scaleLinear` handle the scales and axes. The chart is rendered as an SVG, with data loaded asynchronously from a CSV via `csv`. The code defines reusable React components for the bottom and left axes and the bar marks, showcasing a modular, refactored approach to building D3 visualizations within a React framework.

Apr 19, 2021
Loading thumbnail…

Axis with React & D3

This example uses React 16.9 and D3 v6 to render a horizontal bar chart of the top ten countries by 2020 population, sourced from a CSV file. The code demonstrates how to integrate D3’s scaleBand and scaleLinear for positioning, along with d3.csv for data loading. Axis ticks and labels are generated manually via xScale.ticks() and mapped to SVG elements, while React handles the component state and renders the bars and text as SVG rect and text nodes.

Apr 19, 2021
Loading thumbnail…

Margin Convention

This example demonstrates how to visualize the populations of the top ten countries using a bar chart rendered as static SVG elements in React. The chart uses a band scale for country names on the y-axis and a linear scale for population values on the x-axis, with a margin convention applied to position the chart within the viewport. Data is loaded from a CSV file containing UN population estimates for 2019 using `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` handle the scaling. The visualization is built with React functional components and hooks, with D3 v6 utilities supplying the data-processing and scale functions.

Apr 19, 2021
Loading thumbnail…

Rendering Data with React & D3

A React component renders a dataset of named CSS colors from MDN as a radial burst chart, with each color represented by a pie slice. The visualization uses React hooks (`useState`, `useEffect`) to fetch and manage the CSV data, while D3's `pie` and `arc` utilities compute the slice geometry. React's declarative JSX generates the SVG paths, with each slice's fill set from the color's hex value, creating a full-circle display of the color palette.

Apr 18, 2021
Loading thumbnail…

Rendering Data with React

This example shows how React and D3 work together to render a grid of color swatches, one for each named CSS color loaded from an MDN dataset. The React component manages the asynchronous data loading with the `useState` and `useEffect` hooks, fetching the CSV via D3’s `csv` method. Once loaded, each color is mapped to a div whose background color is set using the `RGB hex value` field from the dataset. The visualization relies on React’s declarative rendering rather than D3’s DOM manipulation, demonstrating a clean separation of data loading and UI presentation.

Apr 18, 2021
Loading thumbnail…

Fork of Fork of D3 Starter

This example shows the basic file size, row count, and column count of a CSV dataset loaded from a GitHub gist. It demonstrates a minimal D3 v6 starter workflow by fetching a remote CSV file named cssNamedColors.csv using d3.csv, formatting the data with d3.csvFormat, and displaying the computed metrics as text in a pre element. The page also includes an unused fetch-based alternative approach commented out.

Apr 18, 2021
Loading thumbnail…

Fork of React Starter

This example renders a cartoon face built from layered SVG shapes, composed of a yellow background circle, two eyes, and an arched mouth. It uses React components for each facial feature, with a `FaceContainer` providing the SVG canvas and centering transform. The mouth path is generated using d3’s `arc` generator to create an annular sector. All geometry—eye offset, radii, and stroke widths—is passed as props, making the face easily customizable.

Apr 16, 2021
Loading thumbnail…

Fork of React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page. The code uses React and ReactDOM to define an `App` component and mount it into the `#root` element. Styling is applied via CSS, setting the message’s font size to 13em and centering it with text alignment. The page loads React from a CDN and executes the compiled bundle, demonstrating a basic component-rendering workflow without additional data or interactivity.

Apr 16, 2021