M

mikekslv

@mikekslv·26 public vizzes

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This visualization presents a dual-panel view of missing migrant data. A world map uses semi-transparent circles to show the geographical distribution of total deaths and missing persons, with circle size scaled by the square root of the count. Below, a date histogram aggregates the same data over time, using monthly bins. The map is rendered with `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3. The histogram leverages `scaleTime`, `scaleLinear`, `bin`, and `timeMonths` to compute the bar chart. Both views are composed in a React component, reading data from a CSV file containing reported incidents.

Loading thumbnail…

Fork of Fork of Fork of Polished World Map

This map shows the global distribution of migrants who died or went missing in 2019, using circles sized by the square-root-scaled count of total dead and missing. The visualization combines a natural Earth landmass projection with a graticule and sphere outline, rendered in SVG via React components that separate the bubble layer from the geographic base. It uses d3.geoPath for map projection, d3.scaleSqrt for circle sizing, and d3.csv to load the Missing Migrants subset. The map is drawn with d3.geoGraticule for the overlay grid and d3.geoNaturalEarth1 for the projection.

Loading thumbnail…

Fork of Fork of Polished World Map

This example presents a global map of missing migrants, using circles sized by the total number of dead and missing per location. The visualization renders geographic features with `d3.geoNaturalEarth1` and `d3.geoPath`, including graticules, landmasses, and country borders, while proportional circles are drawn over the projected coordinates. The code combines React with D3 v5, loading world atlas TopoJSON data and a CSV of migrant incidents, then scales circle radii using `scaleSqrt`. The map is rendered as SVG with a natural Earth projection, highlighting spatial patterns in the data.

Loading thumbnail…

Fork of Fork of Working with Time

This histogram visualizes the total number of dead and missing migrants over time, with monthly bins along the x-axis and aggregated death counts on the y-axis. It uses d3.csv to load the Missing Migrants dataset, d3.bin with timeMonths thresholds to group reported dates, and d3.scaleTime and d3.scaleLinear to map the data. React components render the SVG axes and rectangular marks, with CSS styling for ticks and bars.

Loading thumbnail…

Fork of Working with Time

This example visualizes the number of total dead and missing migrants over time, with each circle representing a reported incident plotted along a time-based x-axis and a linear y-axis. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `extent` to map the data, while custom React components render the axes and SVG circles. The dataset is loaded asynchronously via `d3.csv` from a GitHub gist, and includes native SVG tooltips using the `<title>` element.

Loading thumbnail…

Fork of Polished World Map

This example displays a natural Earth projection world map with country boundaries, graticules, and city markers scaled by population. The visualization uses React to render SVG elements, with d3-geo’s `geoNaturalEarth1` and `geoPath` for the projection and paths, and `geoGraticule` for the grid. City data comes from a CSV of world cities, with population values mapped through d3’s `scaleSqrt`. Land and interior borders are derived from World Atlas TopoJSON via topojson’s `feature` and `mesh` functions.

Loading thumbnail…

Interractive Color Legend

This interactive scatterplot displays the Iris flower dataset, plotting petal length against sepal width and coloring each point by species. A custom SVG color legend allows hovering over species names to highlight matching points while dimming others through opacity changes. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and a `ColorLegend` component with `onMouseEnter` and `onMouseOut` event handlers. Data is loaded asynchronously via `d3.csv`, with points rendered as SVG circles.

Loading thumbnail…

color Stylized Scatter Plot

This scatter plot displays the Iris dataset, mapping petal length and sepal width along the x and y axes, with species color-coded using a categorical scale. The visualization uses React with D3 v5, rendering as an SVG. It uses d3.scaleLinear for axes, d3.scaleOrdinal for the color legend, and d3.csv for data loading. The legend and axes are custom components, with circles sized at a constant radius.

Loading thumbnail…

color scattere plot

This interactive scatter plot visualizes the Iris flower dataset, allowing users to compare any two numeric attributes by selecting them from dropdown menus. The chart renders circles for each data point using SVG, with axes and tick marks generated from D3 scales and formatting. Written in React with D3 v5, the visualization updates the x and y scales and re-renders marks whenever the user changes the selected attributes. The Iris dataset is loaded as CSV and parsed with d3.csv.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal dimensions by selecting attributes from dropdown menus for the x- and y-axes. Built with React and D3 v5, it renders SVG marks with tooltips showing formatted values. The chart updates scales and axes in response to menu changes, demonstrating how to combine React state management with D3's `scaleLinear`, `extent`, and `csv` data loading.

Loading thumbnail…

Fork of Fork of Refactored Barchart

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select which attribute appears on the X and Y axes via dropdown menus, allowing exploration of relationships between all four numeric measurements. The visualization renders as SVG circles using React components, with D3's `scaleLinear` and `extent` functions mapping data to coordinates. Axes are generated manually with `.ticks()` and custom formatting, while CSS styling controls circle and tick appearances.

Loading thumbnail…

Fork of Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a list of options. The interface shows a label and a styled `<select>` element that logs the chosen value to the console. The code uses React hooks (`useState`) to manage the selected value and a reusable `Dropdown` component that maps over an options array. ReactDOM renders the app to the DOM, with dependencies loaded via React and ReactDOM production UMD files from `unpkg.com`.

Loading thumbnail…

fork React starter code

This example demonstrates a simple pet-selection interface built with React. It shows a dropdown menu that lets users choose a pet from a list of six options, including dog, cat, hamster, and parrot. The code uses React's `useState` hook to manage the currently selected value and a custom `Dropdown` component that renders an HTML `<select>` element. The `onChange` event handler updates the state whenever the user makes a selection. ReactDOM renders the `App` component into the `#root` div, with the interface styled via embedded CSS.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a simple smiley face rendered as a static React component, displaying the text “Hello React” in the center. Built with React 16.9 and D3, the visualization uses React’s `ReactDOM.render` to mount the app to the DOM, while D3 handles any underlying data-binding or shape generation. The page is styled with CSS to remove margins and hide overflow, creating a clean full-viewport canvas. The code references `react` and `react-dom` UMD builds, and relies on a bundled `index.js` that defines the App component, though no dynamic data or interaction is visible in the provided files.

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a world map rendered with an equal-earth projection, with countries filled in teal against a light gray sphere. It uses D3’s `geoEqualEarth` for projection, `geoPath` to generate SVG paths from TopoJSON data loaded via `topojson.feature` from the world-atlas dataset. The visualization is built as a React component, where a `Marks` component renders each country path, and a loading state displays until the asynchronous data fetch completes.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature trends over time, with circular data points connected by an implicit line. The visualization uses React for component structure and d3.scaleTime and d3.scaleLinear for scales, while d3.extent computes data domains. Axes are custom React components using SVG lines and text elements, with tooltips provided by SVG title tags. Data comes from a CSV file loaded via d3.csv, rendering San Francisco weekly temperature readings in a clean, minimalist aesthetic.

Loading thumbnail…

Fork of Refactored Barchart

This example displays a horizontal bar chart ranking the ten most populous countries in 2020, using population data loaded via D3's `csv` function from the United Nations dataset. Built with React and D3 v5, it renders SVG bars with a linear x-scale for population and a band scale for countries, formatted in billions. The code defines reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with hover tooltips provided by SVG `<title>` elements.

Loading thumbnail…

Refactored Barchart

This horizontal bar chart displays the population of ten countries from the UN Population 2019 dataset. React renders SVG elements, while D3’s `scaleBand` and `scaleLinear` position bars and axes. The `AxisBottom` and `AxisLeft` components generate ticks, and `Marks` maps data to rectangles with native `<title>` tooltips using `format(".2s")`. Population values are formatted as billions.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of 2019 population data for various countries, with bar lengths proportional to each country's population and bars stacked vertically without spacing. The visualization is built using React and D3 v5, where D3’s `scaleBand` and `scaleLinear` map country names to y-coordinates and population values to bar widths within an SVG canvas. Data is loaded asynchronously from a CSV file via D3’s `csv` function, and the React component uses `useEffect` and `useState` to fetch and render the chart once the data arrives.

Loading thumbnail…

Rendering D3 and React

This example shows a React app that loads CSS named color data from a remote CSV file using D3’s `csv` method, then renders each color as a radial slice of an SVG pie chart. React state stores the fetched data, while D3’s `arc` generator calculates the path geometry for each slice, with the fill set to the color’s RGB hex value. The visualization uses a fixed outer radius and varying start angles, producing a fan-like layout centered in the SVG.

Loading thumbnail…

Fork of Mouse Follower

This example displays summary statistics for a dataset of CSS named colors, showing the file size in kilobytes, row count, and column count as large text. It loads the data from a CSV file using the `d3.csv` function, stores it in React state, and then formats the statistics with `d3.csvFormat` to calculate the byte size. The visualization uses React hooks like `useState` and `useEffect` to manage data loading, and renders the message in a `<pre>` element as faily large text.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of the world’s top five religions across countries using a bubble chart, where each circle’s size represents population. The visualization is built with Vega-Lite’s API, leveraging `vl.markCircle` for the marks and encoding position by country and religion, with `vl.size().fieldQ('population')` for scaling. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the chart is rendered to SVG through `vega` and `vega-lite` with a custom tooltip from `vega-tooltip`. A custom `config.js` adjusts font sizes and colors for readability.

Loading thumbnail…

Loading and Parcing CSV Data

This example demonstrates how to load and parse CSV data in D3.js, displaying the file size, row count, and column count as large text. It uses the `d3.csv` method to fetch and parse a remote CSV file containing CSS named colors, then formats the result with `d3.csvFormat` to calculate its size in kilobytes. A second, redundant approach fetches the same file with the Fetch API and parses the text using `d3.csvParse`. The page relies on D3 v7 and updates a `<pre>` element with the computed statistics.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a yellow-bordered SVG canvas. The React application tracks the pointer's client coordinates and repositions a fixed-radius circle at that location. Using React's `useState` and `useCallback`, it updates the circle's `cx` and `cy` attributes on every mouse move. The `onMouseMove` handler on the SVG element captures the position, and ReactDOM renders the updated circle at the new coordinates.

Loading thumbnail…

Fork of Smiley Face Part1

This visualization displays a grid of smiley faces, each rendered as a yellow circle with black outlines, eyes, and an arc-shaped mouth. The code uses React components to compose the face parts, while d3’s `arc` generator creates the mouth path and the `range` function produces a large array to repeat the face instances. The SVG rendering approach centers each face within a container, and the repetitive layout emphasizes the pattern of identical, static facial expressions across the canvas.

Loading thumbnail…

Smiley Face Part1

A yellow smiling face drawn with SVG circles and a D3 arc path is centered on a 960×500 canvas. The React app uses the D3 `arc` API to generate a mouth from a semicircular arc with a specified inner and outer radius, while two black eye circles are offset horizontally. The face is rendered with a yellow fill, black stroke, and positioned via SVG transforms.