C

Chooo4u

@Chooo4u·94 public vizzes

Loading thumbnail…

Smiley Face Part II

This example renders a cartoon smiley face as an interactive-free SVG composition. It shows a pink circular head with elliptical eyes, white eye highlights, and a brown arc-shaped mouth, all centered within a 960 by 500 viewport. The face is built using React elements for the head and eyes, while D3’s `arc` generator creates the mouth path. Red curved lines, drawn as SVG `path` elements with explicit cubic Bézier commands, serve as eyebrows and are positioned with `transform` translations. The code combines React’s declarative structure with D3’s geometry utilities, rendering entirely through SVG primitives.

Loading thumbnail…

Smiley Face Part II

This example shows a stylized smiley face rendered as an SVG, with a red circular head, asymmetrical elliptical eyes, and a mouth drawn as an arc. The face is centered in a 960 by 500 viewport. The code integrates React for component structure and rendering, while it uses D3’s `arc` generator to compute the mouth path. ReactDOM mounts the component into the DOM, and all shapes are drawn with SVG elements such as `circle`, `ellipse`, and `path`. The visualization relies on fixed numeric parameters for positioning and sizing, with no external data source.

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive annotation on a natural Earth projection world map. Clicking anywhere places a scaled pointer marker that fades in via a D3 transition, while holding Ctrl and clicking a marker removes it. The map is rendered from TopoJSON world-atlas data using `d3.geoPath`, with pan and zoom handled by `d3.zoom`. The pointer shape is defined as an SVG symbol, and mouse events rely on `d3.event` and `d3.mouse`.

Loading thumbnail…

Happiness Level Line Chart - Test

A line chart displays happiness levels (life ladder scores) over time for many countries, with each country as a colored line and a color legend. The chart uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by country. Data comes from the World Happiness Report 2018 CSV, rendered as SVG with axes and gridlines.

Loading thumbnail…

Happiness Level Line Chart

This line chart displays life satisfaction trends across countries from 2004 to 2017, using data from the World Happiness Report. A dropdown menu lets viewers switch between variables like GDP per capita, social support, and freedom, with each country represented by a colored line via d3.nest and d3.scaleOrdinal. The visualization uses d3.line with curveBasis for smooth paths, d3.axisLeft and d3.axisBottom with tick marks, and an SVG color legend. It renders as SVG with d3.v5, updating the view dynamically through a custom lineChart function.

Loading thumbnail…

Happiness Level Chart

This visualization presents self-reported life satisfaction across countries from 2004 to 2017, using data from the World Happiness Report 2017. It combines a scatter plot with year and satisfaction metrics, a multi-line chart tracking trends per country, and an animated cartoon face that shifts expressions. Users select different satisfaction indicators via a dropdown menu and filter countries by clicking the color legend. The D3 v5 code builds SVG elements, uses scales like `scaleTime` and `scaleLinear`, and applies transitions to update data points and the face animation.

Loading thumbnail…

Happiness Level Chart

This visualization shows global self-reported life satisfaction from 2004 to 2017, using data from the World Happiness Report 2017. It combines a scatter plot with a line chart, letting users explore different well-being metrics via a dropdown map. The SVG rendering uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. An animated cartoon face (built with d3.arc and transitions) reacts to the data, while a color legend and tooltips on mouseover provide interactive filtering and detail.

Loading thumbnail…

Annual Deaths Causes in USA

An interactive scatter plot displays annual death counts from numerous causes in the USA, with users selecting any two columns from the dataset to compare via dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render animated SVG circles that transition into position. Data is loaded from a CSV file hosted on VizHub and includes causes such as Dementia, Cardiovascular diseases, and Suicide. The code employs a reusable `scatterPlot` module and a custom `dropdownMenu` component to handle user interactions.

Loading thumbnail…

1027Happiness Level Scatter Plot

This scatter plot visualizes self-reported life satisfaction across countries from 2004 to 2017, using data from the World Happiness Report. A dropdown menu lets users switch between different well-being metrics on the y-axis, while each circle represents a country-year observation colored by country. The visualization combines a time-based scatter plot with overlaid line charts showing trends per country. Clicking a country in the color legend filters both the points and lines, with a tooltip revealing exact values on hover. The code uses D3 v5 APIs including `scaleTime`, `scaleOrdinal`, `nest`, `axisBottom`, and `transition().duration()` for smooth animations.

Loading thumbnail…

1027Happiness Level Scatter Plot

This visualization displays global self-reported life satisfaction from 2004 to 2017, plotting each country-year observation as a point on a scatter plot with selectable y-axis metrics such as GDP per capita or social support. A line chart beneath the scatter plot traces each country’s trends over time, while a color legend allows filtering by specific countries. Built with D3 v5, it uses SVG rendering with animated transitions, d3.scaleOrdinal with interpolateRdYlBu for color mapping, and d3.nest for grouping country lines. Data comes from the World Happiness Report 2017 via Our World in Data.

Loading thumbnail…

1027Happiness Level Line Chart

This visualization displays self-reported life satisfaction across countries from 2004 to 2017, using a scatter plot where each circle represents a country-year observation. Users select a metric from a dropdown menu, and clicking a color legend entry highlights that country’s points while dimming others. The D3.js v5 code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and transitions to animate marks, with `interpolateRdYlBu` for color encoding. Data originates from the World Happiness Report 2017, rendered as an SVG with interactive legend and dropdown functionality.

Loading thumbnail…

1027Happiness Level Line Chart

This chart visualizes life satisfaction across multiple countries from 2004 to 2017, using data from the World Happiness Report 2017. Each country is represented as a line, with a dropdown menu to switch between different well-being metrics. A color legend allows users to highlight specific countries by clicking. The visualization uses d3.line with curveBasis for smooth paths, d3.nest for grouping, and d3.axisLeft/axisBottom with gridlines, rendered as SVG with animated transitions.

Loading thumbnail…

Happiness Level Scatter Plot

This interactive visualization displays global happiness levels from 2004 to 2017, using data from the World Happiness Report 2017. It combines a line chart showing happiness trends over time with a map, allowing users to click on a country to see its specific happiness trajectory or select a year to view global distribution. Built with D3 v5, the visualization uses `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom` to construct the charts, while SVG rendering handles the map and line paths. The interface includes a dropdown menu for year selection and color-coded points representing happiness scores.

Loading thumbnail…

Happiness Level Line Chart

This interactive line chart visualizes self-reported life satisfaction across the world from 2004 to 2017, using data from the World Happiness Report 2017. A dropdown menu lets viewers switch between different happiness-related metrics, such as GDP per capita, social support, and freedom, with each selection redrawing the SVG line chart. Built with D3.js v5, it uses `scaleTime`, `scaleLinear`, axes, and a `line` generator with `curveBasis` to render smoothed paths. The visualization encodes the selected metric over time, revealing trends and patterns in global well-being.

Loading thumbnail…

Natural disaster death over years

A scatter plot displays deaths from natural disasters per year, colored by disaster type such as drought, earthquake, and epidemic, with a legend for filtering. The visualization uses D3 v5 to render SVG circles, scales, and axes, and includes animated tooltips on hover. Data comes from Our World in Data, with interactions implemented via D3’s `scaleOrdinal`, `axisBottom`, `axisLeft`, and event handlers for mouseover and click filtering.

Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

Five slices of bacon sit in a bowl, then animate over five seconds as some are eaten and others transform into eggs and an avocado, spelling out the letters B-A-E. The example uses d3 selections with enter, merge, and exit to update SVG ellipses and text, while d3.scaleOrdinal maps food types to colors and radii.

Loading thumbnail…

Beer Consumption in U.S.

This line chart shows beer consumption per person in the United States from 1890 to 2013, measured in litres of ethanol per year, with a visible gap during the Prohibition era (1920–1933) when values drop to zero. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, an `area` generator with `curveBasis` to create the filled curve, and `axisLeft` and `axisBottom` for labeled ticks. Data is loaded from a CSV file provided by Our World in Data, and the chart includes axis titles and a main title, with styling applied via external CSS.

Loading thumbnail…

Circles and Ellipse

A steelblue composition of circles and ellipses forms a static, discrete set of geometric shapes within an SVG canvas. The circles vary in radius, while the ellipses have either wide or narrow proportions, creating a rhythmic layout of vertical and horizontal forms. A thick black rectangular border, rendered as a separate path, frames the entire collection. The code uses raw SVG elements like `circle` and `ellipse` with explicit `cx`, `cy`, and `r` or `rx`/`ry` attributes, and is styled with an external CSS file that applies strokes and sets the document margins.

Loading thumbnail…

Circle and Ellipse

This example by Chooo4u displays a collection of circles and ellipses arranged within a rectangular frame, all filled in steel blue. It demonstrates the basic geometric shapes available in SVG, with varying sizes and orientations including horizontal and vertical ellipses. Built with D3 v5, the code uses the `select` function to target the SVG element and appends shapes using methods like `append('circle')` and `append('ellipse')`, with attributes such as `cx`, `cy`, `rx`, and `ry` set to position and size each form.

Loading thumbnail…

Happiness Level Plot

This scatter plot visualizes self-reported life satisfaction across the world from 2004 to 2016, plotting happiness rank (lower is better) against each year. The code uses d3.csv to load data from a modified World Happiness Report 2017 dataset, then renders orange semi-transparent circles via SVG. Axes are generated with d3.axisBottom and d3.axisLeft, while d3.scaleTime and d3.scaleLinear map the data domain. The visualization includes a title and axis labels, with gridlines drawn by extending ticks across the plot area.

Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a dataset from the World Happiness Report 2017, showing the row count, column count, file size in kilobytes, and the first 10 rows as formatted JSON. Using d3.csv to load the data and d3.csvFormat to calculate size, it appends the results to the DOM in monospace ’pre’ elements. The black background and green terminal-style text create a simple, console-like presentation of the data table’s structure and contents.

Loading thumbnail…

The Best-selling Video Games of All Time

This horizontal bar chart displays the top ten best-selling video games by total sales, with Tetris and Minecraft leading in copies sold. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` to map sales values and game titles, while `axisLeft` and `axisBottom` render the axes. SVG rectangles encode the data, and the axis tick labels are formatted with D3’s `format` function to abbreviate large numbers. Data comes from a CSV file listing sales figures sourced from Wikipedia.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG animates its eyebrows, pupils, and cheeks. The code constructs the face using D3.js v5, creating circles for the head, eyes, pupils, cheeks, and an arc path for the mouth. Animation is achieved through chained `transition().duration()` calls on the SVG groups, moving the eyebrows and pupils in a repeating pattern. The example demonstrates fundamental DOM manipulation with D3's `select` and `append` methods, alongside the `arc` generator for the mouth and eyebrow shapes.

Loading thumbnail…

Happiness Level Line Chart - Test

This visualization displays the happiness levels of 163 countries over time, using a line chart where each line represents a country's trajectory. Users can interact with a dropdown menu to select a specific country, and the color legend allows filtering by country. The chart updates dynamically with transitions. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line` with `curveBasis`, and `axisLeft`/`axisBottom`. The data comes from a CSV file, and the rendering uses SVG with animation.

Loading thumbnail…

Natural disaster death over years

A scatter plot shows global deaths from natural disasters such as drought, earthquake, and epidemic by year, with each circle colored by disaster type. Users click a legend to filter and highlight categories. The visualization uses d3.csv to load data, scaleLinear for axes, axisLeft and axisBottom for ticks, and scaleOrdinal with schemeCategory10 for colors. It renders SVG circles with tooltips on mouseover and mouseout, based on data from Our World in Data.

Loading thumbnail…

Annual deaths causes in usa

This scatter plot displays annual deaths from various causes in the USA over time, with the y-axis showing total deaths for a selected cause and the x-axis representing years. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart as an SVG. A dropdown menu, built with a custom `dropdownMenu` function, is intended to switch between cause-specific datasets, though the selection logic is not implemented. The data is loaded from a CSV file and parsed into numeric death counts for each condition.

Loading thumbnail…

Natural disaster death over years

This animated scatter plot displays deaths from natural disasters over time, with each circle representing a recorded event colored by disaster type (drought, earthquake, epidemic, or extreme temperature). The visualization uses D3.js v5 with SVG rendering, and users can click legend items to highlight specific categories while dimming others. The chart includes axis labels, a title, and a hover tooltip showing event details. Data comes from Our World in Data, and the code uses d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft, and event handlers for interactivity.

Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a dataset about happiness percentages from the World Happiness Report 2017, showing row count, column count, file size in kilobytes, and the first ten rows as formatted JSON. It uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the page body with `select` and `append`. The interface applies a retro terminal aesthetic with a black background and green monospace text via CSS.

Loading thumbnail…

Happiness Level Plot

This scatter plot displays each country’s life satisfaction ranking against the year, from 2004 to 2016, using data from the World Happiness Report 2017. It is built with D3 v5 and renders as an SVG, with a time-scaled x-axis and a linear y-axis. The code uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, and appends semi-transparent orange circles to represent data points. The CSV dataset is loaded via D3’s `csv` method, and the plot includes axis labels and a title.

Loading thumbnail…

Happiness Level Plot

This scatter plot visualizes worldwide natural disaster deaths from 1900 to 2017, showing the relationship between the year and total deaths for various disaster types such as drought, earthquake, and epidemic. The visualization uses a time-scaled x-axis for years and a linear y-axis for death counts, with each circle representing a disaster event. Built with d3.v5, the code leverages `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes. The data originates from the World Happiness Report 2017, though the dataset displayed here focuses on disaster mortality rather than life satisfaction.

Loading thumbnail…

Natural disaster death over years

This scatter plot visualizes global deaths from natural disasters from 1900 to 2017, with each circle representing a disaster event colored by category (drought, earthquake, epidemic, or extreme temperature). The visualization uses D3 v5 with SVG and animation, encoding year on the x-axis and death toll on the y-axis. Users can click the color legend to highlight a specific disaster type, with non-selected categories dimmed to 5% opacity. The data comes from Our World in Data, and tooltips display details about each event on hover.

Loading thumbnail…

Alcohol Consumption in U.S.

This visualization depicts beer consumption per person in the U.S. from 2000 to 2017, using a filled area chart with a smooth curve to highlight the trend over time. It employs D3 v5 with SVG rendering, leveraging `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the path, alongside `axisBottom` and `axisLeft` for labeled axes. Data is loaded via `csv` from a VizHub-hosted dataset, with years parsed as dates and beer values converted to numbers.

Loading thumbnail…

Making a Bar Chart

This example visualizes the top 10 best-selling video games by sales, using a horizontal bar chart. The chart encodes each game’s title on the y-axis and its sales figure on the x-axis, with the data sourced from a CSV file containing 2018 United Nations population estimates. It uses D3 v5 APIs including `scaleLinear` and `scaleBand` for scales, `axisLeft` and `axisBottom` for axes, and SVG `rect` elements for the bars. The code imports functions via ES modules and renders the chart by appending elements to an SVG.

Loading thumbnail…

Interactive Map

An interactive world map rendered as an SVG using D3.js, with pan and zoom controls. The map displays countries as gray polygons with dark borders, and allows users to click on a country to highlight it and display its label. It uses d3.geoEquirectangular for projection, d3.geoPath for rendering, and the d3.zoom behavior for interactive navigation. The map data comes from a TopoJSON file, and the visualization also responds to window resizing by recalculating zoom limits and centering the view.

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between year and happiness rank for self-reported life satisfaction across the world from 2004 to 2016, with each orange circle representing a data point. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map the temporal and ranked variables, while `axisBottom` and `axisLeft` generate the labeled axes with gridlines. The code loads CSV data from a VizHub dataset based on the World Happiness Report 2017 and renders the plot as SVG elements, with semi-transparent circles to reveal overlapping points.

Loading thumbnail…

Natural disaster death over years

This scatterplot visualizes deaths from natural disasters over time, with each point representing a disaster event. The x-axis shows the year and the y-axis displays the death count. Users can click the color legend to isolate a specific disaster type, which highlights those points while dimming all others. The visualization is built with D3 v5, using SVG rendering and a categorical color scale for disaster types.

Loading thumbnail…

Natural disaster death over years

A scatter plot visualizes deaths from natural disasters—including drought, earthquake, epidemic, and extreme temperature—from 1900 to 2017, using data loaded from a CSV file. Each circle represents a disaster event, with its position mapped by year and death toll, while color encodes the disaster type. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` for color categories, and interactive legends that filter events by type. Hover interactions highlight individual events, and axis labels clarify the time and mortality scales.

Loading thumbnail…

Natural disaster death over years

This scatter plot shows deaths from natural disasters from 1900 to 2017, with each point representing a disaster type (drought, earthquake, epidemic, or extreme temperature) and its year. The y-axis displays total deaths on a linear scale, while the x-axis shows time. A color legend allows filtering by disaster type, dimming unselected categories. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, and SVG rendering. Data comes from a CSV file with entity, year, and death counts.

Loading thumbnail…

Natural disaster death over years

This scatter plot visualizes deaths from natural disasters, organized by disaster type and year, allowing users to explore trends and identify significant events. The visualization uses D3 v5 to render an interactive SVG chart with a color-coded legend; clicking a legend entry filters the plotted circles by that disaster type. The data is loaded via CSV and scales use d3.scaleTime and d3.scaleLinear, with axes generated by d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Natural disaster death over years

A scatter plot visualizes total deaths from natural disasters worldwide from 2004 to 2016, with each circle representing a country-year observation. Users can click the color legend to filter the view to a selected entity, while hovering reveals country, year, and death count details. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and SVG rendering with animated opacity transitions. Data comes from the World Happiness Report 2017 via Our World in Data, loaded through d3.csv.

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries from the World Atlas TopoJSON and TSV data. It supports pan and zoom via the d3.zoom API. Users can hover over a country to reveal its name label, which is positioned using d3.geoPath centroids. Clicking a country triggers a box zoom to its bounds. The map is rendered using the d3.geoNaturalEarth1 projection, with country labels toggled on mouseover and click events.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where users can click to place blue pointer markers anywhere on the globe. The map renders countries from TopoJSON data using d3.geoPath with a natural Earth projection. Click handlers use d3.mouse to capture coordinates and append SVG `<use>` elements referencing a predefined pointer icon. The visualization also incorporates d3.zoom for panning and scaling, with country names displayed via hover titles from a TSV dataset.

Loading thumbnail…

Data Table Summary

This example summarizes a CSV data table of self-reported life satisfaction by country and year from the World Happiness Report 2017. It displays the total row count, column count, and file size, followed by the first 10 rows of data as formatted JSON. The page uses d3.csv to load the dataset, d3.csvFormat to measure its size, and d3.select to append the results to the DOM as preformatted text.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where clicking anywhere on the SVG injects randomly sized circles onto the canvas, while hovering over individual countries highlights them by changing fill color using CSS. The visualization renders country boundaries from TopoJSON world-atlas data via a natural Earth projection in d3.geoPath, and implements pan-and-zoom controls through d3.zoom. The map itself uses svg elements, with mouse interaction handled through d3.mouse to capture click coordinates, and the underlying country names are loaded from a TSV file.

Loading thumbnail…

Cheap Tricks for Interaction

This example presents a zoomable, orthographic globe made of country polygons with hover highlighting. Users can click a country to select it, triggering a re-render of the map. The visualization is built with D3.js v5, using `d3.geoOrthographic` for the projection, `d3.geoPath` for rendering, and `topojson.feature` to convert TopoJSON data from the world-atlas package into GeoJSON features. Country names come from a TSV file, and SVG is used for the map.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map built with D3 v5, rendered as an SVG using the equirectangular projection. It combines zoom and pan controls with a hover effect that highlights individual countries in yellow. The implementation uses `d3.zoom` for the zoom/pan behavior and `d3.geoPath` for rendering geographical features from TopoJSON data. Custom functions calculate zoom limits and transitions, allowing users to smoothly zoom into specific countries or regions while maintaining boundaries within the viewport.

Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a dataset about happiness percentages from the World Happiness Report 2017, showing row count, column count, file size in kilobytes, and the first ten rows as formatted JSON. It uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the page body with `select` and `append`. The interface applies a retro terminal aesthetic with a black background and green monospace text via CSS.

Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

Five slices of bacon sit in a bowl, then animate over five seconds as some are eaten and others transform into eggs and an avocado, spelling out the letters B-A-E. The example uses d3 selections with enter, merge, and exit to update SVG ellipses and text, while d3.scaleOrdinal maps food types to colors and radii.

Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

A breakfast bowl animates through a timed sequence of D3 transitions, using elliptical shapes to represent bacon, eggs, and avocado as items are eaten or swapped by a mother preparing a 100-score exam-day meal. The visualization uses `d3.scaleOrdinal` for color and radius mapping, with `selection.enter`, `merge`, and `exit` to update SVG groups. Rendered as SVG with `d3.select`, the narrative unfolds via `setTimeout` calls that modify the data array and re-render the bowl.

Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

Breakfast Bowl animates a sequence of five items inside a rounded SVG bowl, beginning with five pieces of bacon and progressively swapping, removing, and replacing them with eggs and avocado. Each item is rendered as a colored ellipse with a text label, using `d3.scaleOrdinal` for color and radius mappings. The `d3` selection, `.enter()`, `.merge()`, and `.exit()` patterns manage the dynamic updates over timed transitions via `setTimeout` in JavaScript. SVG `<rect>` and `<ellipse>` elements form the bowl and fruit shapes.

Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

A breakfast bowl visualization uses D3 v5 to animate fruit images in an SVG. Apples, lemons, and avocados, rendered as colored ellipses, enter from the left, shift positions, and disappear over time, with text labels below. The code uses `selection.merge` for incremental updates, and sets ellipse radii and colors via `scaleOrdinal`. The animation simulates eating and replacing fruit, with a rounded rectangle as the bowl.

Loading thumbnail…

Circles and Ellipse

A simple SVG composition displays a discrete distribution of circles and ellipses in steel blue. Seven shapes—five ellipses and two circles—are placed at different coordinates, demonstrating varied aspect ratios from nearly flat to tall forms. The graphic is generated directly in HTML markup with no external libraries. The rendering uses the SVG `<circle>` and `<ellipse>` elements, scaled by a factor of 1.7 through a transform group, creating a compact and clean visual arrangement.

Loading thumbnail…

Beer Consumption in U.S.

This line chart shows beer consumption per person in the United States from 1890 to 2013, measured in litres of ethanol per year, with a visible gap during the Prohibition era (1920–1933) when values drop to zero. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, an `area` generator with `curveBasis` to create the filled curve, and `axisLeft` and `axisBottom` for labeled ticks. Data is loaded from a CSV file provided by Our World in Data, and the chart includes axis titles and a main title, with styling applied via external CSS.

Loading thumbnail…

Beer Consumption in U.S.

This visualization tracks U.S. beer and wine consumption per person from 1890 to 2013, using dual area charts to compare trends. Beer consumption peaks in the 1980s before declining, while wine gradually rises, with a notable zero-consumption gap during Prohibition (1920–1933). Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to render smooth SVG paths. Data comes from a CSV file containing annual alcohol consumption figures, with axes labeled for both beverage types.

Loading thumbnail…

Beer Consumption in U.S.

This visualization shows per-person beer and wine consumption in the United States from 1890 to 2013, with a notable drop to zero during Prohibition (1920–1933). Two filled area charts, one red for beer and one brown for wine, share a common time axis but use separate left and right y-scales. The code uses D3 v5 functions like `d3.csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `axisRight`, and `d3.area` with `curveBasis`, rendering to an SVG. Data comes from a local CSV file.

Loading thumbnail…

Beer Consumption in U.S.

This visualization displays annual beer and wine consumption per person in the United States from 1890 to 2013. Using d3.csv, the data is parsed and rendered as two filled area charts with d3.area and curveBasis, with separate linear y-scales for each beverage and a time-based x-scale. The visualization highlights the sharp drop to zero during Prohibition (1920–1933) before consumption resumes. Axis labels and titles are added via d3.axisLeft, d3.axisBottom, and d3.axisRight, with SVG rendering in an HTML page.

Loading thumbnail…

Beer Consumption in U.S.

This visualization shows beer and wine consumption per person in the U.S. from 1890 to 2013, with the beer area in brown and the wine area in red overlaid on dual y-axes. It reveals the stark drop to zero during Prohibition (1920–1933) and the steady rise of beer consumption afterward. The code uses D3 v5 with `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.axisLeft`/`d3.axisBottom`, rendering SVG area charts with curves and axis labels. Data comes from the provided CSV file.

Loading thumbnail…

Beer Consumption in U.S.

This visualization displays beer consumption per person in the U.S. from 1890 to 2013, using a stacked area chart with brown and red semi-transparent layers representing beer and wine consumption over time. The chart includes dual y-axes for wine (left) and beer (right), with a timeline showing the prohibition era as zero consumption. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `axisRight`, and `area` with `curveBasis` to render smooth SVG paths from the provided CSV data.

Loading thumbnail…

Beer Consumption in U.S.

This visualization displays beer consumption per person in the U.S. from 1890 to 2013, measured in litres of ethanol per year. The chart uses two overlaid area paths (red for wine, brown for beer) to compare consumption trends over time, revealing the prohibition-era drop to zero between 1920 and 1933. The D3 v5 code employs `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisLeft`/`axisBottom` methods to render the SVG. Data is sourced from Our World in Data.

Loading thumbnail…

Beer Consumption in U.S.

This visualization displays beer consumption per person in the U.S. from 1890 to 2013, measured in litres of ethanol per year. The chart uses two overlaid area paths (red for wine, brown for beer) to compare consumption trends over time, revealing the prohibition-era drop to zero between 1920 and 1933. The D3 v5 code employs `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisLeft`/`axisBottom` methods to render the SVG. Data is sourced from Our World in Data.

Loading thumbnail…

Beer Consumption in U.S.

This visualization shows beer and wine consumption per person in the United States from 1890 to 2013, plotted as two semi-transparent filled areas over time. The chart reveals a sharp drop to zero during Prohibition (1920–1933) and subsequent recovery trends. Using D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with `curveBasis` to render the stacked areas onto an SVG. Both the left and right y-axes display their respective beverage scales. Data originates from a CSV file containing annual consumption figures.

Loading thumbnail…

Beer Consumption in U.S.

This chart visualizes beer consumption per person in the United States from 1890 to 2013, alongside wine consumption for comparison. The data, sourced from a CSV file, reveals a sharp drop to zero during Prohibition (1920–1933) and a general rise in beer consumption afterward. The visualization uses D3 v5 with SVG rendering, implementing two separate linear scales for beer and wine, a time scale for years, and area generators with curveBasis to create smooth filled regions. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while right-side axis labels are configured through `axisright`.

Loading thumbnail…

Beer Consumption in U.S.

This area chart shows beer consumption per person in the U.S. from 1890 to 2013, measured in litres of ethanol per year, with a visible gap and zero values during Prohibition (1920–1933). The visualization uses D3 v5 to render an SVG, employing `d3.scaleLinear`, `d3.scaleTime`, and `d3.area` with a basis curve to draw the beer consumption path. Two y-axes (left and right) display the same scale for beer and wine data, though only the beer series is plotted. Data is sourced from Our World in Data.

Loading thumbnail…

Beer Consumption in U.S.

This area chart displays beer consumption per person in the U.S. over time, with the x-axis representing years and the y-axis measuring litres per person. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to render the SVG path, alongside `axisBottom` and `axisLeft` for labeled axes. Data is loaded via `csv` from a VizHub-hosted dataset, and the chart includes a legend for multiple series, though the primary rendered element is the maroon area fill.

Loading thumbnail…

Beer Consumption in U.S.

This line chart tracks beer consumption per person in the United States from 1890 to 2013, measured in litres of ethanol per year. The visualization clearly shows a sharp drop to zero during the Prohibition era (1920–1933) followed by a gradual recovery and rise in consumption. Built with D3 v5, the SVG uses `scaleTime` and `scaleLinear` to map the data, with `area` and `curveBasis` for the filled path. Data is loaded via `d3.csv` from Our World in Data.

Loading thumbnail…

Beer Consumption in U.S.

This area chart visualizes beer consumption per person in the United States from 1890 to 2013, measured in liters of ethanol per year. The chart highlights the complete drop to zero during Prohibition (1920–1933) and the subsequent recovery and rise in consumption. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, and an `area` generator with `curveBasis` to create the smooth filled path. Data is loaded from a CSV file using `d3.csv` and rendered as SVG.

Loading thumbnail…

Alcohol Consumption in U.S.

This visualization shows per-capita beer consumption in the United States from 1890 to 2013, with a distinct gap representing Prohibition. The chart uses an area generator with a basis curve to create a smooth, filled region under the line, rendering each data point as part of a single path. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` helper, reading data from a CSV file. The SVG output includes axis labels, gridlines, and a title, with the maroon-filled area highlighting trends over time.

Loading thumbnail…

Alcohol Consumption in U.S.

The chart displays annual per-person alcohol consumption in the U.S., tracking three beverage categories—Spirits, Beer, and Wine—over time as filled area paths. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render smooth, stacked SVG paths, with a separate y-scale defined for each category. The data is loaded via `d3.csv` from a CSV file hosted on VizHub, and the visualization includes labeled axes and a title within an SVG canvas.

Loading thumbnail…

Beer Consumption in U.S.

This visualization shows beer consumption per person in the U.S. over time, using a filled area chart with a smooth curve. The chart plots yearly data with the y-axis labeled in liters per person. It is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and an `area` generator with `curveBasis`. The code also references multiple line generators and a color legend for additional series, though the primary dataset comes from a CSV file on VizHub. The SVG renders with custom styling for axis labels and title.

Loading thumbnail…

Circle and Ellipse

This example by Chooo4u displays a collection of circles and ellipses arranged within a rectangular frame, all filled in steel blue. It demonstrates the basic geometric shapes available in SVG, with varying sizes and orientations including horizontal and vertical ellipses. Built with D3 v5, the code uses the `select` function to target the SVG element and appends shapes using methods like `append('circle')` and `append('ellipse')`, with attributes such as `cx`, `cy`, `rx`, and `ry` set to position and size each form.

Loading thumbnail…

Circle and Ellipse

A collection of simple geometric shapes—circles and ellipses—in steel blue is arranged within a rectangular frame drawn using a path. The example demonstrates basic SVG shape creation with D3 v5, using the `select` and `append` methods to add elements to an SVG canvas. It includes large and small circles, as well as horizontally and vertically oriented ellipses, all positioned at various coordinates. The rendering approach relies on direct SVG attributes like `cx`, `cy`, `r`, `rx`, and `ry`, with styling applied via the `.style` method.

Loading thumbnail…

Circle and Ellipse

A set of steel-blue geometric shapes demonstrates the contrast between circles and ellipses. The SVG drawing shows one large circle, two small ones, and several ellipses with varying horizontal and vertical radii, all enclosed within a rectangular frame. Constructed using D3.js version 5, the example uses selection methods and attribute setters like `.append('circle')`, `.attr('cx')`, and `.attr('ry')`. The code imports specific functions from the d3 module, and the static SVG is rendered with no data binding or animation.

Loading thumbnail…

Circle and Ellipse

A gallery example renders basic geometric shapes using D3 v5 selections, displaying a rectangular frame drawn as a path with circles and ellipses in steel blue fill. It pairs a large circle with a horizontally flattened ellipse, a small circle with a vertically stretched ellipse, and a large circle with another horizontal ellipse. The code uses `select` to target the SVG element, while `append` creates each shape and attributes like `cx`, `cy`, `rx`, and `ry` define their positions and dimensions.

Loading thumbnail…

Circle and Ellipse

This example shows a collection of blue circles and ellipses arranged on a white canvas inside a rectangular frame. The shapes vary in size and orientation, including large and small circles, plus horizontally and vertically flattened ellipses. The visualization uses D3 v5, importing `select` from the d3 module to manipulate the SVG. All shapes are appended directly to an SVG element with fixed positions and dimensions, using D3’s selection and attribute methods to set coordinates, radii, and fill colors. No data source or interaction is involved; the display is purely static.

Loading thumbnail…

Circle and Ellipse

A gallery of geometric primitives demonstrates the visual difference between circles and ellipses through a series of steelblue shapes arranged within a black rectangular frame. The example uses D3 v5’s `select`, `append`, and `attr` methods to construct SVG circles and ellipses, varying their radii, widths, and heights to show horizontal, vertical, and near-circular forms. Each shape is manually positioned with explicit `cx`, `cy`, `rx`, and `ry` coordinates, providing a clear static reference for how scaling one axis transforms a circle into an ellipse.

Loading thumbnail…

Circle and Ellipse

This example showcases a set of geometric shapes—circles and ellipses—arranged in a framed SVG canvas. The visualization presents various configurations, including a large circle, a small circle, and horizontally and vertically oriented ellipses, all filled with a steelblue color. The code uses D3.js v5 to select the SVG element and append each shape, setting attributes like center coordinates (`cx`, `cy`), radii (`r`, `rx`, `ry`), and a styled border. A black rectangular frame is drawn using a path, and the rendering is done entirely through SVG. The data source is not specified, as the shapes are manually defined in the script.

Loading thumbnail…

Circle and Ellipse

This example demonstrates a geometric composition of circles and ellipses within a rectangular frame. The visualization uses D3 v5’s `svg` selection and appending methods to draw shapes, including a large circle, a horizontal ellipse, and several small points, all filled in steel blue. The SVG canvas is 960 by 500 pixels, with a manually defined path outlining the frame. The code directly sets shape attributes like `cx`, `cy`, `rx`, and `ry` to position and size each element.

Loading thumbnail…

Circles and Ellipse

Circles and ellipses in steel blue form a small abstract composition against a simple framed backdrop. The SVG markup places shapes of various sizes and orientations, some nearly round and others strongly flattened or elongated, to create a discrete distribution across the canvas. Using only native SVG circle and ellipse elements with inline attributes, the example relies on the CSS transform scale for sizing and applies a stroke to a path that outlines the viewing area. Rendering output is an SVG graphic, built directly in index.html with styles from the linked stylesheet.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays self-reported life satisfaction across the world from 2004 to 2016, mapping each country’s Happiness Rank against the year. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to position orange, semi-transparent circles within an SVG, with `axisBottom` and `axisLeft` providing labeled axes. Data is loaded via `d3.csv` from a modified World Happiness Report 2017 dataset hosted on VizHub, and the chart includes gridlines and a title annotation.

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between year and happiness rank for self-reported life satisfaction across the world from 2004 to 2016, with each orange circle representing a data point. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map the temporal and ranked variables, while `axisBottom` and `axisLeft` generate the labeled axes with gridlines. The code loads CSV data from a VizHub dataset based on the World Happiness Report 2017 and renders the plot as SVG elements, with semi-transparent circles to reveal overlapping points.

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between year and happiness rank for self-reported life satisfaction across the world from 2004 to 2016, with each orange circle representing a data point. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map the temporal and ranked variables, while `axisBottom` and `axisLeft` generate the labeled axes with gridlines. The code loads CSV data from a VizHub dataset based on the World Happiness Report 2017 and renders the plot as SVG elements, with semi-transparent circles to reveal overlapping points.

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between year and happiness rank for self-reported life satisfaction across the world from 2004 to 2016, with each orange circle representing a data point. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map the temporal and ranked variables, while `axisBottom` and `axisLeft` generate the labeled axes with gridlines. The code loads CSV data from a VizHub dataset based on the World Happiness Report 2017 and renders the plot as SVG elements, with semi-transparent circles to reveal overlapping points.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes life satisfaction data by plotting year on the x-axis against happiness rank on the y-axis, using circles with partial opacity to show individual data points. The visualization is built with D3 v5, employing scaleTime and scaleLinear for axes, with axisBottom and axisLeft generating the ticks. The data is loaded from a CSV file hosted on VizHub, and the SVG rendering includes labeled axes and a title. The code uses d3.csv to fetch and parse the dataset, with Date.parse converting year values.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays life satisfaction data from the UCI Machine Learning Repository’s Auto MPG dataset, showing the relationship between year and happiness rank for multiple countries. The visualization uses d3.csv to load the data, then d3.scaleTime and d3.scaleLinear to map the axes, with d3.axisBottom and d3.axisLeft rendering the tick marks. Each data point is drawn as a circle using SVG, with a d3.scaleOrdinal assigning distinct colors to different countries. The plot includes axis labels and a title, and the dataset is loaded from a VizHub-hosted CSV file.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between Year and Happiness Rank for cars, drawing on UCI Machine Learning Repository’s Auto MPG dataset. The code uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.extent to map data to SVG circles, with semi-transparent red points and labeled axes. The rendering is done via D3 v5, loading data from a CSV file, and includes a title and rotated axis labels. The plot emphasizes general trends rather than individual data points.

Loading thumbnail…

The Best-selling Video Games of All Time

This horizontal bar chart displays the top ten best-selling video games by total sales, with Tetris and Minecraft leading in copies sold. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` to map sales values and game titles, while `axisLeft` and `axisBottom` render the axes. SVG rectangles encode the data, and the axis tick labels are formatted with D3’s `format` function to abbreviate large numbers. Data comes from a CSV file listing sales figures sourced from Wikipedia.

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset, showing the total number of rows, columns, and file size, followed by the first ten rows rendered as formatted JSON. It uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, and `select` to append `<pre>` elements to the page. The data, sourced from the World Happiness Report 2017, is displayed in a monospaced terminal style with green text on a black background.

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a video game franchise dataset, showing the row and column count, file size in kilobytes, and the first 10 rows formatted as JSON. It loads the data from a CSV file using `d3.csv` and uses `csvFormat` from D3 v5 to compute the size. The page renders the output in monospaced `<pre>` elements with a black background and green text, styled via CSS. The source data is a 2018 estimate from the United Nations World Population Prospects.

Loading thumbnail…

Data Table Summary

This example summarizes the structure and content of a small CSV file containing sales figures for the top five best-selling Mario video game series. The visualization displays a plain-text report showing the number of rows, columns, and file size in kilobytes, followed by a JSON-formatted preview of the first 10 rows. Built with D3.js v5, the code uses the `csv` function to load the data and `select` to append `<pre>` elements to the document body. The data originates from a 2018 estimate in the United Nations World Population Prospects, though the displayed file contains Mario game sales.

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file, showing the row count, column count, and file size in kilobytes, followed by the first 10 rows as formatted JSON. The visualization uses D3 v5’s `select` and `csv` APIs to load and parse the data, then writes the output into `pre` elements on a black background with green monospace text. The data, sourced from a file about Mario game sales, is processed entirely in the browser without additional rendering libraries.

Loading thumbnail…

The Best-selling Video Games of All Time

This bar chart displays the top 10 best-selling video games of all time, ranked by total units sold, with sales figures from Wikipedia’s list of best-selling games. The visualization uses D3 v5’s `scaleLinear` for the sales axis and `scaleBand` for the game titles, rendering bars as pink SVG rectangles. The code loads data via `csv()` from `data.csv`, multiplies each sales value by 1000 for readability, and applies `axisLeft` and `axisBottom` to generate the axes.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation and animation. The code draws a yellow circle with eyes, cheeks, pupils, eyebrows, and a mouth using `d3.select`, `d3.append`, and `d3.arc`. Transitions animate the pupils shifting side-to-side and the eyebrows moving up and down via `transition.attr`. The example relies on D3’s selection and transition APIs to update SVG attributes, with no external data source.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face with D3.js, demonstrating DOM manipulation through SVG elements. The face’s eyebrows and pupils animate via chained `transition().duration()` calls, shifting their positions over time. The code uses D3’s `select`, `append`, and `attr` methods to construct the circles and paths, while the `arc()` function generates the eyebrow and mouth shapes. The face is centered within an SVG canvas, with static features like cheeks and eyes, while the animated parts bring the character to life.

Loading thumbnail…

Let's make a face with D3.js!

A D3.js v5 animation builds a smiley face from SVG shapes, using circles for the head, eyes, pupils, and cheeks, plus path and rect elements for the mouth and brows. The code demonstrates fundamental DOM manipulation and transitions: the pupils and eyebrows move via chained `transition().duration()` calls that repeatedly shift their `transform` attributes. It also uses the `arc()` generator from D3 to shape the mouth and left eyebrow, all drawn on a fixed 960×500 SVG canvas without external data.