B

blackbottt

@Blackbottt·24 public vizzes

Loading thumbnail…

migrants dead and missing React and D3

This visualization displays monthly totals of dead and missing migrants from a global 2019 subset dataset. The React app loads CSV data with `useData` and `d3.csv`, then uses `d3.bin()` with `timeMonths` thresholds to aggregate daily records into monthly intervals, which are rendered as pink SVG rectangles. Axes are generated using `d3.scaleTime` with a `%d/%m/%y` time format for the bottom axis and `d3.scaleLinear` for the left axis. All marks and axes are implemented as reusable React components, rendered through ReactDOM into an SVG container.

Loading thumbnail…

Analyzing missing migrants data by Multiple Views with Brushing

A choropleth-style bubble map displays global locations of missing migrants, with circle size encoding the total dead and missing count. A brushed date histogram below filters the map to show only incidents within a selected time range. The visualization uses React, D3 v5’s `geoPath` with `geoNaturalEarth1` projection, `scaleSqrt` for bubble radii, and `brushX` for interactive filtering. Data comes from the Missing Migrants Project CSV, rendered as SVG with World Atlas TopoJSON country boundaries.

Loading thumbnail…

Analyzing missing migrants data by Multiple Views

This interactive visualization explores the Missing Migrants dataset, combining a geographic bubble map with a temporal bar chart. The map uses a natural Earth projection and scales point radii by the square root of the reported death count. The histogram aggregates the same metric by month, enabling comparisons across time. Both views are rendered as SVG using React, with D3 v5 utilities like `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, and `histogram` handling projection, scaling, and binning. World boundaries come from the world-atlas TopoJSON package.

Loading thumbnail…

Fork of Making a world map with city points React and D3

This example visualizes a world map with city points using React and D3. The map displays missing migrant incidents, with circle sizes representing the “Total Dead and Missing” metric via a d3.scaleSqrt. The geoNaturalEarth1 projection renders country boundaries, graticules, and interiors using d3.geoPath, while topojson provides the world-atlas data. City coordinates are projected and plotted as circles, with data loaded from a CSV using d3.csv. The SVG-based rendering uses React components for the atlas and marks.

Loading thumbnail…

Making a world map with city points React and D3

This example displays a world map with city points sized by population, built using React and D3. It shows countries with interior boundaries, a graticule, and a sphere background, with city circles projected using the d3.geoNaturalEarth1 projection. The map uses d3.json to load the world-atlas TopoJSON, d3.csv for city data, and d3.geoPath with d3.geoGraticule for rendering. City radii are scaled using d3.scaleSqrt, while d3.max determines the scale domain. The visualization is rendered as an SVG within a React component, using React hooks to manage asynchronous data loading.

Loading thumbnail…

Making a world map React and D3

This example renders a world map using React and D3, displaying countries as filled polygons with black graticules and an amber sphere backdrop. It loads country boundaries from a world-atlas GeoJSON file and uses D3's `geoNaturalEarth1` projection and `geoPath` to convert geographic coordinates into SVG paths. The React component fetches data through a custom `useData` hook, then passes processed topology features and mesh interiors to the `Marks` component for rendering.

Loading thumbnail…

Polished Scatter with color Plot, color Legend with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between measurements like petal length and sepal width. A color legend maps the three Iris species to distinct hues, and hovering over a legend item highlights only the corresponding species points while dimming others. Built with React and D3 v5, the chart uses D3 scales for axes and colors, with custom SVG marks for data points. Dropdown menus for selecting X and Y attributes are implemented using the react-dropdown library, and axes are rendered via separate components.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset rendered as SVG circles in React, with two dropdown menus that let the viewer select which of four numeric attributes appears on the x- and y-axes. The visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load the data, while custom React components (AxisBottom, AxisLeft, Marks) generate the tick marks, labels, and circles. Axis labels update dynamically based on the selected attribute.

Loading thumbnail…

Fork of A scatter plot with menus in React and D3

This interactive scatter plot visualizes the iris dataset, allowing users to dynamically select which four measurements (sepal length, sepal width, petal length, petal width) to display on the x and y axes via dropdown menus. The visualization renders SVG circles for each data point, using D3’s `scaleLinear` for axis scaling and `extent` to compute the domains. Axis ticks are generated with `xScale.ticks()` and `yScale.ticks()`, while React’s `useState` manages the selected attributes. The React component structure separates concerns into `AxleBottom`, `AxleLeft`, `Marks`, and `Dropdown` components.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus control which numeric attribute is mapped to the x-axis and y-axis, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses D3's `scaleLinear`, `extent`, and `format` functions for scaling and tick formatting, rendering SVG circles with tooltips. The code also leverages the `react-dropdown-browser` library for menu interactions and loads data via D3's `csv` parser.

Loading thumbnail…

Fork of Scatter Plot with Menus frm Curran

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which columns map to the X and Y axes via dropdown menus. Implemented with D3 v5, the visualization leverages `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the plot. A custom `dropdownMenu` module handles menu creation, while the `scatterPlot` module animates circle positions using `transition().duration(2000).delay()` when data changes. SVG rendering and CSS styling complete the interface.

Loading thumbnail…

menus in react

This example demonstrates a simple pet-selection dropdown built with React. It uses the `useState` hook to track the currently selected pet, initialized to "cat," and updates the displayed choice whenever the user changes the dropdown. The `Dropdown` component maps over an array of pet options, rendering each as an `<option>` element within a `<select>` tag. The code relies on ReactDOM to render the app into the DOM, with styling applied via CSS classes.

Loading thumbnail…

line chart React and D3

This line chart visualizes weekly temperature data for San Francisco using React and D3 v5, rendering an SVG with time-scaled axes. The React components `AxleBottom`, `AxleLeft`, and `Marks` leverage D3's `scaleTime`, `scaleLinear`, and `line` API to construct the axes and path. Temperature values are plotted against timestamps, with data loaded from a CSV file via `d3.csv`. The chart includes grid ticks, axis labels, and circles at each data point.

Loading thumbnail…

working with time React and D3

A React and D3 scatterplot displays weekly San Francisco temperature readings over time, plotting each timestamp and temperature pair as a pink circle on an SVG canvas. The code uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.timeFormat for weekday labels. Custom React components AxleBottom, AxleLeft, and Marks render ticks and circles, with layout managed through margin calculations and SVG transforms.

Loading thumbnail…

A scatter plot in React and D3

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each flower as a pink circle. Built with React for component structure and D3 v5 for scales and CSV loading, it renders as SVG. The `scaleLinear` and `extent` APIs create the axes, while AxleBottom and AxleLeft components draw ticks and gridlines.

Loading thumbnail…

styled bar chart in React and D3

This example shows a horizontal bar chart of country populations, with bars rendered as styled SVG rectangles and axes displaying formatted tick labels. The chart uses React to manage component state and rendering, while D3 v5 utilities (scaleBand, scaleLinear, max, format, and csv) handle data loading, scaling, and number formatting. Data comes from a UN population prospects CSV fetched via d3.csv, and the chart is drawn entirely with SVG elements, including custom axle components for the left and bottom axes.

Loading thumbnail…

refactored bar chart in React and D3

A bar chart displays the 2020 population of countries from a World Population UN prospects dataset, with countries on the vertical axis and population on the horizontal axis. The visualization is built using React and D3 v5, where components like AxleBottom and AxleLeft render axis ticks and labels using d3.scaleBand and d3.scaleLinear, while Marks draws the rectangular bars as SVG elements. The code loads the CSV data with d3.csv and hooks.

Loading thumbnail…

Making a bar chart with React & d3

A React application renders a bar chart of world population data from a UN prospects CSV, using d3.scaleBand and d3.scaleLinear to map countries and population values. The svg output displays horizontal bars with gridlines and tick labels, while React's useState and useEffect hooks handle asynchronous data loading via d3.csv. The chart uses a margin-based layout with x-axis values positioned at the bottom and country labels on the left.

Loading thumbnail…

Fork of loading data in React with d3

This example shows a React application that loads a CSV dataset of world population prospects using D3’s `d3.csv` function, storing the result in component state via `useState` and `useEffect`. While the current code only logs the parsed data to the console, it sets up an SVG canvas with a width of 960 and height of 500, importing `arc` and `pie` from D3 for potential chart rendering. The data originates from a GitHub gist URL, and the ReactDOM render method mounts the app to the root element.

Loading thumbnail…

Hello Smiley Face

A smiling face is rendered as a yellow circle with black outlines, featuring two small circular eyes and an arc-shaped mouth. The face is centered within an SVG canvas, with all elements constructed using React components. The visualization uses D3 v5’s `arc` function to generate the mouth’s path, while the SVG groups are translated into position using React’s JSX syntax.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset, showing a scatter plot of vehicle counts by country. The visualization uses Vega-Lite API to create circles with tooltips, sorted by country on the x-axis and number of vehicles on the y-axis. The code integrates vega, vega-lite, and d3.csv for data loading, with a custom config to style axis labels and titles. It renders SVG via the vega view, fitting the visualization to the full window size.

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a CSV file using D3.js, presenting the dataset’s size, row count, and column count as large text on the page. It fetches a CSV of named CSS colors from a GitHub gist via `d3.csv()`, then uses `d3.csvFormat()` to calculate the file size in kilobytes. The code also includes a commented alternative approach using the Fetch API with async/await and `d3.csvParse()` for manual parsing. The interface is minimal, rendering the three computed metrics inside a styled `<pre>` element.

Loading thumbnail…

mouse follower

An SVG circle tracks the mouse as it moves across a full-window canvas. The visualization updates the circle's horizontal and vertical coordinates in real time based on pointer events. Built with React's `useState` and `useCallback` hooks, the component re-renders whenever the mouse position changes. The example uses D3.js v5 for SVG rendering and React 18 for component management.

Loading thumbnail…

mouse follower

A static face is drawn with SVG circles for eyes and a d3.arc path for the mouth, centered within a 960×500 viewport. The React component structure separates the face into BackgroundCircle, Eyes, and Mouth subcomponents, with the FaceContainer applying a transform to position the group. The example demonstrates the use of d3.arc to generate the mouth curve and React’s component composition to assemble a simple visual element, though no interactive mouse-following behavior is visible in the provided code.