P

paularl

@paularl·17 public vizzes

Loading thumbnail…

Bowl of Fruit - General Update Pattern + TRASITIONS22

A bowl of apples and lemons animates through the general update pattern, with fruit entering, updating, and exiting the SVG scene. Circles and text labels update via data joins, while mouseover events dim the selected fruit. The example demonstrates D3 v5’s `selection.merge`, `.enter()`, and `.exit()` methods, alongside `scaleOrdinal` for color and radius, and `setTimeout` to trigger changes. Rendering uses SVG with D3 selections, showing a live transition between apple and lemon states.

Loading thumbnail…

COLORPLET INTERACTIVE

This interactive map uses D3.js to depict global economic data from the World Atlas TopoJSON and TSV files, coloring each country according to its economy classification. A zoomable Natural Earth projection via `d3.geoPath` shows the countries, while a custom `colorLegend` component allows users to click on legend items to highlight matching regions. The map uses `d3.scaleOrdinal` with `d3.schemeSpectral` to assign colors, and dims non-selected countries by adjusting their opacity. The visualization demonstrates fundamental D3 data-binding and event handling through reusable function patterns.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, with data sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, sorted by final temperature. The visualization uses d3.line with curveBasis for smoothing, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by city. A custom colorLegend function renders the categorical color scale, while axis labels and a title contextualize the chart.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores relationships between attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let the user select which columns to plot on the x and y axes. Built with D3 v5, it uses the `scaleLinear` and `axisLeft`/`axisBottom` APIs to render axes, while a custom `dropDown` module handles menu creation. Points animate smoothly between states using D3's `.transition().delay()` methods.

Loading thumbnail…

PIB municipios do Brasil

This map shows the gross domestic product (GDP) per capita for municipalities in Rio de Janeiro, Brazil, using a green sequential color scale. Users can click on legend ranges to filter the map and a linked scatter plot, which plots GDP per capita against estimated population. The visualization uses D3 v5 with `d3.geoMercator` and `d3.geoPath` for map projections, `d3.scaleSequential` for coloring, and a custom `colorLegend` component. The data is loaded from external files and rendered as SVG.

Loading thumbnail…

COLORPLETH

A choropleth map visualizes countries' economic classifications using an ordinal color scale. The map renders via the `d3.geoPath` and `d3.geoNaturalEarth1` projection, with country data sourced from the `world-atlas` package. A legend, built with a custom `colorLegend` function, lists each economy type. The map is zoomable and interactive, with hover effects changing fill color and a `title` element showing country names and values.

Loading thumbnail…

Legend and colors

This example demonstrates how to build reusable legends for mapping data values to visual encodings. A color legend uses an ordinal scale with fruit names and distinct hues, while a size legend applies a square-root scale to represent numeric ticks with circles of varying radii. The code defines `d3.scaleOrdinal()` and `d3.scaleSqrt()` with SVG rendering, and updates legends through enter/merge/exit selections. Both legends are generated as reusable functions called via `.call()`, with circles and text positioned using `spacing` and `textOffset` parameters.

Loading thumbnail…

Tree Test

A hierarchical tree layout arranges data from a CSV file by a categorical column, with each leaf sized according to a rollup sum. The visualization shows the nested structure of the data2.csv dataset, grouping entries by activity and rendering the resulting hierarchy as a tree with curved links. The code uses d3.nest, d3.hierarchy, and d3.tree to compute the layout, and d3.linkHorizontal to generate the connecting paths.

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion, displayed as a horizontal tree diagram. The layout derives from a JSON dataset containing the United Nations’ geographical groupings, with text labels at each hierarchy level sized by depth. The implementation uses D3 v5’s `tree` and `hierarchy` layouts to compute positions, `linkHorizontal` for the connecting paths, and `zoom` to enable panning and scaling. All rendering is done as SVG elements within a `g` container, styled with Playfair Display fonts and teal-colored links.

Loading thumbnail…

ISO Survey 2019 Brasil

This example shows the distribution of ISO certificates across economic sectors in Brazil, comparing counts for ISO 9001, 14001, 50001, and 27001. The visualization uses horizontal bar charts that animate between the four ISO standards at timed intervals, with bars widening to represent certificate counts. Built with D3 v5 and React, the code employs `d3.scaleBand` for sector positioning and `d3.scaleLinear` for value mapping, while `transition().duration()` animates the bar widths and fades title text. Data comes from the ISO Survey 2019 dataset, rendered as SVG with hover effects on bars.

Loading thumbnail…

Animated lines

This example visualizes the number of electric connections across Brazilian regions from 2014 to 2018, with each line representing a region in an animated line chart. The chart uses D3 v5 with SVG rendering and a React framework. Upon load, lines animate by drawing themselves using `stroke-dasharray` and `transition.attr` with linear easing, while hovering highlights individual lines in green. The chart includes axes with gridlines, a title, and region labels, with data loaded from a CSV file.

Loading thumbnail…

Responding to Resize

A bar chart ranks ten Brazilian electricity distributors by consumer count, using a horizontal categorical axis and a linear vertical scale. The visualization highlights a selected company in teal while others remain gray, responding to clicks that update the selection and re-render the chart via a callback. SVG rendering with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` displays the data, while `d3.zoom` enables panning and zooming on the chart group. The chart also includes rotated axis labels and tooltips showing each company’s exact consumer numbers.

Loading thumbnail…

WORLD MAP

This interactive world map displays country boundaries with a custom equirectangular-like projection, colored in muted green with cyan oceans. Hovering over a country highlights it in bright green. The visualization uses D3.js to load GeoJSON and TSV data from the world-atlas package, combining them to create SVG paths with country names via tooltips. It implements zooming through the `d3.zoom` module and renders the sphere and countries using `d3.geoPath` with the Natural Earth projection.

Loading thumbnail…

Bowl of Fruit - Click to Select

A circle for each fruit is drawn in an SVG, colored by type using a d3.scaleOrdinal color scale and sized by a d3.scaleOrdinal radius scale. Clicking a fruit selects it, triggering a black stroke on that circle via React state (`useState`) and a callback. The visualization uses React with the d3.v5 library for scaling; while commented-out code hints at planned transitions, the active implementation shows no animation.

Loading thumbnail…

Bowl of Fruit - General Update Pattern + TRASITIONS

A bowl of fruit demonstrates the D3 general update pattern with animated transitions for entering, updating, and exiting SVG circles. Apples and lemons are distinguished by color and radius scales, while data joins key on a unique id. The example uses d3-selection’s `.enter()`, `.merge()`, and `.exit()` methods, combined with `transition().duration(1000)` to smoothly animate circle positions, radii, and removal over timed state changes.

Loading thumbnail…

Bowl of Fruit - General Update Pattern + TRASITIONS

Five circles representing apples render in an SVG, then animate through a sequence of state changes: one is removed, one turns into a lemon, and another is filtered out. The example demonstrates the D3 general update pattern with enter, update, and exit selections. Using `d3.scaleOrdinal` for color and radius, it applies `transition().duration(1000)` to smoothly interpolate circle positions and sizes, with the exit selection shrinking to zero before removal.

Loading thumbnail…

HTML Starter

This example renders a dual-axis time series chart of S&P 500 stock prices and long-term interest rates from monthly data in a CSV file. The SVG visualization uses D3 v5 scales and axes, with two line generators for each metric and a filled area between them, though the area is nearly transparent. The chart displays the data over time with inverted y-axes and employs `d3.csv` for data loading and `scaleTime` for temporal mapping.