D

dumbdataguy@gmail.com

@antJesus·37 public vizzes

Loading thumbnail…

Music Format

This visualization shows the evolution of music format sales in the United States from 1973 to 2019, with each format appearing as a colored band that widens to represent its annual revenue. The chart uses a bar-on-bar layout where a white background mark for each year is overlaid with the format-specific segments. The visualization is built with React and D3 v5, employing `scaleLinear`, `scaleBand`, and `scaleOrdinal` for scaling, while the `nest` and `sum` functions aggregate the raw sales data. The background image and SVG rendering create a stylized, poster-like presentation of the dataset.

Loading thumbnail…

tester

A static background SVG image is displayed at a fixed position, while a React application renders a simple "Hello React!" message into a separate HTML element. The page uses two distinct rendering paths: an inline SVG with an external image reference for the graphic, and ReactDOM to mount the React component. The code depends on React and ReactDOM’s `render` method, alongside standard SVG image embedding with `href` and placement attributes.

Loading thumbnail…

SVG patterns

This example displays a single raster image inside an SVG container, with the image loaded from an external URL and sized to a large fixed width and height. The page relies on basic HTML, CSS, and JavaScript to structure the visualization, though no interactive behavior or data-driven logic is present. The SVG element provides a standard vector-based rendering context, while the included <img> tag embeds the PNG graphic directly. The code uses no external visualization libraries, instead demonstrating a minimal setup for placing an image within an SVG canvas.

Loading thumbnail…

Multiple Views with Brushing

This example shows global migration incidents through a bubble map and a linked time-series histogram. Brushing a time range in the histogram filters the circles displayed on the map, revealing spatial patterns of events. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for world boundaries, while the histogram uses `d3.bin` and `d3.brushX`. Data comes from a CSV of Missing Migrants, with circle size scaled by `d3.scaleSqrt` based on reported deaths.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the estimated populations of the ten most populous countries in 2020, using a horizontal layout. Built with React and rendered as SVG, the visualization leverages D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a CSV URL using D3's `csv` utility. Tooltips reveal precise values, and axis labels are formatted with D3's `format` function, converting large numbers into a readable "B" suffix for billions.

Loading thumbnail…

Missing Migrants on Map and Bar

The visualization combines a world map with a time-series bar chart to explore global migrant deaths and disappearances. Geographic locations are plotted as circles scaled by the square root of the total dead and missing, while the lower histogram aggregates the same metric by month, using a D3 time-scale and binning. The map uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for the projected landmasses, and the chart is built with React components. Data comes from a CSV file of Missing Migrants incidents, rendered entirely as SVG.

Loading thumbnail…

Missing Migrants on Map

A world map displays the locations of missing migrant incidents, with circles sized by the number of dead and missing using a square root scale. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, with country boundaries and graticules from TopoJSON. React components manage state and rendering, while d3.csv loads the migrant dataset. Point positions derive from latitude and longitude coordinates, and circle opacity is fixed at 0.3 for visual clarity.

Loading thumbnail…

Migrant Data

This visualization displays the total number of dead and missing migrants over time, using a bar chart where each bar aggregates monthly data. Built with React and D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, and D3's `histogram` to bin the data by month. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with each bar showing a tooltip via a `<title>` element. Data comes from the Data Canvas Sense Your City Dataset.

Loading thumbnail…

Points on a Map

This example displays a world map with city points sized by population. The visualization uses the `geoNaturalEarth1` projection and `geoPath` from D3 to render landmasses, graticules, and interiors from TopoJSON data. City coordinates are projected onto the map, and their radii are scaled with `scaleSqrt`. The entire visualization is built with React and uses D3’s `csv` loader to bring in city data from a remote CSV file.

Loading thumbnail…

Interactive color legend

This interactive scatterplot visualizes the iris flower dataset, mapping petal length and sepal width for three species distinguished by color. Hovering over a species in the ordinal color legend dims non-matching points via React state and a fade opacity, while the selected species’ marks remain highlighted. Built with React and D3 v5, the SVG chart uses `scaleLinear`, `scaleOrdinal`, and reusable axis and legend components, with data loaded async from a CSV via `useEffect` and `d3.csv`.

Loading thumbnail…

Scatter Plot with color legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower species, distinguished by color. The visualization uses d3-scale’s `scaleLinear` for the axes and `scaleOrdinal` for the categorical color mapping, rendered via React components. The SVG rendering includes custom axes, a color legend, and tooltips via SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a gist hosted on GitHub.

Loading thumbnail…

Scatter Plot with color

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal width for three species of flowers, with each species distinguished by color. The visualization uses React to render an SVG, with d3.scaleLinear handling the x and y axes, and d3.scaleOrdinal assigning distinct colors to each species. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the Marks component generates the circles with native SVG tooltips displaying the x-axis values.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements appear on the x- and y-axes using two React dropdown menus. The visualization uses React state to manage the selected attributes, and D3 v5 functions like `scaleLinear` and `extent` to compute scales from the CSV data. The SVG rendering includes custom React components for the axes, marks, and dropdowns, with circular points colored in teal that include native tooltips showing formatted values.

Loading thumbnail…

Starting iwth Menus

This example demonstrates a dropdown menu for selecting a pet type, with the current choice displayed via React state. The interface uses a reusable `Dropdown` component that maps over an array of options to render `<select>` and `<option>` elements, triggering state updates through the `onSelectedValueChange` callback. Built with React and ReactDOM, the app initializes with a default value of “hamster” and logs each selection to the console. Styling via inline CSS enlarges the label and select for readability, while the component structure separates data handling from presentation.

Loading thumbnail…

React Starter

This example displays a minimal React application that renders the text “Hello React!” into a web page. It uses React 16.9.0 and ReactDOM to mount a functional component into a root `div` element. The HTML page loads React from a content delivery network and runs the bundled JavaScript, demonstrating a basic setup for integrating React with a visualization environment.

Loading thumbnail…

world Map2

This interactive world map uses D3.js geographic projections to render Earth's landmasses, graticules, and a semi-transparent sphere overlay. The application fetches topology data from the `world-atlas` package and processes it through `topojson`'s `feature` and `mesh` functions. The D3 `geoNaturalEarth1` projection defines the map's coordinate system, while `geoPath` converts geographic features into SVG paths. React handles the user interface, and CSS styling differentiates the landmasses in teal, the graticule lines in gray, and the interiors in a contrasting cyan color.

Loading thumbnail…

World Map

This example visualizes a time series of temperature readings as a smooth line chart with circular data points, populated from an external JSON dataset. The chart uses React to render SVG elements, with D3 v5 handling data loading via `d3.json`, scale construction through `scaleTime` and `scaleLinear`, and path generation with the `line` function and `curveNatural` interpolation. Axes are built using `scaleTime.ticks` and `scaleLinear.ticks` with custom tick formatting, and hover tooltips are provided through native SVG `<title>` elements. The visualization also includes styled axis labels and gridlines from the accompanying stylesheet.

Loading thumbnail…

Line Chart

This line chart visualizes temperature readings over the course of a week in San Francisco, using data from a CSV file fetched via d3.csv. The React application renders an SVG with d3.scaleTime and d3.scaleLinear for the axes, while the Marks component draws a smooth curved path using d3.line with curveNatural. Each data point is highlighted with a circle element that displays a tooltip on hover, and both axes include labeled tick marks generated by custom React components.

Loading thumbnail…

scatter again

This example displays a scatter plot of the Iris dataset, plotting petal length against sepal width, with each point rendered as an SVG circle. The visualization uses React components to structure the chart, while d3-scale’s `scaleLinear` handles the x and y axes, and d3’s `extent` determines the domains. Axes are drawn with reusable React components, and hover tooltips are provided via SVG `<title>` elements. Data is loaded asynchronously from a CSV file using d3’s `csv` function and converted to numeric values for plotting.

Loading thumbnail…

ScatterChart2

This scatterplot displays the relationship between sepal length and sepal width for iris flowers, with each circle representing a data point. The visualization uses React to render SVG elements, while D3 v5 utilities handle data loading via `d3.csv` and scale creation with `scaleLinear` and `extent`. Custom React components structure the axes and marks, with tooltips showing formatted x-axis values. The styling uses the Poppins font and a teal color scheme for the circular markers.

Loading thumbnail…

Scatter Chart

This scatter chart visualizes the relationship between petal length and sepal width in Fisher's Iris dataset, loaded as CSV data via D3's `csv` utility. The code uses `scaleLinear` to map data values to SVG coordinates, with axes generated by custom React components that render tick marks and labels. The chart is built with React and D3 v5, rendering circles with tooltips showing formatted values. The dataset is fetched from a gist URL and parsed in a custom `useData` hook.

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. It displays the data as an SVG scatter plot using React components and D3 scales to position marks. Each circle represents a flower, with native SVG `<title>` elements providing hover tooltips. The code uses `d3.csv` to load data, `scaleLinear` for axes, and `format` for tick labels. Custom React components render the axes and marks, with the chart styled using the Poppins font.

Loading thumbnail…

REfactored Bar Chart

This bar chart displays the population of the top ten countries in 2020, using horizontal bars to compare values. The chart is built with React components for the axes and marks, while D3 v5 handles data loading via `csv` and scales through `scaleBand` and `scaleLinear`. The data comes from a UN Population CSV file, and the visualization is rendered as an SVG, with the y-axis listing country names and the x-axis showing population values.

Loading thumbnail…

Axis with React

This example shows a horizontal bar chart of the top 10 countries by population in 2020, using data loaded from a CSV file via `d3.csv`. React renders an SVG containing scaleBand and scaleLinear axes, with custom tick marks and labels generated from `xScale.ticks()`. The bars are drawn as `<rect>` elements using D3’s scale functions, while React hooks (useState, useEffect) manage data loading and state. The chart updates automatically once the data arrives, displaying a clean, styled visualization with a left margin for country names.

Loading thumbnail…

Margin Conventions

This example demonstrates the importance of margins in data visualization by rendering a horizontal bar chart of the top 10 countries by population in 2020. The chart uses a React component that fetches data from a GitHub-hosted CSV file via D3's `csv` utility. An SVG is drawn with `rect` elements, positioned using D3's `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The code explicitly defines a `margin` object and translates the plot group by its top-left values to keep the bars inside the viewport.

Loading thumbnail…

myFirstBarChart again

This example displays a horizontal bar chart of the top ten countries by 2020 population, using SVG rectangles rendered through React. The code loads population data from a CSV file via `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Each bar’s width is mapped from the population value, with the height determined by the band scale’s bandwidth. The visualization demonstrates a React component that fetches data asynchronously with hooks and renders it using D3’s scaling utilities.

Loading thumbnail…

myFirst BarChart

This example visualizes the 2020 United Nations population estimates for each country in a bar chart. The app uses `d3.csv` to load the data and React’s `useState` and `useEffect` hooks to manage the asynchronous fetch and render the loading state. Although the chart’s axes and rectangles are not fully implemented in the visible code, the structure supplies population values and dimensions for a React SVG rendering. The visualization relies on D3’s `scaleBand` and `scaleLinear` (commented out) for positioning and sizing the bars, with the final output intended as an SVG within a React component.

Loading thumbnail…

Trying Squares

A grid of fifteen colored rectangles renders a fixed dataset of five values repeated three times, with each rectangle’s width proportional to its value and its fill assigned a random RGB color via the custom `getRandomColor` function. The React component uses `d3.sum` to compute total width and `d3.selectAll` to append SVG `rect` elements, while the `FaceContainer` wrapper translates the group into the SVG canvas. D3 v7 and React 18 combine to generate the static layout without interaction.

Loading thumbnail…

Third Face

This example displays 15 yellow circular faces arranged in a grid, each with two eyes and a half-smile mouth. The faces are generated using React components that compose SVG shapes, with random eye radii creating variation. The code leverages React 18 for component structure, D3 v7's `arc` API to draw the mouth path, and a `range` helper from D3 to produce the array of faces. All rendering occurs as SVG elements within a container component.

Loading thumbnail…

drawing squares

This example demonstrates how to draw a series of rectangles whose widths correspond to values in a local data array. The rectangles are vertically aligned and randomly colored, with a tooltip appearing on mouseover to display each rectangle’s value. The visualization uses D3.js v5 via a CDN import, leveraging `d3.select`, `d3.sum`, and `.enter()` to build SVG rectangles. The code also imports a local ES6 module for the message text and uses D3 event handling with `d3.event` for positioning the tooltip.

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between miles per gallon, horsepower, and model year for vehicles in the Auto MPG dataset from the UCI Machine Learning Repository. Using the Vega-Lite API, it renders a scatter plot where circle size encodes year and color encodes mpg. The code registers Vega-Lite with Vega, applies a custom configuration for axis styling, and loads the data via d3.csv. The rendering is fitted to the browser window with an SVG output.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimal React and D3 integration for loading external CSV data. The app displays a message showing the row and column counts of the dataset once it is fetched, with the text "Loading" rendered before the data arrives. The code uses React’s `useState` and `useEffect` hooks alongside D3’s `csv` function to asynchronously retrieve the dataset from a GitHub gist URL. The visualization renders as SVG-compatible HTML text, coordinating React’s component lifecycle with D3’s data-loading utilities.

Loading thumbnail…

Importing and Parsing csv Data

This example loads and parses a CSV file containing CSS named colors using the D3.js v7 library. The code calls `d3.csv()` with a GitHub Gist URL, then logs the number of rows and columns from the loaded dataset to the browser console. An alternative commented-out approach demonstrates using the Fetch API with `async`/`await` and `d3.csvParse()` to achieve the same parsing workflow.

Loading thumbnail…

Mouser Follower

A small black circle follows the mouse cursor across an SVG canvas that fills the browser window. The example demonstrates React state management and event handling by updating the circle's position on every mouse move. It uses React's `useState` and `useCallback` hooks to track cursor coordinates, and ReactDOM renders the SVG element with an inline `onMouseMove` handler. The rendering approach relies on React's declarative SVG output rather than imperative DOM manipulation.

Loading thumbnail…

Mouse Follower

A static yellow smiley face is rendered as an SVG graphic, centered within a 960 by 500 viewport. The face consists of a large yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc path. Built with React and D3 v7, the example uses the `arc()` generator from the D3 shape module to define the mouth’s geometry, while React manages the SVG elements. The code demonstrates how to combine React’s declarative components with D3’s path calculation utilities for simple chart-like shapes.

Loading thumbnail…

Second Face

A stylized smiley face rendered with React and SVG, drawn as a yellow circle with black outlines and two solid black eyes. The mouth is created as a half-circle arc using D3's `arc()` generator, with its inner and outer radii and start/end angles defined explicitly. All shapes are positioned relative to the SVG center, and the face is built declaratively in JSX within a React component. The example demonstrates combining D3’s geometry utilities with React’s component model for static vector graphics.

Loading thumbnail…

First Face

A yellow circle with a black outline forms the base of a simple face, accompanied by two smaller circles representing eyes. The visualization is a minimal, static example composed directly within an SVG element using basic shape tags. It relies on the native SVG API for rendering, with the face centered on a 960 by 500 pixel canvas. The code does not include a data source or interactivity, focusing instead on illustrating fundamental vector graphics construction.