Cristina Macaraig

@creyme·13 public vizzes

Fork of Old Faithful Contour Plot

This visualization shows the Old Faithful dataset as a contour plot, with eruption time on the x-axis and waiting time on the y-axis. The density of data points is represented through filled contour regions using a sequential green color scale. The code uses d3-contour’s `contourDensity` to compute the contours, and `d3.geoPath` to render them as SVG paths. Axes are drawn with d3.axisBottom and d3.axisLeft, and moving the mouse dynamically updates the bandwidth of the density estimation, recomputing the contours in real time.

Jul 17, 2021

Loading thumbnail…

Fork of Changing Colors with Waves

A grid of circles animates in a wave-like pattern, with each circle's horizontal position and size fluctuating over time. The circles shift color between red and blue based on whether their current size exceeds a threshold, creating a dynamic, pulsing visual field. The example uses the Canvas 2D API, with `getContext('2d')`, `arc()`, and `fill()` to render the circles, while `requestAnimationFrame` drives the continuous animation loop. The pattern is generated procedurally using sine and cosine functions, with no external data source.

Jul 17, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v5 with an SVG rendering, scaling population values via `d3.scaleLinear` and country names via `d3.scaleBand`. It customizes the axes with `d3.axisLeft` and `d3.axisBottom`, applies a `.3s` tick format that replaces “G” with “B”, and removes default axis domain lines. The data is loaded from a CSV file using `d3.csv`.

Jul 17, 2021

Loading thumbnail…

Fork of Zip Code Trails

This example renders 960 by 500 pixel U.S. zip code trails as thin colored lines. It uses the `albersUsa` projection to display the geographic data derived from the `zipcodes.csv` dataset. The code employs the `vega-lite-api` to construct a line mark, with `d3` providing a hue-based color scale for the first three digits of each zip code, and a filter removes non-continental states. A fixed color mapping with nine hues visualizes regional groupings across the map.

Jul 17, 2021

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a world map of migrant deaths with a time-series histogram, allowing users to brush over the date axis to filter the map's data points. The map uses a natural Earth projection and size-scaled circles with D3's geospatial utilities, while the histogram presents monthly death counts. React manages the state and rendering, and D3's `brushX` API enables the linked selection between both views. The data comes from the Missing Migrants Global dataset, sourced from Simplemaps.

Jul 17, 2021

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a responsive SVG visualization that draws a green X spanning the full browser window. The chart container fills the page via CSS, and a `redraw()` function extracts the container’s `clientWidth` and `clientHeight` to set the SVG’s dimensions and position its two lines. Using D3 v5’s selection API (`d3.select`, `.append`, `.merge`), the code updates line coordinates and stroke properties on every window `resize` event, ensuring the graphic always matches the viewport.

Jul 17, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the complete set of CSS named colors as a radial burst, where each color slice is rendered as an SVG path arranged in a circle. The code loads color data from a CSV file using D3’s `csv` utility, then processes it with `d3.pie` and `d3.arc` to compute the slice geometry. React manages the component state and rendering, mapping each data point to a `<path>` element with its fill color set from the CSV’s RGB hex value. The visualization loads data asynchronously with React hooks, showing a loading message until the data arrives.

Jul 17, 2021

Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

A streamgraph visualizes the total number of persons of concern grouped by country of origin, summing categories like refugees, asylum-seekers, and internally displaced persons. The interactive D3.js v4 visualization uses `d3.stack` with a wiggle offset and inside-out ordering, rendering static SVG paths with d3-area, a time-based x-scale, and labels positioned via d3-area-label. Data is fetched from a remote JSON file, filtered to countries with over one million people, and interpolated across years using d3's bisector and date range methods.

Jul 17, 2021

Loading thumbnail…

Fork of Cities on a Globe

This visualization displays a three-dimensional globe with colored circles marking cities with populations over 100,000, drawn from preprocessed Geonames data. Users can drag to rotate the Earth and scroll to zoom, with smooth transitions between low- and high-resolution country boundaries from the TopoJSON World Atlas. The code uses d3.geoOrthographic for projection, d3.geoPath to render geographic features, and d3.drag with d3.zoom for interaction. Circle sizes scale with population using d3.scaleSqrt, and hovering reveals a city’s name and population via d3-tip tooltips.

Jul 16, 2021

Loading thumbnail…

Fork of Mouse Follower

A React application renders an SVG circle that tracks the mouse cursor across a 960 by 500 viewport. The component uses React's `useState` and `useCallback` hooks to manage and update the circle's center coordinates on every `onMouseMove` event. The circle starts centered and moves smoothly as the user's pointer travels over the SVG element, demonstrating basic interactive state management with React and SVG rendering.

Jul 16, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors CSV data, displaying a summary of the dataset's size, row count, and column count in a large text element. It uses D3 v5’s `d3.csv` method to fetch and parse the remote CSV file from a GitHub gist, then formats the output with `d3.csvFormat`. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a "pyramid of doom" pattern, highlighting different approaches to asynchronous data loading.

Jul 16, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React with SVG elements. It computes the width and height from `window.innerWidth` and `window.innerHeight`, centers the face at the middle of the screen, and draws a yellow circle with a black stroke as the head, plus two eyes positioned via `eyeOffsetX` and `eyeOffsetY`. The code uses React’s `createElement` and `ReactDOM.render` to mount the SVG dynamically, with the face scaling based on viewport dimensions.

Jul 15, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the early stages of building a smiley face using SVG shapes. A large yellow circle serves as the head, with two smaller black circles positioned for eyes, all rendered directly in the markup. The code defines specific coordinates and stroke widths to align the elements. It uses no external libraries, relying solely on static SVG elements within an HTML file, and the rendering is handled entirely by the browser’s SVG support.

Jul 15, 2021