Ktuzinowski

Voronoi Overlay with Labels

This example displays cumulative COVID-19 death totals over time for countries with more than 10,000 deaths, using the Johns Hopkins Coronavirus Dataset. A log-scaled line chart renders each country’s trajectory, with a Voronoi overlay from `d3.Delaunay` enabling hover interactions that highlight the nearest data point and show a labeled tooltip with the country name and death count. The chart is built with React and SVG, using D3 scales (`scaleTime`, `scaleLog`) and axis generators to structure the visualization.

Aug 24, 2021

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, displaying four measured flower attributes as colored points representing species. Users select which attributes to plot on the X and Y axes through React dropdown menus, with point colors determined by species using d3.scaleOrdinal. The visualization uses React hooks for state management and d3's scaling, axis, and CSV parsing functions (d3.csv, d3.scaleLinear, d3.extent, d3.format) to render marks as SVG circles.

Aug 13, 2021

Multiple Views with Brushing Interactive Map

This interactive dashboard displays missing migrant data on a world map alongside a time-series histogram, with brushing on the histogram filtering the map’s bubble markers in real time. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering land and graticules, while circles scale by square root of death counts via d3.scaleSqrt. The histogram bins monthly totals with d3.histogram and enables linked brushing through d3.brushX. Built with React and D3 v5, it renders SVG elements and sources data from a CSV of reported migrant incidents.

Aug 13, 2021

Some Face

This example is a static, non-interactive HTML page that presents a simple abstract face. The entire shape is constructed using a yellow circular container with two black circular elements inside it to represent eyes. The code uses only basic HTML and CSS, without any JavaScript data libraries. The visual is created through a grid layout, border-radius properties for circles, and margin offsets to position the eyes within the face, resulting in a minimalist, cartoon-like rendering.

Aug 13, 2021

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, with countries shaded on a yellow-to-red sequential scale based on infection rates. Countries lacking data appear gray. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world map features from TopoJSON, while d3.scaleSequential and interpolateYlOrRd map data values to colors. React manages the component state, fetching and joining CSV data with country codes to match each nation’s geographic ID.

Aug 6, 2021

Coronavirus Line Chart with Marker Line

This line chart displays the global cumulative COVID-19 death toll over time from the Johns Hopkins dataset, with a vertical marker line at the current date and a horizontal marker line at the one-million-death threshold. The visualization uses React to render an SVG path generated by d3.line, with d3.scaleTime and d3.scaleLinear mapping dates and death totals. Marker lines are drawn as separate React components (XMarkerLine, YMarkerLine) using d3 scales for positioning, while the data is loaded and parsed via d3.csv.

Aug 2, 2021

Diagram of Stuff

This diagram maps relationships between arts organizations and their affiliated projects as an interactive force-directed network. Four color-coded main nodes represent umbrella organizations, with smaller linked circles for child initiatives and leaf nodes. Using D3.js v7, the visualization employs d3.forceSimulation with forceLink and forceManyBody to position elements, while dragInteraction enables users to move nodes. SVG circles, lines, and text labels render the interconnected structure derived from the custom data.js assembly logic.

Aug 2, 2021

Coronavirus Deaths Over Time With Voronoi Overlay

This visualization tracks global cumulative COVID-19 deaths over time using a log-scaled line chart. Each line represents a country with over 10,000 deaths, sourced from the Johns Hopkins Coronavirus Dataset. The chart renders multiple time series as SVG paths, with a highlighted blue line for the currently hovered country. A Voronoi overlay, built with d3.Delaunay and d3-delaunay, assigns each point to a cell, enabling intuitive mouse interaction that triggers hover detection across all lines. The React-based implementation uses D3 scales, axes, and line generators.

Jul 31, 2021

Coronavirus Deaths Overtime By Country

This visualization displays cumulative COVID-19 death totals over time for countries exceeding 50,000 deaths, using data from the Johns Hopkins Coronavirus Dataset. It uses a logarithmic y-scale to accommodate the wide range of values. Each country is represented as a colored line generated with d3.line, and the chart is rendered as an SVG within a React application using d3.scaleTime, d3.scaleLog, and axes from d3.axisBottom and d3.axisLeft. Custom marker lines are available but not currently rendered.

Jul 31, 2021

Visualization Labels

This example visualizes global cumulative COVID-19 deaths over time using a line chart. The chart displays a logarithmic y-axis and a time-scaled x-axis, with all data aggregated from the Johns Hopkins Coronavirus Dataset, which the code loads and parses via `d3.csv`. The visualization is rendered as an SVG using React components, with axes and gridlines generated by `d3.axisBottom` and `d3.axisLeft`. The line path is drawn using `d3.line` with `scaleTime` and `scaleLog` mappings, and the chart includes descriptive labels for both axes and the title.

Coronavirus Log Y Axis

This example visualizes the global cumulative death toll from the Johns Hopkins Coronavirus Dataset using a line chart with a logarithmic y-axis. The chart displays total deaths over time, with marker lines highlighting the current date and the 4,000,000 death threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLog` to map dates and death counts, while the `line` generator creates the path and `axisBottom` and `axisLeft` render axes. Data is loaded via `csv` and parsed with `timeParse`.

Coronavirus Linear Y Axis

This visualization displays cumulative COVID-19 deaths over time using a standard linear y-axis, drawn as an SVG path. It loads global death data from the Johns Hopkins CSSE time-series dataset via `d3.csv` and parses dates with `d3.timeParse`. The chart uses `d3.scaleTime` and `d3.scaleLinear` for its axes, with gridlines generated by `d3.axisBottom` and `d3.axisLeft`. React manages the component structure, while D3 v7 handles the line generation with `d3.line` and scales.

Coronavirus Deaths with D3 Axis

This example visualizes the global cumulative death toll from the Johns Hopkins Coronavirus Dataset as a line chart over time. The chart plots daily totals, with a bold black line for the trend, and highlights two reference points: a horizontal marker at 4,000,000 deaths and a vertical “now” marker at the latest date in the data. Built with React and d3.v7, it uses `scaleTime`, `scaleLinear`, and `line` from D3 to generate the path, while `axisBottom` from D3 renders the x-axis with gridlines. The SVG output is styled with CSS, and the data is fetched and parsed via `csv` and `timeParse`.

Summarizing Coronavirus Data

A single number dominates the page: the total global COVID-19 deaths, calculated as of the most recent date in the Johns Hopkins time-series dataset. The visualization reduces the entire pandemic’s toll to one large, red statistic, formatted with commas. The code loads the CSV with `d3.csv`, sums the latest column of death counts using JavaScript’s `reduce`, and displays the result via React by setting `textContent` on a `<pre>` element. It uses d3’s `format` helper to add comma separators.

Log Scale of Missing Migrants over Time

This scatter plot visualizes events from the Missing Migrants Dataset, showing the relationship between reported date and total dead or missing individuals. Each circle represents a single event, with time on the x-axis and a log-scaled y-axis to accommodate the wide range of values. The visualization uses D3 v5’s `scaleTime` and `scaleLog` for axis scaling, with React components rendering SVG marks, axes, and labels. Tooltips provide formatted date information on hover through SVG `<title>` elements.

Interactive Migrant Map

A world map with semi-transparent circles plots locations of missing migrants, sized by the square-root-scaled count of dead and missing individuals. A time-series histogram below aggregates the same data by month, using `d3.bin` and `d3.timeMonths` to compute totals. React composes the two views, while `d3.geoNaturalEarth1` and `d3.geoPath` render the graticule, land, and country interiors from TopoJSON. Both charts are drawn as SVG, with circles and bars colored in teal against a light gray basemap.

Missing Migrants on a Map

This map shows the global distribution of missing migrants, with each circle sized according to the reported total number of dead and missing individuals. The visualization uses a natural Earth projection to render land masses, graticules, and country interiors as SVG paths. Circle radii are scaled using `d3.scaleSqrt` based on data loaded from a CSV file, while geographic features are processed from a TopoJSON source using `topojson.feature` and `topojson.mesh`.

Points on a Map

This example visualizes the global distribution of cities, with circle size encoding each city’s population using a square-root scale. A Natural Earth projection renders landmasses, graticules, and country borders via `d3.geoPath` and `geoNaturalEarth1`, while city points are positioned using the same projection. Data comes from a CSV of world cities and TopoJSON world-atlas geometry, all drawn as SVG within a React component.

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each species represented by a distinct color. The visualization uses React and d3-scale functions (scaleLinear, scaleOrdinal) to map data to positions and colors. Hovering over the color legend highlights only the points belonging to that species while fading all others, with the legend item and matching data points responding to mouse events. The chart renders as SVG with custom AxisBottom and AxisLeft components.

Menus with React

This example demonstrates a pet-selection menu built entirely with React, showing how dropdown state updates the displayed choice. It renders a labeled `<select>` element with five hard-coded options (goldfish, cat, hamster, spider, parrot) and initializes the selection to "hamster." The `Dropdown` component receives `options`, `selectedValue`, and an `onSelectedValueChange` callback, leveraging React’s `useState` hook to manage the selected value and update the UI on each change. The code uses React 16.9 and ReactDOM to mount the app, with custom styling applied via inline CSS.

Jul 28, 2021

World Map

This example displays a world map using a Natural Earth projection, rendering landmasses in teal with graticules and a light gray sphere background. Country borders appear as thin gray lines, with interiors drawn separately. The visualization loads GeoJSON from the world-atlas TopoJSON source, converting it with topojson’s `feature` and `mesh` APIs. React manages the component structure, while d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle projection, path generation, and grid lines. The SVG output is styled via CSS classes, with a loading state before data arrives.

Jul 28, 2021

Working with Time, Stylized Line Chart

This stylized line chart visualizes temperature readings from San Francisco over the course of a week. The temperature data is loaded via a CSV file using d3.csv, with timestamps parsed as JavaScript Date objects. d3.scaleTime maps timestamps to the x-axis, while d3.scaleLinear handles the temperature range, with axes rendered as SVG elements. The line path uses d3.line with curveNatural smoothing, and each data point includes an SVG circle with a native tooltip title. Poppins font and teal styling give the visualization a modern, clean appearance.

Jul 27, 2021

Bar Chart Creation

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using a D3 scaleBand for the y-axis and a scaleLinear for the x-axis. Built with React, it loads CSV data via d3.csv and renders SVG rectangles for each bar. The chart includes formatted population labels on the bottom axis using d3.format, with axis components defined in separate React files. The x-axis label, axis ticks, and bar styling are all customized through CSS classes.

Jul 26, 2021

Stylized Scatter Plot

This scatter plot visualizes the iris dataset, showing petal length against sepal width as individual teal circles. Built with React and SVG, the chart uses d3.scaleLinear with .nice() to construct the axes and d3.extent to compute the domain. Axis components render tick marks and labels, while a tooltip on each circle exposes the x-value in a semantic title element. Data loading is handled asynchronously via d3.csv, with the results stored in React state through a custom useData hook.

Jul 26, 2021

Fork of Axes with React & D3

This example visualizes the top 10 most populous countries as a horizontal bar chart using React state management and D3 scales. The code loads the United Nations World Population Prospects 2019 dataset via `d3.csv`, then uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Hand-rolled axis ticks are generated with `xScale.ticks()`, and the visualization renders through ReactDOM, with SVG elements created directly in JSX rather than using `d3.axis`.

Jul 25, 2021

Data Viz Pie chart

This visualization displays the CSS named colors as a pie chart, with each slice colored according to its corresponding hex value. The chart renders all color categories as equal-sized arcs using React to manage the data loading state and D3’s `csv` utility to fetch the dataset from a GitHub gist. Slices are drawn with `d3.arc` and `d3.pie` methods, producing an SVG output inside a React component. The example demonstrates a straightforward integration of React for UI state with D3 for data parsing and geometric layout.

Jul 25, 2021

Data Visualization with React and D3

This example demonstrates how React and D3 can work together to load and summarize a CSV dataset of CSS named colors. It shows a simple text output reporting the number of rows, columns, and file size in kilobytes. The code uses D3’s `d3.csv` to fetch and parse the remote data, then displays the computed metrics inside an HTML `<pre>` element. React manages the state of the loaded data, while D3 provides the data loading and formatting utilities.

Jul 25, 2021

Fork of Vega-Lite API Template

This example presents a horizontal bar chart visualizing population by country, with bars colored by religion. The visualization is built programmatically using the Vega-Lite API, which is registered with the Vega and Vega-Lite libraries. The `vl.markBar()` method encodes the country, population, and religion fields, while data is loaded from a CSV file using `d3.csv`. The chart is rendered as an SVG and configured with custom axis and label styles.

Loading Data in React

This example demonstrates how to load external data in a React application using D3 utilities. The component fetches a CSV file of CSS named colors via the `d3.csv` method, storing the result in React state with the `useState` and `useEffect` hooks. While loading, it displays “Loading...”; once the data arrives, it renders a summary showing the file size in kilobytes, row count, and column count using `d3.csvFormat` to measure the data length. The visualization is minimal, presenting the metadata as text in a `<pre>` element styled with large font size, with no graphical chart.

Loading and Parsing Data

This example demonstrates how to load and parse CSV data using D3.js v7, displaying the dataset’s row count, column count, and approximate size in kilobytes. The code fetches a CSV file of CSS named colors from a GitHub gist and processes it with the `d3.csv` method, which returns a parsed array of objects. It also shows an alternative approach using `fetch` and `d3.csvParse` in commented code. The results are rendered as plain text inside an HTML `<pre>` element.

Fork of Smiley Face Part II

A single yellow circle tracks the mouse across a full-window SVG canvas. The example demonstrates React state management with the `useState` and `useCallback` hooks, updating the circle's `cx` and `cy` coordinates on every `mousemove` event. Rendered with ReactDOM, it uses plain SVG circle elements without external visualization libraries. The code begins with an unused static smiley face layout, replaced by an interactive circle following the cursor.

Fork of Let's Make a Face Part I

This visualization shows a static, simple face made of three circles on a yellow background, with two smaller circles for eyes and a large circle for the head. It uses inline SVG elements—`<circle>` tags—to draw the shapes directly in the HTML, with no JavaScript libraries or data sources. The SVG canvas is set to 960 by 500 pixels, and the facial features are positioned using fixed coordinates and stroke styling. The example is a work-in-progress, as indicated by the title, representing an intermediate step toward a more complete face.