C

CodeDuckie99

@CodeDuckie99·18 public vizzes

Loading thumbnail…

Multiple Views with Brushing

This example presents a global map of missing migrant incidents, with circles sized by the total number of dead or missing. A linked date histogram beneath the map allows brush selection to filter the map’s data points interactively. The visualization uses React with D3 v6, employing `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `bin` with `timeMonths` for the histogram. Brushing is implemented via `brushX` and `scaleTime.invert`. Data comes from the Data Canvas Sense Your City dataset.

Loading thumbnail…

Fork of Missing Migrants on a Map

This interactive visualization combines a world map and a time-series bar chart to display the global distribution and monthly totals of missing migrants. The map uses D3’s `geoNaturalEarth1` projection with `geoPath` and `geoGraticule` to render landmasses and graticules, while circles sized by square-root scale represent the count of dead and missing per incident. A synchronized date histogram below, built with D3’s `bin` and `timeMonths`, aggregates the same data over time. The chart is rendered as an SVG using React, with data from a CSV of the Missing Migrants Global dataset.

Loading thumbnail…

Missing Migrants on a Map

This map visualizes missing migrant incidents worldwide, with each circle positioned at the incident’s coordinates and sized by the total number of dead and missing. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering landmasses, graticules, and interiors from the World Atlas TopoJSON. Circles scale with `scaleSqrt` based on the CSV data, while React manages state and rendering.

Loading thumbnail…

Missing Migrant Histogram

This histogram visualizes the cumulative count of dead and missing migrants over time, derived from a global dataset sourced via a GitHub-hosted CSV. The D3.js v6 `bin` and `timeMonths` APIs aggregate the data into monthly bins, which are then rendered as SVG rectangles. React manages the interactive chart’s composition, while D3’s `scaleTime` and `scaleLinear` handle axes, along with custom axis components. The visualization highlights temporal trends in migrant fatalities, with a tooltip providing exact totals per bin.

Loading thumbnail…

Working with Time

A scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` to map data domains to pixel coordinates. The `Marks` component renders circles for each data point, while the `AxisBottom` and `AxisLeft` components draw the axes. Data is loaded from a CSV file via D3's `csv` method, with timestamps parsed as `Date` objects and temperatures converted to numbers.

Loading thumbnail…

Points on a Map

This example visualizes the geographical distribution of cities from the Data Canvas Sense Your City Dataset, plotting each city as a point on a natural Earth projection of the world. The map is rendered in SVG using React, with d3.geoNaturalEarth1 and d3.geoPath drawing the sphere, graticules, landmasses, and country interiors from TopoJSON data. A supplementary scatter plot layer would likely show quantitative city attributes, though the current code only displays the spatial positions. The styling uses custom CSS classes for land, sphere, and graticule fills.

Loading thumbnail…

Interactive Color Legend Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization uses a dropdown menu to switch between different measurement attributes for both the X and Y axes. Hovering over the color legend highlights points of a selected species while fading the others to opacity 0.2. The React-based application leverages d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading and scaling, rendering the SVG chart with custom React components for axes, marks, and the interactive legend.

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, plotting measurements like petal length and sepal width against each other. It uses color to distinguish the three Iris species, with a dropdown menu letting users select which attributes appear on the X and Y axes. Built with React, D3, and rendered as SVG, the code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components that leverage D3's `scaleLinear` and `scaleOrdinal` for scaling, along with tooltips showing values on hover.

Loading thumbnail…

New Menus

This example demonstrates a reusable dropdown menu component built with React and the useState hook. It displays a list of pet options—dog, cat, hamster, parrot, spider, and goldfish—with a default selection of hamster, and logs the currently selected value to the console. The Dropdown component takes options, an id, a selected value, and a change handler as props, rendering a native HTML select element. The app uses ReactDOM to mount the component, with styling applied via CSS for large text and a hidden overflow.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between different flower measurements by selecting which attributes appear on the x and y axes via two dropdown menus. The visualization is built using React with D3.js v6, rendering SVG circles with tooltips that show precise values on hover. The code uses D3's `scaleLinear`, `extent`, and `format` functions for axis scaling and tick formatting, while the custom `AxisBottom`, `AxisLeft`, `Marks`, and `Dropdown` components demonstrate a modular approach to building interactive charts within a React framework.

Loading thumbnail…

Menus with React

This example shows a pet-selection interface with a large dropdown menu. It demonstrates React state management, where selecting an option from the menu updates the displayed value and logs the selection to the console. The code uses React’s `useState` hook to manage the selected value and ReactDOM’s `render` method to display the app. A reusable `Dropdown` component handles menu rendering, with options defined as an array of objects.

Loading thumbnail…

React Starter

This example shows a smiley face built from modular React components, rendered as SVG. It assembles a yellow circle background, two eyes, and a curved mouth within a centered group. The face’s dimensions and features are controlled via props passed between components. It uses React 17 for component composition and the D3 `arc` generator to create the mouth path. The visualization demonstrates a reusable, declarative approach to constructing SVG graphics with React.

Loading thumbnail…

World Map

This world map uses a Natural Earth projection to display global landmasses and country borders. The visualization layers graticules, a sphere outline, land areas in teal, and interior boundary lines, all rendered as SVG paths. Built with React and d3-geo, it loads TopoJSON data from the World Atlas dataset, using d3.geoNaturalEarth1 and d3.geoPath to project features, while topojson.mesh draws country borders.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that renders the text “Hello HTML” in large, centered type via inline CSS. It demonstrates basic web integration by embedding a script that logs “Hello JavaScript!” to the browser’s console. The code relies on plain HTML elements, a `<style>` block, and a `<script>` tag, with no external libraries or frameworks. It serves as a bare-bones starter for understanding how CSS and JavaScript interact within a single document.

Loading thumbnail…

Loading and Parsing CSV Data

This example shows a grid of cartoon faces, each with randomized facial features, rendered as SVG elements within a React application. The code uses D3’s `range` function to generate an array of 18 faces, and each face is composed of reusable React components for the background circle, eyes, and mouth. The mouth’s arc is drawn using D3’s `arc` generator with dynamically assigned radius and width values. No external data is loaded; the visualization is purely generated from randomly varied parameters.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates a minimal HTML page that loads and parses CSV data, displaying the text “Hello HTML” in large, centered type with a 13em font size. The page includes embedded JavaScript that logs “Hello JavaScript!” to the browser console, serving as a basic introduction to combining CSS and vanilla JavaScript without external libraries. The code uses the native `console.log` API to output messages, while the HTML structure and inline styles define the visual layout. No actual CSV file is loaded or parsed in the provided code, only the initial setup for future data handling.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that renders the text “Hello HTML” in large, centered type via inline CSS. It demonstrates basic web integration by embedding a script that logs “Hello JavaScript!” to the browser’s console. The code relies on plain HTML elements, a `<style>` block, and a `<script>` tag, with no external libraries or frameworks. It serves as a bare-bones starter for understanding how CSS and JavaScript interact within a single document.