J

jesramyep1263

@jesramyep1263·88 public vizzes

Loading thumbnail…

Scatter Plot WIHT MENUES 3

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, letting users explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus, implemented with a custom D3 module, dynamically select which columns map to the x- and y-axes, triggering animated transitions of the plotted circles. The visualization uses D3 scales, axes, and transitions to update the chart smoothly, with an initial static Plotly chart embedded as a fallback.

Loading thumbnail…

Untitled

This animated scatter plot explores the relationships between various attributes of cars from the UCI Auto MPG dataset. Dropdown menus let users select different columns for the x- and y-axes, with circles animating from the center to their new positions over 2 seconds. Built with D3.js, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `transition().duration().delay()` for the animation effect. The visualization is rendered as an HTML page with Plotly’s `newPlot` for an initial static chart.

Loading thumbnail…

Fork of Fork of Coronavirus Deaths Over Time by Country5.1

This interactive line chart visualizes cumulative COVID-19 death rates over time for multiple countries, using data from the Johns Hopkins Coronavirus Dataset. A dropdown menu lets users select a country to highlight its trajectory in red. The visualization uses React for component structure and D3 v5 for scales, axis generation, and line rendering. A Voronoi overlay enables hover detection to display tooltips with the exact death count and date for nearby data points. The y-axis uses a logarithmic scale to accommodate the wide range of cumulative death values across countries.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let users select which numeric columns to map to the x- and y-axes, updating the visualization with an animated transition. Built with D3 v5, the chart uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes and gridlines, while SVG circles animate into position via `transition().delay()`. The menus are constructed with a reusable `dropdownMenu` function that binds `option` elements to column names.

Loading thumbnail…

Fork of Scatter Plot with Menus2

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes. Two dropdown menus let the user select which data columns map to the X and Y axes. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and scatterPlot.js renders circles with animated transitions on axis changes. SVG rendering with semi-transparent red circles reveals data density, while axis labels update dynamically to reflect selected columns.

Loading thumbnail…

Fork of Fork of Fork of Coronavirus Deaths Over Time by Country5.11

A multi-line chart tracks global COVID-19 cumulative deaths over time for each country, using a logarithmic y-axis. Hovering over the visualization activates a Voronoi overlay, built with `d3.Delaunay`, to highlight the nearest data point and display the country name, death count, and date. The React-based chart uses `d3.scaleTime`, `d3.scaleLog`, and `d3.line` to render SVG paths, with axis components from `d3.axisBottom` and `d3.axisLeft`. Data comes from the Johns Hopkins Coronavirus dataset.

Loading thumbnail…

Coravirus Deaths Over Time by Country by Voronoi

This visualization shows cumulative COVID-19 death counts over time for each country, displayed as thin gray lines on a logarithmic scale. When the user hovers over any point along a line, that country’s trajectory highlights in red and a tooltip appears with the country name, death count, and date. The interaction is powered by a Voronoi overlay constructed with `d3.Delaunay.from` and `voronoi.renderCell`, which assigns each data point a hover region. The chart is built with React, D3 v5, and SVG, using `scaleTime`, `scaleLog`, and data from the CSSE COVID-19 time series.

Loading thumbnail…

Fork of Coravirus Deaths Over Time by Country by Voronoi whit labels

This chart shows global coronavirus deaths over time, with each country’s cumulative death count plotted on a log scale across a shared time axis. All countries render as thin gray lines. When the user hovers over any point, the corresponding country’s line is highlighted in black and a tooltip displays the country name, total deaths, and date. The visualization uses React for component structure and D3 v5 for scales (time, log), line generation, and axes. Hover detection relies on a Voronoi overlay built with d3-delaunay, which assigns each mouse position to the nearest data point. Data comes from the CSSEGISandData COVID-19 time-series CSV.

Loading thumbnail…

Fork of Coravirus Deaths Over Time by Country by Voronoibien

This visualization shows global coronavirus death rates over time for multiple countries, with a log-scaled y-axis for cumulative deaths. Hovering over any line highlights that country’s trajectory and displays a tooltip with the exact death count and date. The chart uses React components with D3 v5 for scales, axes, and line generation, plus a Voronoi overlay (via `d3.Delaunay.from`) to enable precise mouse interaction. Data comes from the CSSEGISandData COVID-19 time series, processed in a custom hook to calculate rolling mortality rates.

Loading thumbnail…

Fork of Fork of Fork of Coronavirus Deaths Over Time by Country5.1

This visualization displays the global coronavirus death rate over time for multiple countries, with each line representing a country’s cumulative deaths on a logarithmic scale. A Voronoi overlay enables interactive hover detection, highlighting the nearest data point and displaying the country name, death count, and date. The chart uses d3.scaleTime, d3.scaleLog, and d3.line for rendering, with React managing state and SVG for output. Data is sourced from the Johns Hopkins COVID-19 dataset, processed to calculate mortality rates from death, confirmed case, and recovery time series.

Loading thumbnail…

Fork of Circle on the Map3

This visualization displays population projections for countries on a natural Earth map, with animated circles representing data values that transition across years (2030–2040) from a CSV dataset. It uses D3 v5 with `geoNaturalEarth1` and `geoPath` to render country boundaries, while `scaleSqrt` sizes the circles based on population values. The map supports zooming via `d3.zoom`, and a color legend and size legend accompany the chart. Data is loaded from CSV and TopoJSON files, with circles animating their radius and position over time.

Loading thumbnail…

Fork of Coravirus Deaths Over Time by Country by Voronoi2

This interactive visualization displays cumulative COVID-19 deaths over time for each country, with all series drawn as thin gray lines on a logarithmic scale. Hovering over any point highlights that country’s entire line and places a circle on the hovered data point. Built with React and D3 v5, it uses d3.Delaunay and d3.Voronoi to create invisible hover target cells for fast interaction, while d3.scaleLog and d3.line generate the chart. Data comes from the CSSEGISandData COVID-19 time series CSV, rendered as an SVG with axes from d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of Fork of Fork of Coronavirus Deaths Over Time by Country5.1

This chart displays global coronavirus deaths over time for each country as a series of thick, randomly colored polylines. It uses a logarithmic y-axis to show cumulative death totals and a time-based x-axis. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLog`, and `line` generators, with axes rendered by `axisBottom` and `axisLeft`. Data is sourced from the Johns Hopkins COVID-19 time series dataset, loaded via D3’s `csv` function.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

The chart displays cumulative COVID-19 deaths over time for each country, with a logarithmic y-axis to accommodate wide value ranges. Data comes from the Johns Hopkins COVID-19 dataset and is rendered as SVG paths using d3.line, d3.scaleTime, and d3.scaleLog within a React component. Each country’s time series is drawn with a randomly assigned stroke color, while axes are generated with d3.axisBottom and d3.axisLeft. The visualization also includes axis labels and gridlines, with raw data processed via Promise.all and csv parsing.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country1

This chart displays cumulative COVID-19 death totals over time for each country, using a log-scaled y-axis to accommodate wide disparities in magnitude. The visualization renders multiple colored line paths per country, generated with d3.line and scales from d3.scaleTime and d3.scaleLog, within an SVG framework built with React components. Data comes from the Johns Hopkins Coronavirus dataset, fetched via d3.csv and transformed into date-keyed series. Grid lines from d3.axisBottom and d3.axisLeft provide reference points, while the absence of a legend makes individual country attribution difficult.

Loading thumbnail…

Fork of Fork of Coronavirus Deaths Over Time by Country11

This visualization tracks cumulative COVID-19 deaths over time for each country, using a logarithmic y-axis to accommodate the wide range of values. The React-based chart employs D3 v5 scales and generators, with `scaleTime` for dates and `scaleLog` for death counts, rendering individual country trajectories as colored SVG paths. Data comes from the Johns Hopkins Coronavirus dataset, loaded via `d3.csv` and transformed into per-country timeseries arrays. The chart includes axis components built with `d3.axisBottom` and `d3.axisLeft`, with a gridline effect from tick sizing.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country02/02

A line chart displays cumulative global COVID-19 deaths over time for each country, using a log-scaled y-axis to accommodate a wide range of values. The chart is built with React and D3 v5, using `d3.scaleTime` for the x-axis, `d3.scaleLog` for the y-axis, and `d3.line` to generate the paths. Each country’s time series is drawn as a randomly colored stroke, with gridlines and labeled axes for clarity. Data is sourced from the Johns Hopkins COVID-19 dataset via a CSV fetched in `useData`.

Loading thumbnail…

Fork of Circle on the Map

A world map animates shifting population projections from 2020 through 2030, with circles sized by projected population using a square-root scale. Countries missing data appear in pink. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for country outlines, and d3.zoom for panning. Animated transitions update circle radii sequentially, while a size legend and color legend appear. Population data comes from a CSV file, merged with country geometries from TopoJSON via the topojson library.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This example shows global coronavirus deaths over time as a set of cumulative line charts, one per country, on a log-scaled y-axis. Each country’s daily death total is plotted using D3’s `scaleTime` and `scaleLog` scales, with the line generator drawing paths from the Johns Hopkins dataset. A red Voronoi overlay, built with `d3.Delaunay` and `d3-delaunay`'s `voronoi` method, is rendered on top of the chart, dividing the plotting area into cells based on three hard-coded points, though hover interactions are only logged to the console. The visualization is built with React and rendered as SVG, with axes created via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Coravirus Deaths Over Time by Country

A line chart displays cumulative COVID-19 deaths over time for each country, using a logarithmic y-axis to accommodate wide variations in death tolls. The visualization renders multiple country-specific paths via React and D3 v5, with scales created by `scaleTime` and `scaleLog`, and lines generated by `d3.line`. A Voronoi overlay, built with `d3.Delaunay`, provides hover interactions, while custom `XAxis` and `YAxis` components apply `axisBottom` and `axisLeft`. Data originates from the CSSEGISandData COVID-19 global time series CSV, parsed with `d3.csv` and `timeParse`.

Loading thumbnail…

Fork of React + D3

This example shows global cumulative COVID-19 deaths over time as a line chart, with a logarithmic y-axis and a marker line highlighting the one-million-death threshold. The chart is rendered as SVG using React components that wrap D3 scales and axis generators, including `d3.scaleLog`, `d3.scaleTime`, and `d3.axisBottom`/`axisLeft`. Data is fetched from a CSV file via `d3.csv` and processed with `d3.timeParse` and array reduction. The visualization pairs React’s declarative component structure with D3’s data manipulation and layout utilities.

Loading thumbnail…

Fork of Fork of CORONAVIRUS LINE CHART

A line chart visualizes the global cumulative COVID-19 death toll over time, using a red background and a thick black line. The chart includes horizontal and vertical marker lines at the one million death threshold and at the latest date. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `line` generators, pulling data from the CSSEGISandData COVID-19 time-series CSV. The SVG rendering relies on React components for the marker lines and a `useData` hook for asynchronous CSV parsing and transformation.

Loading thumbnail…

Fork of CORONAVIRUS LINE CHART

This chart displays global COVID-19 death totals over time using a red SVG background and a thick black line. It uses `d3.scaleTime` and `d3.scaleLinear` to map dates and cumulative deaths, while `d3.line` generates the path. Two custom React components, `YMarkerLine` and `XMarkerLine`, draw reference lines at the 1,000,000 death mark and at the latest date, respectively. Data comes from the CSSE COVID-19 time series CSV loaded via `d3.csv`.

Loading thumbnail…

Hello html

A grid of eighteen cartoon faces appears, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth. Built with React and D3 v5, the faces use the `arc` generator from D3 to create the mouth path. Each face’s eye offset, eye radius, mouth radius, and mouth width are randomized, producing slight variations across the grid. The SVG output is composed of reusable components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, with all elements centered via a transformed group.

Loading thumbnail…

Fork of Fork of Loading and Parsing CORONAVIRUS

This example displays a text summary of COVID-19 global death data parsed from a CSV file hosted by the CSSE at Johns Hopkins. It uses `d3.csv` to fetch and parse the time-series data, then computes the total deaths from the latest date column using JavaScript’s `reduce`. The displayed message includes file size, row and column counts, the final date, and the formatted death total via `d3.format`. The results are rendered inside a styled `<pre>` element, with the code running in a React-based build using D3 v5.

Loading thumbnail…

Fork of Loading and Parsing CORONAVIRUS

This example demonstrates how to load and parse global COVID-19 death data from a CSV file hosted on GitHub. Using d3.csv, it fetches the time-series dataset and calculates the total deaths from the most recent date column. The interface displays summary statistics, including the CSV file size in kilobytes, the number of rows, the number of columns, and the label of the latest data column. The code also includes commented-out alternatives using fetch with async/await and a nested promise chain.

Loading thumbnail…

Circle on the Map3

This visualization displays population projection data on a world map over time, with animated circles representing values for each country from 2020 to 2030. The map is rendered using d3.geoNaturalEarth1 and d3.geoPath, while circle radii are scaled with d3.scaleSqrt. The animation cycles through decades sequentially, updating the displayed year and circle sizes via d3.transition. Data comes from CSV files with country coordinates and population estimates, and the visualization includes interactive zoom functionality through d3.zoom.

Loading thumbnail…

EVENT

The example demonstrates three paragraph elements labeled "one," "two," and "three," each assigned unique IDs through D3.js selection and appending. It shows how D3’s `select` and `append` methods create and style basic DOM nodes with a minimal, static layout. The page applies global CSS that sets the body margin to zero and hides overflow, while the provided styles for `.lines` and `.lines path` suggest unused stroke and color properties. No interaction or data binding occurs; the visualization relies solely on D3’s core DOM manipulation API.

Loading thumbnail…

Untitled

This example demonstrates a simple SVG-based visualization using D3.js, displaying three text elements labeled "one," "two," and "three" as paragraphs appended to the body. The visualization uses D3's selection and append methods to create the elements, with minimal styling applied via a stylesheet that sets the page margin and defines a black stroke for line elements. The rendering approach is straightforward, relying on basic SVG features without additional libraries or data sources.

Loading thumbnail…

Untitled

This example shows a D3.js v4 heatmap that visualizes a matrix of values using the Inferno color scale, with an interactive tooltip that displays each cell’s exact value on hover. The chart loads CSV data from an external URL, builds band scales for the x and y axes, and renders colored rectangles with rounded corners. A title and subtitle are added via SVG text elements. The code also includes separate JavaScript modules for generating car reports and fetching JSON data, though these are not part of the heatmap rendering itself.

Loading thumbnail…

Circle on the Map

This visualization animates population projections for countries from 2020 to 2030, using circles positioned at geographic centroids on a natural Earth projection. Circle radius encodes population magnitude via a square-root scale, with a color legend distinguishing regions and a size legend showing population values. The map loads TopoJSON world data and CSV population data, rendering countries as SVG paths and animating circles through sequential transitions with delays. The code uses d3.geoPath, d3.geoCentroid, d3.zoom, and transition methods to create the dynamic overlay.

Loading thumbnail…

Untitled

This example demonstrates loading and processing JSON data representing car listings, filtering them by price, and formatting them into a plain-text report. It uses JavaScript modules with `export`/`import` statements and Promises to simulate asynchronous data retrieval. The code also includes a separate array of U.S. city data and logs the number of entries to the console. No visualization library is used; the focus is on functional programming patterns with `filter`, `map`, and `join` on arrays, as well as object destructuring.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City initiative. The visualization plots time on the horizontal axis and temperature in degrees Celsius on the vertical axis, with each city represented by a distinct colored line. Built with D3 version 5, the code uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, along with `axisBottom` and `axisLeft` for axes. A `nest` operation groups data by city, and a custom `colorLegend` function renders the categorical color key. Multiple lines are drawn using `line()` with a basis curve, rendered as SVG paths.

Loading thumbnail…

Animated bar chart

This example displays population changes over time using an animated bar chart in SVG. Bars grow in height sequentially as each year is added, with green bars that turn red and expand slightly on mouseover. The visualization is built with D3 v4, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks. Bar entrance animations use `transition().delay()` and `ease(d3.easeLinear)`, while hover effects rely on `transition().attr()` calls. Data comes from a CSV file with year and population values.

Loading thumbnail…

Scatter Plot WIHT MENUES 2

This interactive scatter plot explores the relationship between pairs of attributes from the UCI Auto MPG dataset, allowing users to select any two columns via dropdown menus. The visualization animates the transition of circles between configurations using D3 v5’s `transition().delay()` and `duration()`. Axes are generated with `axisLeft` and `axisBottom`, while the scatter plot updates dynamically when menu selections change, re-rendering with new scales and labels.

Loading thumbnail…

Circle on the Map

This interactive map visualizes projected population changes from 2020 through 2030, with circles sized by population using a square-root scale. The visualization animates growth by iterating through years, transitioning circle radii with `transition.delay` and `transition.duration`. It uses D3 v5 with `geoNaturalEarth1` projection, `geoPath`, and TopoJSON world data merged with UN population CSV data, offering zoom via `d3.zoom` and a legend showing population values.

Loading thumbnail…

Untitled

A single blue rectangle animates its width and height over five seconds using a custom tween that interpolates numeric values, while its fill color transitions from blue to red to green in sequence over four seconds. The example demonstrates JavaScript modules for car data handling and report generation, though the visualization itself relies on D3 v4 selections, transitions, and interpolate functions to drive SVG attribute changes.

Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Loading thumbnail…

Shapes and Colors with SVG and CSS

Fifty circles arranged vertically cycle horizontally across the screen in an animated loop. Each circle’s fill color transitions from light yellow to dark navy based on its vertical position, using a linear scale with HSL interpolation. The example demonstrates SVG shape rendering and CSS styling, with animations driven by D3 v4’s `transition` and `d3.active()`. The code uses `d3.scalePoint` for layout and `d3.scaleLinear` for color mapping, all within a single SVG canvas.

Loading thumbnail…

Untitled

Fifty circles, one per vertical position, traverse the SVG horizontally in a looping animation. Using d3.scalePoint for y-coordinates and d3.scaleLinear with HSL interpolation for fill colors, each circle transitions across the width, then snaps back and restarts via d3.active and nested transitions. The page initially displays “Loading…” before an unrelated JavaScript module (getCars, generateReport) asynchronously populates a message element with a filtered car report, though that data does not affect the visualized motion.

Loading thumbnail…

lombris

A grid of circles animates across an SVG canvas, moving horizontally in a staggered wave. Each circle cycles through a sequence of horizontal positions, creating a looping motion synchronized by a per-circle delay. The fill color transitions from pale yellow to dark navy based on the circle’s index, using a linear scale with HCL interpolation. The animation is built with D3 v4’s `transition` and `d3.active`, while a separate module loads car data via a Promise and formats it with template literals.

Loading thumbnail…

Untitled

A grid of 4,002 small square divs cycles through a continuous color animation, shifting from light gray to steel blue, then to orange, and back to light gray. The page uses D3 v4 with `d3.interpolateRgb` for color transitions and `d3.active` to manage chained, repeating transitions with random delays. The example demonstrates modular JavaScript with ES6 imports, including a promise-based `getCars` function and data filtering from a JSON array, though the grid itself relies solely on D3's selection and transition methods.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between numeric car attributes. Two dropdown menus let viewers select which columns map to the X and Y axes. The code uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and d3.axisBottom/axisLeft for axes. Circles render in SVG with a 2-second staggered transition using d3.transition().duration() and .delay(), redrawn dynamically as menu selections change.

Loading thumbnail…

Cars Report

Cars Report demonstrates asynchronous data loading and text-based reporting using D3.js. The example fetches a hardcoded JSON array of five used cars via a custom `getCars` promise, then processes the data with `generateReport`. This function filters cars by a maximum price of $2000, formats each entry using `formatCar` (which extracts year, make, model, and price), and joins results into a multi-line string. The final report is displayed in an HTML `<pre>` element after a simulated two-second loading delay, showing that no vehicles meet the price threshold.

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for visualizing color and size encodings in D3 v5. The color legend displays a categorical scale with fruit names (apple, lemon, lime, orange) using distinct colors, while the size legend uses a square-root scale to represent numeric values from 0 to 10 with proportional circle radii. Both legends are rendered as SVG groups with tick marks, using D3’s selection joins and scales (`scaleOrdinal`, `scaleSqrt`). Circles and text labels are positioned dynamically based on spacing and scale values, with styles defined in external CSS.

Loading thumbnail…

Circles on a Map

This visualization displays population by country using proportional circles on a natural Earth projection map, with circle area corresponding to each nation's 2018 population. Users can pan and zoom the map via d3.zoom and hover over countries to reveal population details in a tooltip. The code uses d3.geoPath, d3.geoCentroid, and d3.scaleSqrt to position and size circles, while a custom size legend and color legend are built with D3 selections. Population data originates from a CSV file, joined with TopoJSON world geometry using topojson.feature.

Loading thumbnail…

Circles on a Map

This visualization displays global population by country using scaled circles on a natural Earth projection map, with circle area proportional to each country's 2018 population. Users can pan and zoom via d3.zoom and hover over countries to see exact population figures through SVG title tooltips. The example uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and topojson for world geometry. Population data is loaded from a CSV file, and countries lacking data appear in red rather than gray.

Loading thumbnail…

Circles on a Map

A world map rendered with SVG paths uses proportional circles to visualize each country's 2018 population, with circle area scaled via `d3.scaleSqrt` and positioned by `d3.geoCentroid` under a `d3.geoNaturalEarth1` projection. The visualization supports pan and zoom through `d3.zoom`, and hovering over a country reveals its population in a tooltip. Missing-data countries appear in a lighter shade. A size legend built from `d3.scaleSqrt` ticks and a color legend accompany the map, with data loaded from a CSV and TopoJSON using `d3.csv` and `d3.json`.

Loading thumbnail…

Circles on a Map

This visualization displays global population by country as proportional circles positioned at each country’s centroid on a natural Earth projection. The circle area encodes 2020 population data from a CSV file, with countries lacking data shown in gray. Users can pan and zoom via d3.zoom, and hovering over a country reveals its name and population in a tooltip. The map uses d3.geoPath for geographic outlines, d3.geoCentroid for circle placement, and d3.scaleSqrt for sizing, with a custom size legend and color legend rendered in SVG.

Loading thumbnail…

Circles on a Map

This map visualization displays global population by country using semi-transparent circles sized proportionally to 2018 population data from the UN, with a square-root scale for area encoding. The code uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoCentroid to position circles at country centroids, while d3.zoom enables panning and zooming. Hovering reveals country names and population values via SVG title elements, and a custom size legend explains the circle scaling. Data sources include UN population CSV and TopoJSON world atlas geometry.

Loading thumbnail…

Circles on a Map

This visualization displays population estimates by country for 2020 on a natural Earth projection map. Scaled circles positioned at each country’s centroid encode population magnitude, while a size legend and color legend provide reference. Users can pan and zoom via d3.zoom, and hovering over countries reveals tooltips with region names and formatted population values. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and TopoJSON from the Visionscarto World Atlas, with data loaded from a CSV via d3.csv.

Loading thumbnail…

Circles on a Map

A choropleth-style map of global population for 2020, where each country is positioned using the D3 `geoNaturalEarth1` projection and drawn with `d3.geoPath`. Circle markers, sized with a `d3.scaleSqrt` legend, indicate relative population per country, and users can pan and zoom via `d3.zoom`. The visualization also includes a color legend built with the `colorLegend` module and a size legend using `tickFormat`, with data loaded from a CSV and a TopoJSON world atlas.

Loading thumbnail…

Circles on a Map

This map visualization depicts world population by country, with circle area scaled to the 2020 population figures. Users can pan and zoom across the interactive SVG, and hovering over a country highlights it while revealing a tooltip with the region name and population. The visualization is built with d3.v5, using geoNaturalEarth1, geoPath, and geoCentroid for the map projection, while loadAndProcessData merges CSV population data with TopoJSON world atlas shapes. A square-root scale controls circle size, and custom legends render the data encoding.

Loading thumbnail…

Circles on a Map

This map visualization depicts world population by country, with circle area scaled to the 2020 population figures. Users can pan and zoom across the interactive SVG, and hovering over a country highlights it while revealing a tooltip with the region name and population. The visualization is built with d3.v5, using geoNaturalEarth1, geoPath, and geoCentroid for the map projection, while loadAndProcessData merges CSV population data with TopoJSON world atlas shapes. A square-root scale controls circle size, and custom legends render the data encoding.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Five pieces of fruit sit in a drawn bowl, with apples and lemons updating through enter, update, and exit selections. Clicking a fruit highlights it with a black stroke, demonstrating a selected-state special case. The code uses d3.scaleOrdinal for color and radius mapping, d3 transitions for movement, and SVG circles and text. Data is generated randomly with Math.random and mutated via timeouts.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a dynamic fruit bowl visualization where fruits appear, disappear, and change type over time, with clickable fruits that become selected and highlighted. Using D3.js v5, the code demonstrates core DOM manipulation through data joins, transitions, and event handling. The `fruitBowl` function leverages `scaleOrdinal` for color and radius mapping, while `selection.enter()`, `.merge()`, and `.exit()` manage enter/update/exit patterns. SVG shapes including circles, rects, and text elements update with staggered transitions triggered by `setTimeout` calls, showing how D3 binds data to visual elements and animates changes.

Loading thumbnail…

Cars Report

A car report rendered as a single large text element cycles through randomly generated letter sequences, then yields an SVG snapshot every 2.5 seconds. The report itself filters a hard-coded JSON array of five used cars by price, formats each entry with year, make, model, and cost via a `formatCar` helper, and joins them as newline-separated strings. The display uses the D3.js `create` method with an SVG canvas, updating text nodes per tick from an expression generator. The code imports `generateReport` to build filtered data and `formatCar` for consistent output.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row across an SVG canvas, each rendered as a red circle with a radius of 50 pixels. Clicking any apple strokes it with a thick black border to mark it as selected, while the previously selected apple loses its outline. The example uses React state via the `useState` hook to track the selected fruit ID and d3's `scaleOrdinal` for both color and radius mapping. All fruits are generated with `range` and rendered as React components, with the selection interaction handled through the `onClick` event.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a choropleth world map colored by each country’s economy classification, using a natural Earth projection and a red-yellow-green color scale. Users can zoom and pan the map via D3’s zoom behavior. The map is rendered as SVG paths generated with `d3.geoPath` and `geoNaturalEarth1`, while country boundaries come from the world-atlas TopoJSON dataset. Data is loaded with `d3.tsv` and `d3.json`, with colors assigned using `scaleOrdinal` and the `schemeRdYlGn` scheme.

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic classification using a categorical ordinal scale with a spectral color scheme. Users can zoom and pan the natural Earth projection, while a custom color legend displays the category colors and labels. The visualization loads geographic and metadata from the world-atlas TopoJSON and TSV files, rendering paths via d3.geoPath and enabling interaction through d3.zoom. Hovering highlights individual countries, and the legend is built with reusable d3 selections.

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map and a date histogram to visualize migrant deaths and disappearances. The map uses a natural Earth projection with `d3.geoPath` to draw country boundaries and circles sized by a square-root scale, while the histogram bins the same data by month using `d3.bin` and `d3.timeMonths`. Both views share a dataset from the Missing Migrants Project, rendered as SVG within a React component hierarchy.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to distinguish categories, with an interactive legend enabling users to click a category and highlight matching countries while dimming the rest. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files. Hovering reveals country names and values via SVG `title` elements.

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes automobile characteristics from the UCI Auto MPG dataset. Users select which attribute to display on the x-axis via a dropdown menu, with miles per gallon always plotted on the y-axis. The visualization uses D3 v5 with `csv`, `scaleLinear`, and `axisBottom` to render SVG circles whose opacity reveals data density. Data loading is asynchronous, and the chart re-renders whenever the selected column changes.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes car attributes from the UCI Auto MPG dataset, using dropdown menus to let users map any column to the X or Y axis. The D3 v5 code loads CSV data, converts numeric fields, and renders SVG circles with an animated transition on axis changes. It employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component, with gridlines and axis labels styled via CSS.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example, built with HTML, CSS, and SVG, presents a simple interactive utility titled "Cat Photo Finder." It shows a user interface with an h1 heading, a message box, and a button, where clicking the button is intended to trigger a message display. The page's visual styling relies on CSS for layout, colors, button hover effects, and rounded corners. The included SVG code demonstrates stroke properties, using CSS classes to set line colors, widths, and path join styles. This visualization serves as a basic template for combining SVG graphics with CSS-driven design and JavaScript event handling.

Loading thumbnail…

Customizing Axes

This line chart displays temperature measurements over time, with circles marking each data point. The visualization customizes axes by removing the domain lines, adding tick lines that span the full chart height and width, and including rotated axis labels for both the time and temperature scales. Data comes from a CSV of San Francisco temperatures, rendered as an SVG using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization renders as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the smoothed path, and `axisBottom`/`axisLeft` for tick marks. Data is loaded via `csv` from a remote dataset, with timestamps parsed as dates and temperatures converted to numbers. The maroon line is drawn with a stroke width of five, accompanied by styled axis labels and a title.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red semi-transparent circles represent individual car models, with each point positioned by d3.scaleLinear axes for horsepower (x) and weight (y). The visualization uses d3.csv to load the external data, d3.axisBottom and d3.axisLeft for labeled tick marks, and renders all elements as SVG. Axis labels and a title are added via SVG text elements, with styling defined in an external CSS file.

Loading thumbnail…

Let's make a face with D3.js!

This example displays a bar chart of the top 10 most populous countries using D3.js v5, with population values derived from a CSV file and rendered as SVG rectangles. It uses `d3.csv` to load data, `scaleLinear` for the y-axis, and `scaleBand` for the x-axis, along with `axisLeft` and `axisBottom` for labeled ticks. The chart title and axis labels are added via SVG text elements, and the y-axis uses a custom tick formatter via `format` to abbreviate large numbers.

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values in millions. Customized D3 axes enhance readability: the y-axis removes domain lines and tick marks, while the x-axis uses a custom tick formatter to abbreviate numbers and replaces 'G' with 'B' for billions. The visualization uses d3.scaleBand for countries, d3.scaleLinear for population, and d3.axisBottom and d3.axisLeft for labels, all rendered as an SVG with custom tick styling and axis labels.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green against a blue sphere. It uses D3.js version 5 and TopoJSON to load and convert world-atlas data from unpkg. The map is drawn using `d3.geoPath` with a `d3.geoNaturalEarth1` projection, and country boundaries are derived via `topojson.feature`. A static sphere outline is added first, then country paths are appended to the SVG. The code relies on promises to fetch and process the geographic data asynchronously.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Loading thumbnail…

Responding to Resize

This example demonstrates an SVG visualization that fills the browser window and redraws its content whenever the window is resized. It shows a green X shape composed of two crossing lines, whose coordinates are recalculated to match the container's current dimensions. The code uses `d3.select` to append an SVG element and relies on CSS `position: fixed` with `clientWidth` and `clientHeight` to determine the size. Window resize events trigger the `redraw` function, which updates the SVG's width, height, and line positions using D3's `.attr` methods.

Loading thumbnail…

Responding to Resize

This example demonstrates an SVG visualization that fills the browser window and redraws its content whenever the window is resized. It shows a green X shape composed of two crossing lines, whose coordinates are recalculated to match the container's current dimensions. The code uses `d3.select` to append an SVG element and relies on CSS `position: fixed` with `clientWidth` and `clientHeight` to determine the size. Window resize events trigger the `redraw` function, which updates the SVG's width, height, and line positions using D3's `.attr` methods.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized, including formatted tick labels that abbreviate large numbers and gridlines extending across the chart. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render the SVG, with axis labels and a title styled via CSS.

Loading thumbnail…

Responding to Resize

This example demonstrates an SVG visualization that fills the browser window and redraws its content whenever the window is resized. It shows a green X shape composed of two crossing lines, whose coordinates are recalculated to match the container's current dimensions. The code uses `d3.select` to append an SVG element and relies on CSS `position: fixed` with `clientWidth` and `clientHeight` to determine the size. Window resize events trigger the `redraw` function, which updates the SVG's width, height, and line positions using D3's `.attr` methods.

Loading thumbnail…

Let's make a face with D3.js!

The example constructs a cartoon face from simple geometric shapes using D3.js v5 and SVG rendering. It employs `d3.select` to append circles and paths directly to an SVG container, with `d3.scaleOrdinal` mapping color values for facial features. The face is composed entirely of static elements—no animation or interaction—and the code relies on basic D3 utilities like `d3.arc` for the mouth shape. Styling is handled via an external stylesheet that resets margins and hides overflow. The visual result demonstrates how D3's declarative DOM manipulation can build complex illustrations from primitive SVG components.

Loading thumbnail…

Let's make a face with D3.js!

This example creates a stylized face using D3.js and SVG, with a large blank canvas where the facial features are drawn programmatically. The code uses D3 v5 to select the SVG element and manipulate its attributes, while the accompanying style sheet sets the body margins and hides overflow. The face rendering relies on D3’s selection and data-join methods to position shapes, though the interactive or animated behavior is not visible in the provided files. The design is minimal, focusing on the geometric construction of a face rather than external data.

Loading thumbnail…

Let's make a face with D3.js!

The example constructs a cartoon face from simple geometric shapes using D3.js v5 and SVG rendering. It employs `d3.select` to append circles and paths directly to an SVG container, with `d3.scaleOrdinal` mapping color values for facial features. The face is composed entirely of static elements—no animation or interaction—and the code relies on basic D3 utilities like `d3.arc` for the mouth shape. Styling is handled via an external stylesheet that resets margins and hides overflow. The visual result demonstrates how D3's declarative DOM manipulation can build complex illustrations from primitive SVG components.

Loading thumbnail…

Let's make a face with D3.js!

The example demonstrates how to construct a cartoon face entirely with D3.js, using JavaScript objects and arrays to define facial features that render as Scalable Vector Graphics (SVG) shapes. The code relies on D3 v5’s core utilities for coordinate mapping, likely including `d3.range` and `d3.scaleLinear`, while the embedded YouTube tutorial walks through the modular construction process. Rendering occurs on a fixed 960x500 SVG canvas, with the script logging the loaded D3 library to the console for verification. The result is a playful exercise in programmatic drawing and procedural animation setup, highlighting D3’s flexibility beyond data charts.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with D3.js, featuring expressive eyebrows that animate up and down over a two-second cycle. The face is constructed by manipulating SVG elements, including circles for the eyes and a path for the mouth, all grouped and positioned via translation transforms. The animation is driven by a chained sequence of `transition().duration()` calls, which move the eyebrows group along the y-axis. The code imports `select` and `arc` from D3, using the latter to generate the mouth’s arc path geometry.

Loading thumbnail…

Let's make a face with D3.js!

The example demonstrates how to construct a cartoon face entirely with D3.js, using JavaScript objects and arrays to define facial features that render as Scalable Vector Graphics (SVG) shapes. The code relies on D3 v5’s core utilities for coordinate mapping, likely including `d3.range` and `d3.scaleLinear`, while the embedded YouTube tutorial walks through the modular construction process. Rendering occurs on a fixed 960x500 SVG canvas, with the script logging the loaded D3 library to the console for verification. The result is a playful exercise in programmatic drawing and procedural animation setup, highlighting D3’s flexibility beyond data charts.

Loading thumbnail…

Let's make a face with D3.js!

This example constructs a smiley face using SVG primitives in D3.js, then animates its eyebrows in a looping motion. The face is built by appending circles, rectangles, and a path to an SVG group, with the mouth created using the `d3.arc` shape generator. Eyebrows are rectangles that move vertically via chained `transition().duration(2000)` calls to `attr('transform')`, creating a bouncing effect. The code demonstrates basic DOM manipulation and animation with D3’s selection and transition APIs.

Loading thumbnail…

Hello world

This example displays a text report of used cars priced under $2,000, listing each vehicle’s year, make, model, and price. It processes a hardcoded JSON array of five cars, filtering and formatting entries with the `filter` and `map` array methods, then joins them with newlines. The React-based project uses plain JavaScript functions, `JSON.parse`, and DOM manipulation to update a `<pre>` element’s text content.

Loading thumbnail…

Cars Report

This example demonstrates how a plain-text car report is generated by filtering a list of cars based on price criteria. It shows the flow of loading car data asynchronously, processing it through JavaScript modules, and displaying the formatted result in a web page. The code uses ES6 module exports and imports, `Promise`-based asynchronous data fetching with `setTimeout`, array methods like `filter` and `map`, and template literals for string formatting. The displayed report lists car year, make, model, and price for vehicles under $2,000.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page at an extremely large font size, demonstrating the simplest possible setup for a web visualization. It uses plain HTML with inline CSS in a `<style>` tag to set the body’s text alignment and font size, and contains no JavaScript or external libraries. The page serves as a minimal starter template, contrasting with the React Starter by showing a static, framework-free rendering approach.