R

roc286

@roc286·31 public vizzes

Loading thumbnail…

React Performance Optimization - Episode 45

This interactive visualization combines a world bubble map and a time-series histogram to explore global migrant deaths in 2019. Users brush over the histogram to filter the map, which plots circles sized by the number of dead and missing at each location. The code uses React with `useMemo` for performance, D3 v5 utilities like `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`, and renders via SVG. Data comes from the Missing Migrants Project and world boundaries from World Atlas TopoJSON.

Loading thumbnail…

Multiple Views w/ Brushing - Episode 44

This visualization combines a bubble map and a date histogram into a linked view for exploring missing migrant data. Brushing the histogram filters the map, showing only incidents within the selected time range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render world boundaries, with circle radii scaled by `d3.scaleSqrt` based on total dead and missing. The histogram aggregates counts by month using `d3.bin` and `d3.timeMonths`, with brushing implemented via `d3.brushX`. Data comes from a CSV of global missing migrants, rendered in SVG within a React framework.

Loading thumbnail…

Multiple Views Clean Up - Episode 43

This interactive visualization combines a world bubble map with a time-series histogram to explore missing migrant incidents. The map projects country boundaries and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`, while circles sized by `d3.scaleSqrt` encode the total dead and missing per location. A linked histogram below, built with `d3.bin` and `scaleTime`, aggregates monthly totals, with axes rendered via custom React components. Data comes from the Missing Migrants Project CSV, and the visualization uses React with D3 v5, rendering to SVG.

Loading thumbnail…

Missing Migrants Multiple Views - Episode 41

This dashboard combines a bubble map and a date histogram to visualize reported deaths and disappearances of migrants. The map uses a square-root size scale for circles, while the histogram bins monthly totals from the same dataset. Both views are linked through shared data from the Missing Migrants project. The map is rendered using D3’s `geoPath` and `geoNaturalEarth1` projection, with graticules and country boundaries from the world-atlas TopoJSON, while the histogram applies D3’s `scaleTime`, `scaleLinear`, and `histogram` binning APIs.

Loading thumbnail…

Missing Migrants Aggregation by Month - Episode 39

This visualization displays the total number of dead and missing migrants aggregated by month, with each bar representing the sum of casualties for a given time period. The histogram uses d3.bin with timeMonths thresholds to group events, while d3.scaleTime and d3.scaleLinear handle the axes. Built with React and rendered as SVG, the chart reads from a CSV dataset of migrant incidents and formats tick labels using d3.timeFormat. Tooltips appear on hover via SVG title elements.

Loading thumbnail…

Missing Migrants on a Map - Episode 40

This visualization maps missing migrants worldwide, with semi-transparent circles representing the total number of dead and missing at each location. The map uses a natural Earth projection rendered as SVG paths via `d3.geoPath`, with graticules, landmasses, and country borders drawn from TopoJSON data. Circle sizes are scaled using a square-root scale based on recorded migrant fatality counts. The visualization is built with React, D3 v5, and data from a subset of the Missing Migrants Global dataset.

Loading thumbnail…

Missing Migrants Scatter Plot - Episode 38

A scatter plot of the Missing Migrants Dataset, where each circle represents a single migration event, positioned by reported date on the x-axis and total dead or missing on the y-axis. The visualization uses React with D3 v5 scaleTime and scaleLinear for axes, rendering SVG circles with native tooltips via SVG title elements. Data is loaded as CSV from a GitHub gist.

Loading thumbnail…

Sized Points on a Map - Episode 37

This example displays world cities as circles on a natural Earth projection, with each circle's radius proportional to the city's population using a square-root scale. The visualization renders a land and graticule backdrop using D3's geoPath and geoNaturalEarth1, and overlays the sized points as SVG circles. City data is loaded from a CSV URL, while world map geometry comes from the world-atlas TopoJSON. The React application uses D3's `csv`, `json`, `feature`, and `mesh` functions to prepare and project the data.

Loading thumbnail…

Points on a Map - Episode 36

This example visualizes world cities as semi-transparent points overlaid on a natural Earth projection map. The visualization displays country landmasses, graticules, and interior borders, with city locations rendered as small circles positioned using the geoNaturalEarth1 projection and geoPath utilities. Built with React and D3 v5, it loads geographic data from a TopoJSON world atlas and city coordinates from a CSV file, using d3.json, d3.csv, and topojson feature/mesh functions to prepare the data for SVG rendering.

Loading thumbnail…

Interactive Color Legend - Lecture 35

This interactive scatterplot displays the Iris flower dataset, with dropdown menus to select the attributes plotted on the X and Y axes. The plot includes a color legend for species that supports hover interactions, highlighting the corresponding data points while fading others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scales, with custom React components for axes, marks, and a color legend. The dropdown menus use the `react-dropdown` library, and data is loaded via `d3.csv` from remote CSV files.

Loading thumbnail…

Scatter Plot with Color Legend - Lecture 34

This interactive scatter plot from Lecture 34 visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus let viewers select which quantitative attributes appear on the x and y axes, while a color legend distinguishes the three iris species using an ordinal color scale. Built with React and D3 v5, the SVG rendering uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.extent for domain calculations, with custom React components for axes, marks, and legend rendering.

Loading thumbnail…

Scatter Plot with Color - Lecture 33

A scatter plot of the Iris dataset renders sepal and petal measurements as colored circles, with species determining the color. Two dropdown menus let viewers select which attributes appear on the x and y axes. The visualization uses D3 v5’s linear and ordinal scales for positioning and coloring, React for the interactive interface, and SVG for rendering.

Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris dataset with interactive dropdown menus for selecting the X and Y axes. The visualization uses React to manage state for the selected attributes and d3.scaleLinear to map data values to pixel positions, with custom SVG components for the axes and marks. The ReactDropdown library provides the menu interface, while D3's csv parser loads the data and applies type coercion to numeric fields. The plot features formatted axis ticks and tooltips via SVG title elements.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset with interactive dropdown menus for selecting which flower measurements to plot on the x and y axes. The menus allow users to switch between sepal length, sepal width, petal length, petal width, and species for either axis, with axis labels updating accordingly. The visualization uses D3's `scaleLinear` for scaling, React's `useState` for managing selections, and renders an SVG with tick marks, axis labels, and circular marks.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React” into the browser. It uses React 17 and ReactDOM to mount a functional `App` component to the `#root` element defined in the HTML. The page is set with hidden overflow and no margin, providing a blank canvas for the component output. The code relies on `ReactDOM.render` and JSX syntax within the `index.js` file.

Loading thumbnail…

Menus with React - with HTML Native Select

This example demonstrates a basic menu selection interface built with React, showing how an HTML native `<select>` element can be used as a dropdown to choose a pet from a preset list. The selected value is tracked through React’s `useState`, and every change triggers a console log. The `Dropdown` component maps over an options array and renders `<option>` elements, using the `selected` attribute to mark the current choice. The code uses React 17 and ReactDOM, with the UI rendered into a root div and styled with large label and select text sizes.

Loading thumbnail…

World Map

This visualization displays a world map using the Natural Earth projection, with countries rendered as filled shapes in teal against a light gray graticule and sphere background. The map shows landmasses and interior boundaries between adjacent countries. Built with React and D3 v5, the code uses `d3.geoNaturalEarth1()` for projection, `d3.geoPath()` to generate SVG paths, and TopoJSON’s `mesh()` to compute country interiors. Geographic data comes from the `world-atlas` package’s countries-50m.json file, and rendering is done entirely through SVG elements.

Loading thumbnail…

Working with Time-Line Chart

This example shows a line chart of weekly temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using React, with D3’s `scaleTime` and `scaleLinear` for axis scaling and `line` with `curveNatural` for the path. Data is loaded via `d3.csv` from a remote CSV file, and axes are generated using custom React components that call D3’s `.ticks()` method.

Loading thumbnail…

Working with Time

This scatter plot visualizes weekly temperature readings in San Francisco, using time on the x-axis and temperature on the y-axis. The React-based visualization renders SVG circles, with axes built using D3’s `scaleTime` and `scaleLinear` APIs and tick generation via those scales’ `.ticks()` methods. Each circle includes a native SVG `<title>` tooltip showing the formatted timestamp. Data is loaded asynchronously from a CSV file using D3’s `csv` function and parsed with a custom row conversion, while `extent` and `.nice()` determine the scales’ domains.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping sepal length and width for individual flowers as circles. Built with React and D3 v5, the visualization renders as SVG, using D3's `scaleLinear` for axes and `extent` to compute domains. Custom `AxisBottom` and `AxisLeft` components generate tick marks, while `Marks` renders each data point with a tooltip showing the formatted x-value. The design employs a Poppins font, teal circles, and muted gray axis lines for a clean, modern aesthetic.

Loading thumbnail…

Stylized Bar Chart with React & D3

This example shows the populations of the top 10 countries in 2020 as a horizontal bar chart. The chart uses D3 scales (`scaleBand`, `scaleLinear`, `max`, and `format`) to position bars and axes, while React components render the SVG elements. Data is loaded as CSV from a GitHub gist using `d3.csv`, and custom axis components generate ticks and labels. Hovering over a bar reveals a tooltip with the formatted population value.

Loading thumbnail…

Axes (Bar Chart) with React & D3 - Refactored

This example shows a horizontal bar chart of the top 10 countries by population, using React to render SVG elements and D3 utilities for scales and data loading. The code imports `scaleBand` and `scaleLinear` from D3 to map country names and population values to pixel coordinates, while the `useData` hook fetches a CSV from a GitHub gist using D3’s `csv` method. Reusable React components define the axes and marks, with the bottom axis generating tick lines via `xScale.ticks()` and the left axis positioning labels from the band scale’s domain.

Loading thumbnail…

Axes (Bar Chart) with React & D3

This example renders a horizontal bar chart of 2020 population estimates for the top 10 countries, using React for the component structure and D3 utilities for data loading and scales. The code fetches CSV data via `d3.csv`, transforms the population column to numeric values, and maps it to bars with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes ticks are generated manually using `xScale.ticks()` and rendered as SVG `<line>` and `<text>` elements, while the bars are drawn as `<rect>` elements within an SVG container.

Loading thumbnail…

Margin Convention (Bar Chart)

This example shows a horizontal bar chart of the top 10 countries by projected 2020 population, using data from the UN Population 2019 dataset loaded via `d3.csv`. The visualization applies the margin convention by defining an SVG container with a fixed width and height, then translating a group element by the left and top margins. Bars are rendered as SVG `<rect>` elements, with positions and widths computed using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. React manages the component state and lifecycle, fetching the data with `useEffect` and rendering declaratively.

Loading thumbnail…

Fork of Axes with React & D3

This visualization displays the top 10 most populous countries as horizontal bars, with D3 scaleBand and scaleLinear handling the categorical y-axis and numeric x-axis respectively. The React component loads UN World Population Prospects 2019 data from a CSV URL, then renders SVG rectangles and tick marks. D3's max and ticks functions compute the scale domain and axis intervals, while React's useState and useEffect manage the asynchronous data loading and render the Loading placeholder.

Loading thumbnail…

Rendering Barchart with React & D3

A horizontal bar chart displays the top ten countries by 2020 population, loaded from a CSV file using D3's `csv` utility. React components render each bar as an SVG `rect` element, with D3's `scaleBand` and `scaleLinear` mapping country names to y-positions and population values to bar widths. The chart updates reactively when data loads, showing a "Loading..." message initially.

Loading thumbnail…

Rendering Data with React - Pie Chart

This example shows a pie chart of CSS named colors, with each color rendered as a slice of equal size. The chart loads data from a CSV file using D3's `csv` utility, then passes it to React, which creates SVG `<path>` elements for each slice. The `pie` and `arc` functions from D3 compute the path data, while React's `useState` and `useEffect` manage the asynchronous data loading. The visualization uses a yellow background circle with a black stroke, and the final SVG is rendered into the page via `ReactDOM.render`.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimal workflow for loading and summarizing external data within a React application. It uses the D3 utility `csv` to fetch a remote CSS Named Colors dataset, and React's `useState` and `useEffect` hooks to manage the asynchronous loading process. After retrieval, it displays a text summary generated by a custom `message` function, which reports the data's size in kilobytes, the number of rows, and the number of columns. The visualization itself is a plain text readout, with the loading state showing "loading" until the data arrives.

Loading thumbnail…

Mouse Follower

A yellow circle with a black outline follows the mouse cursor across an SVG canvas in real time. The React app tracks pointer movements via an `onMouseMove` event handler, storing the cursor’s client coordinates in state with `useState` and `useCallback`. D3 v7 is loaded for potential utility, though the core interaction relies on React’s rendering. The circle’s center position updates reactively, creating a direct, responsive visual link between input and output.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and output the contents of a CSV file containing CSS named colors. It shows the raw text data in the browser console without any visual rendering. The implementation uses the JavaScript `fetch` API and its `response.text()` method within an asynchronous `fetchText` function to retrieve the data from a remote GitHub Gist URL, then logs the parsed text to the console. The code illustrates a basic approach to loading external CSV data for potential further visualization, though no chart or graphical output is generated.

Loading thumbnail…

Smiley Face Part I

A grid of randomly generated smiley faces appears, each rendered as a yellow circle with a black stroke, two eyes, and a d3-arc mouth. The demo shows how React components compose a parameterized SVG face, with each face receiving randomized values for stroke width, eye offset, eye radius, and mouth dimensions. Built with React and D3 v7, the code constructs each face using a `FaceContainer` and `arc()` from D3, while the `App` component maps over a range to produce 18 unique faces.