Q

qtrfx

@qtrfx·25 public vizzes

Loading thumbnail…

Fork of Working with Time

This visualization displays the total number of dead and missing migrants over time, binned by month to reveal temporal trends. The React-based code uses d3.csv to load the Data Canvas Sense Your City dataset, then applies d3.scaleTime, d3.scaleLinear, and d3.bin with d3.timeMonths thresholds to aggregate and render the histogram. Custom SVG axes are drawn with d3.ticks and timeFormat labels, while a native SVG `<title>` element provides hover tooltips. The interactive chart appears static but relies on React’s useEffect hook for asynchronous data loading and conditional rendering.

Loading thumbnail…

Stylised Line Chart

This stylised line chart displays temperature over time using data from a Missing Migrants Global 2019 subset CSV. The SVG rendering combines React components with D3 v7 scales and axes, including a smooth natural curve line via d3.line().curveNatural(). Time formatting uses d3.timeFormat("%a") for weekday labels, while Poppins font styling and teal-colored strokes create the distinctive visual design. Axis ticks leverage d3.ticks() implicitly through scaleTime and scaleLinear methods.

Loading thumbnail…

Points on a Map

This example visualizes global population data by plotting cities as semi-transparent circles on a Natural Earth projected world map. A square-root scale maps each city’s population to circle radius, with the largest cities appearing most prominent. The visualization uses React for component structure and D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations are loaded from a clean CSV dataset.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width and using color to distinguish species. The visualization includes a color legend that responds to hover events, dimming all data points except those matching the hovered species. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and SVG elements rendered declaratively through React components. The code implements hover interactions by tracking state and applying opacity transitions via the `ColorLegend` component.

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, mapping petal length and sepal width on the x and y axes while coloring each point by species. Built with React and D3 v5, the SVG chart uses `scaleLinear` and `scaleOrdinal` to position and color the circles, with a custom color legend and hover tooltips. The visualization eschews traditional chartjunk in favor of a minimalist design that emphasizes clear data-ink ratio through its stylized axes and typography.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which numeric attribute appears on the x-axis and y-axis, with axis labels updating dynamically. The visualization uses React with hooks for state management, d3-scale for linear scaling, and d3.csv to load data. SVG circles represent individual flowers, with native `<title>` elements providing hover tooltips. The styling features a clean Poppins font and muted teal markers against light gray axes.

Loading thumbnail…

Fork of Stylised Iris Scatterplot Graph

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, with scales and axes updating dynamically. The visualization uses React for state management and component rendering, while d3.scaleLinear handles axis scaling and d3.csv loads the data. Each point is rendered as an SVG circle with a native tooltip, styled with the Poppins font and teal color scheme.

Loading thumbnail…

Fork of React Starter

This example demonstrates a dropdown menu for selecting a pet, with the chosen value reflected in the select element’s highlighted option. It uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component that maps over an array of pet options. The component receives `options`, `onSelectedValueChange`, and `selectedValue` props, rendering a native HTML `<select>` element. The app updates the dropdown’s selection and logs the value to the console on change.

Loading thumbnail…

React Starter

This React Starter example renders a simple "Hello React!" message in a web page. It demonstrates the basic setup for a React visualization, using React and ReactDOM libraries to create a component and mount it into a root div element. The code imports React and ReactDOM, defines an App component, and uses `ReactDOM.render` to inject the component into the page. The accompanying `index.html` file loads React and ReactDOM from a CDN and references a `bundle.js` file, indicating a built React application.

Loading thumbnail…

React Starter

This React Starter example renders a simple "Hello React!" message in a web page. It demonstrates the basic setup for a React visualization, using React and ReactDOM libraries to create a component and mount it into a root div element. The code imports React and ReactDOM, defines an App component, and uses `ReactDOM.render` to inject the component into the page. The accompanying `index.html` file loads React and ReactDOM from a CDN and references a `bundle.js` file, indicating a built React application.

Loading thumbnail…

World Map

This example renders a natural Earth projection world map using D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs, with React managing the SVG output. Landmasses fill in teal, while graticules and interior boundaries appear as light and darker strokes, respectively. The map’s data comes from the `world-atlas` package, loaded via D3’s JSON fetcher and processed with TopoJSON’s `feature` and `mesh` functions to distinguish country interiors. The visualization presents a clean, stylized globe with a subtle sphere outline and a muted background.

Loading thumbnail…

Stylised Iris Scatterplot Graph

This stylised scatterplot visualizes the Iris dataset, plotting petal length against sepal width for 150 flower samples. Each point is rendered as a teal circle using SVG within a React component, with scales and axes built through d3.scaleLinear, d3.extent, and custom Axis components. The chart employs d3.csv for data loading and d3.format for tick label abbreviation, styled with the Poppins font. Axis ticks are gray, labels are muted, and hovering reveals tooltips via SVG title elements.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top 10 countries in 2020, sourced from the UN Population dataset. The data is loaded via `d3.csv` and rendered as SVG rectangles using React components, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Axis ticks are generated by `xScale.ticks()` with `d3.format` for SI-prefix labels, converting gigabytes to billions. The chart uses the Poppins font, teal marks, and a clean layout with custom margins and axis styling.

Loading thumbnail…

Refactored Bar Chart

This bar chart displays the top ten countries by population for 2020, using horizontal bars sorted by country name. The visualization is built with React for component rendering and D3 v7 utilities for data loading and scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is fetched via D3’s `csv` parser from a GitHub gist, with SVG elements composed from reusable React components like `AxisBottom`, `AxisLeft`, and `Marks`.

Loading thumbnail…

Axes with React & D3

This example demonstrates a horizontal bar chart of the top 10 most populous countries for 2020, rendered as SVG. It loads UN population data from a CSV URL using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading and re-render. The chart builds custom axes manually—D3’s `scaleBand` and `scaleLinear` position bars and ticks, while loops generate gridlines, axis labels, and text elements without using `d3.axis`. React components render each bar, tick, and label directly into the SVG.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention for bar charts, showing the top 10 countries by 2020 population from a UN dataset. The code loads CSV data with `d3.csv`, processes it using a row conversion function, and renders SVG rectangles via React. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.max` to compute the domain. A `<g>` element translates the chart by the specified margin, with the inner width and height calculated by subtracting margins from the full dimensions.

Loading thumbnail…

Fork of Rendering Data with React Radial Burst

This visualization uses React to render a bar chart of the top 10 countries by population in 2020, as provided by a UN population dataset. The code loads the data with D3's `csv` utility and maps the country names to the y-axis with `scaleBand` and population values to the x-axis with `scaleLinear`. Each bar is an SVG `rect` element generated through React's `map` function, with dimensions calculated from the D3 scales. The chart is presented as an SVG canvas within a React component, using the `useState` and `useEffect` hooks to fetch and process the data asynchronously.

Loading thumbnail…

Rendering Data with React Radial Burst

This example renders the CSS named colors as a radial burst, with each color represented by an equal-sized arc emanating from the center of the canvas. It uses React for all UI and SVG element creation, while D3’s `csv` utility loads the data and its `pie` and `arc` functions compute the angular segments and path geometry. The visualization works by mapping each row of the dataset to a `<path>` element whose fill is the hexadecimal color value from the data, producing a full circular spectrum of the named colors.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a multi-series line chart of daily temperature readings in San Francisco, with each line colored by its origin (such as weather station or measurement type). The visualization is built programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders with SVG, while integrating d3.csv for data loading and vega-tooltip for interactive hover details. Chart styling—including axis labels, title size, and dark text colors—is customized via a config object passed to the layout. The data comes from a gist-hosted CSV file containing timestamp and temperature fields.

Loading thumbnail…

Please work

This example demonstrates a minimal React and D3 integration, displaying metadata about a dataset loaded from a CSV file. It shows the file size in kilobytes, row count, and column count as large text. The code uses D3’s `csv` utility to fetch data from a remote URL, stores it in React state via the `useState` and `useEffect` hooks, and conditionally renders a loading message or the computed statistics. The message is generated using `d3.csvFormat` and string concatenation within a custom `message` module.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load a CSV dataset from a remote URL and display summary statistics about it, including file size, row count, and column count. The visualization uses React state to manage the data, with the `useEffect` hook triggering the `d3.csv` utility to fetch the dataset asynchronously. Once loaded, the data is formatted using `d3.csvFormat` to calculate its size in kilobytes. The interface renders the computed statistics in a large monospace `<pre>` element, initially showing “Loading…” until the data arrives. The example pulls the CSS named colors dataset from a GitHub gist.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v7’s `d3.csv` method, which fetches the data and returns an array of objects. The display shows the dataset’s size in kilobytes, row count, and column count. The CSV data comes from a gist containing CSS named colors. The code also includes a commented-out alternative using `fetch` and `d3.csvParse`, illustrating two ways to handle CSV text. The final message is rendered inside a `<pre>` element.

Loading thumbnail…

Mouse Follower

A circle follows the mouse pointer inside a static SVG viewport. The circle updates its position through React state management on mouse movement events. The React `useState` hook stores the mouse coordinates, and the `onMouseMove` handler on the `<svg>` element updates them, causing the circle to re-render at the new location. The example uses ReactDOM to render the SVG, with no data source beyond the cursor’s clientX and clientY values.

Loading thumbnail…

Mouse Follower

This example renders a friendly yellow face that follows the mouse using React and SVG. It uses React 16.9 and ReactDOM to render a static SVG circle with two smaller eye circles, positioned based on the window dimensions. The code reads the viewport width and height to center the face, but the mouse tracking behavior described is not implemented in the provided JavaScript, leaving the face fixed at the screen center. The example demonstrates React's declarative component structure for SVG rendering.

Loading thumbnail…

Smiley Face Part I

The visualization displays a stylized smiley face composed of a yellow circular background, two black eyes, and a curved mouth stroke. It demonstrates reusable React components for modular SVG composition, with each facial feature defined as a separate component. The mouth uses the `d3.arc()` API to generate a path with specified inner and outer radii and angular range. All elements are rendered in a single SVG container, positioned via a centered `<g>` transform, with hardcoded viewport dimensions of 960 by 500.