G

gregosaure

@gregosaure·22 public vizzes

Loading thumbnail…

Colorpleth Map with interactive filtering

This colorpleth map colors countries by their economy classification using an ordinal color scale. The visualization allows interactive filtering by clicking on legend items, which re-renders the map to highlight only the selected category. Built with React and D3 v5, it uses `d3.geoPath` with a natural Earth projection and draws countries as SVG paths from TopoJSON and TSV data loaded from the world-atlas package. Hovering a country turns it red, and the legend is rendered using the `colorLegend` component with custom click handling.

Loading thumbnail…

Colorpleth Map

This example, titled Colorpleth Map, visualizes global economic data by coloring each country on a natural Earth projection using a spectral color scale. The map renders geographic boundaries with `d3.geoPath` and supports zoom interaction via `d3.zoom`. A legend, built with custom D3 code, displays the ordinal color scale’s domain. The data is loaded from the `world-atlas` TopoJSON and TSV files, with countries colored according to their `economy` property.

Loading thumbnail…

Color and Size Legends

This example demonstrates two legends: a color legend for ordinal data and a size legend for quantitative data. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` with five ticks to map numeric values to circle radii. Both legends are rendered as SVG groups using reusable functions that handle enter, update, and exit selections. The code relies on D3 v5’s `selection.call`, `selection.merge`, and scale methods to create interactive-looking, standalone legend components.

Loading thumbnail…

World Countries Tree

This interactive world map displays the hierarchical structure of countries, organized by continent and subregion, as a horizontal tree diagram. The visualization uses `d3.hierarchy` to process the nested JSON structure and `d3.tree` to compute the layout based on the data's size and dimensions. A `d3.zoom` interaction is applied to the SVG container, allowing users to pan and scale the entire tree. The edges are rendered using the `d3.linkHorizontal` generator, while each node's label is positioned with a font size that inversely corresponds to its depth in the hierarchy, with the text styling set via CSS.

Loading thumbnail…

Blank Canvas

A blank, full-viewport SVG canvas is created, filling the browser window with a single rounded rectangle. The example demonstrates a minimal starting point for a visualization, with no data or marks drawn. The code uses D3 v5’s `select` function to target the SVG element, sets its dimensions to the document body’s client width and height, and appends a `rect` with a 40-pixel corner radius, all styled by a fixed-position CSS layout that removes margins and scrollbars.

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a zoomable world map rendered with SVG paths using D3.js. It shows country boundaries from the world-atlas TopoJSON dataset, with each country labeled by name via a title tooltip on hover. The visualization uses a natural Earth projection and implements pan-and-zoom interaction through d3.zoom, which applies a transform to the map group. Countries are colored light green and highlight red on hover, while the sphere background is dark blue. The code fetches both TopoJSON geometry and TSV country names concurrently with Promise.all.

Loading thumbnail…

Lets make a map!

This example renders a world map using a natural Earth projection, displaying countries as light green filled regions with subtle black borders against a dark blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset and uses D3 v5’s `geoPath` and `geoNaturalEarth!` projection, along with the `topojson` library’s `feature` method to convert TopoJSON into GeoJSON. The SVG output is generated through a React setup, with the sphere drawn first and country boundaries appended dynamically after data loads.

Loading thumbnail…

Bowl of Fruit - Hover to select

A bowl of fruit grows from nothing as five apples animate into place, each with a colored fill and a black outline on hover. The SVG visualization uses d3.select, d3.range, and d3.scaleOrdinal for color and radius, with a transition of 1000 milliseconds to update positions, sizes, and removals. The selection state is managed via mouseover and mouseout events, triggering a re-render that modifies the data, such as removing an apple or replacing one with a lemon.

Loading thumbnail…

Bowl of Fruit - click to select

Five fruit circles appear in a row, each clickable to select it with a black stroke. Animate with d3 v5 transitions, the bowl updates over time as apples are eaten or replaced by lemons. The code uses `scaleOrdinal` for color and radius, binds data by `id`, and implements enter, update, and exit selections with SVG circles.

Loading thumbnail…

HTML Starter

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are rendered as colored circles with labels, and the dataset changes over time through simulated eating and replacement actions. The visualization uses D3 v5 and React, with SVG rendering for the bowl shape and fruit elements. The code leverages D3’s `scaleOrdinal` for color and radius mappings, and employs data joins with `enter`, `merge`, and `exit` selections to update the scene. Timed `setTimeout` calls trigger modifications to the fruits array, showcasing incremental updates.

Loading thumbnail…

HTML Starter

This example demonstrates an empty SVG canvas sized 960 by 500 pixels, providing a minimal starting point for data visualization projects. The code imports D3’s `select` and `arc` functions within a React framework, though the visible rendering relies on a static `<svg>` element. D3 version 5 is loaded via CDN, with JavaScript bundled and executed from a separate `bundle.js` file. The visualization does not display any data or shapes, serving only as a clean template for future D3-based graphics.

Loading thumbnail…

HTML Starter

A fruit bowl animation demonstrates data-binding and transitions with D3 v5 in a React framework. Circles represent apples and lemons, colored via `scaleOrdinal` with red and yellow ranges. The `fruitBowl` function uses `selection.data`, `enter.merge`, and `exit` to update SVG circles, animating radius and x-position with `.transition().duration(1000)`. Timeouts trigger removal and type changes, showing enter, update, and exit patterns.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population growth from 1960 to 2015, using a filled area chart beneath a red dot for each year. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.area with curveBasis for the smooth region, and d3.axisBottom/axisLeft with tick formatting. Data loads from a CSV file via d3.csv. The SVG rendering includes labeled axes and a title, with population values formatted in billions.

Loading thumbnail…

Scatter Plot

This scatter plot displays hourly temperature readings in San Francisco over several days, with time on the x-axis and temperature on the y-axis. The visualization uses an area chart with a smooth curve to highlight temperature fluctuations, with data loaded from a CSV file via `d3.csv`. The code employs `d3.scaleTime` and `d3.scaleLinear` for axes, rendered as SVG with `d3.axisBottom` and `d3.axisLeft`. A red semi-transparent circle effect is applied using CSS, while the chart includes labeled axes and a title.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis. The chart includes titled axes, grid lines, and a smooth curve fitted through the data points. The visualization is built using D3 v5 within a React framework, rendering to SVG. The code loads data from a CSV file, uses `scaleTime` and `scaleLinear` for axes, and employs `curveBasis` for the fitted line.

Loading thumbnail…

Scatter Plot

This example plots temperature readings from a CSV file over time, showing the daily temperature cycle in San Francisco. The visualization uses D3 v5 with React, rendering an SVG scatter plot where each circle represents an hourly observation. The code employs D3’s `scaleTime` and `scaleLinear` to map timestamps and temperatures to coordinates, with `axisBottom` and `axisLeft` for labeled axes. The data is loaded via `d3.csv`, and circles are appended to the SVG with a fixed radius and red fill at reduced opacity.

Loading thumbnail…

Scatter Plot

This scatter plot charts the relationship between the number of coronary bypass grafts (nb) and cardiopulmonary bypass time (CEC) for individual patients. Each red semi-transparent circle represents one person, with the x-axis showing graft count and the y-axis showing bypass duration in minutes. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` functions, loading data from a CSV file and rendering SVG circles. Axis grids and labeled titles are styled via CSS, with the y-axis domain fixed to 40–220.

Loading thumbnail…

Scatter Plot

This scatter plot displays the number of interventions per procedure category, using a categorical y-axis and quantitative x-axis. SVG circles mark the values, with gridlines and axis labels for readability. The visualization is built with React and D3 v5, using functions like `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to map data from `data.csv`. Axis ticks are formatted and styled via CSS, and the plot includes a title and axis labels within an SVG canvas.

Loading thumbnail…

HTML Starter

This example shows a horizontal bar chart displaying the number of interventions across different procedure categories, such as "CAB alone" and "Valve alone." The data comes from a CSV file loaded via `d3.csv`. The chart uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars. A logarithmic tick format using `format` converts large numbers, and the chart includes custom axis labels and a title, all styled via an external CSS file.

Loading thumbnail…

HTML Starter

A yellow smiley face rendered as SVG shapes, with a blue circular head, black-outlined eyes, and a red arc mouth. Two rectangular eyebrows animate up and down in a continuous loop using D3 transitions. The face is centered via a translated group, with all elements positioned relative to that center. The code uses D3 v5 selection and arc generators, importing `select` and `arc` directly from the D3 module within a React project.

Loading thumbnail…

Patients Report

This example displays a text-based patient report generated from a static JSON dataset. It filters patients by an age threshold and formats each record into a single line containing name, birth date, and surgery cost. The React-based code uses `generateReport` to process the data and `document.getElementById` to inject the resulting plain text into an HTML `<pre>` element, rendering it with large, centered typography.

Loading thumbnail…

Patients Report

This example displays a text-based patient report generated from a static JSON dataset. It filters patients by an age threshold and formats each record into a single line containing name, birth date, and surgery cost. The React-based code uses `generateReport` to process the data and `document.getElementById` to inject the resulting plain text into an HTML `<pre>` element, rendering it with large, centered typography.