S

sriramvsharma

@sriramvsharma·57 public vizzes

Loading thumbnail…

Pantheon - Tracking Cultural Output Through The Ages (With Tooltips)

A geospatial bubble map plots notable women from Pantheon.world by birthplace, with circle size encoding each person’s Historical Popularity Index and color mapping occupation. A linked brushable time-series histogram below aggregates the same metric by birth month, filtering the map’s visible points via a D3 brush. The visualization uses `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, and `scaleOrdinal` for mapping, and renders tooltips with Tippy.js on hover. Data loads from a remote CSV, while world geometry comes from TopoJSON.

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset scene with a gradient sky, a moving sun, and two layered landscapes. The SVG rendering uses native SMIL animations within the markup, including `<animate>` elements that cycle the sun’s vertical position and animate color stops of radial and linear gradients. The code defines three gradients (`sky-gradient`, `land1-gradient`, `land2-gradient`) and applies them to a rectangle and two path shapes. No external libraries are used; the visualization relies purely on SVG fundamentals and CSS styling for layout.

Loading thumbnail…

Fork of Dispatching Events Example

This example demonstrates a custom D3 chart component that emits events to communicate changes. The Circle component renders an SVG circle that, when clicked, dispatches an `input` event with a new random radius value. The main script listens for this event and calls the circle’s update method, which uses a transition to animate the radius to the new size. The code uses D3’s `create` and `select` functions, along with the `dispatch` and `property` methods, to implement a reusable event-driven pattern. The circle’s cursor is set to a pointer to indicate interactivity.

Loading thumbnail…

Airplanes-to-heaven

This example shows the scale of COVID-19 deaths by rendering 8,524 airplane emojis, each representing 366 people—the seating capacity of a Boeing 747—as of April 27, 2021. The plain-text data is expanded in a `for` loop in JavaScript and inserted into the DOM via `document.getElementById("root").innerHTML`. Styling uses a simple CSS grid with a centered wrapper and constrained paragraph width. The visualization relies solely on vanilla JavaScript and CSS, with no external libraries or data loading.

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This example renders a dynamic, animated reproduction of a Sol LeWitt art piece using D3.js. The visualization fills the entire browser window with a grid of thin horizontal and vertical rectangular stripes, each masked to reveal a series of large geometric symbols such as circles and stars. The piece uses D3’s `select`, `range`, `join`, and `symbol` APIs to generate the SVG shapes, while CSS keyframe animations cycle the background gradient. The masks are constructed with `symbol` paths, and the code references `window.innerWidth` and `window.innerHeight` for the canvas size.

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v6. It displays a grid of horizontal and vertical lines that remain visible only within two circular regions, creating a layered visual effect through masking. The code uses `d3.select` to create SVG elements and `d3.range` with `join('rect')` to generate 100 line strips in each direction. Two SVG masks (`circle-mask` and `circle-mask-2`) alternate black and white fills to reveal or hide the lines within the circles, all rendered with dynamic window dimensions.

Loading thumbnail…

Let's Make a Face Part I

This example uses raw SVG elements to construct a simple smiley face with two eyes and a yellow circular head, drawn directly in an HTML document. The code defines one large circle for the face and two smaller black circles for the eyes, setting attributes like center coordinates, radius, fill color, and stroke width. No JavaScript or external libraries are involved, only static SVG markup. The rendering uses a fixed 960 by 500 pixel coordinate system, with the face centered at 480, 250 and the eyes positioned symmetrically around it.

Loading thumbnail…

Pantheon - Tracking Cultural Output Through The Ages

This visualization tracks the cultural output of notable figures through time using a world map and a time-series histogram. The map plots the birthplaces of individuals from a Wikipedia-based dataset, with circle size and color encoding their historical popularity index and occupation. A linked date histogram, featuring a brush for selection, filters the map to show only those figures born within a chosen era. The graphic is built with React and D3, using `d3.geoNaturalEarth1` for map projections, `d3.scaleSqrt` for sizing, and `d3.brushX` for the interactive timeline filter.

Loading thumbnail…

Hello HTML

This example demonstrates the simplest possible HTML document structure, rendering a single "Hello World!" heading in a browser. The page contains a `<head>` section with a title and a `<body>` section with an `h1` element, both marked up with explanatory comments. It uses no external libraries or JavaScript, relying solely on native HTML elements and the browser’s default rendering. The code serves as a foundational template for understanding how tags define document hierarchy and display content.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with each country rendered as a light green SVG path. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson feature function. D3 v5’s geoNaturalEarth1 projection and geoPath generator handle the map’s shape and layout. The map appears static, with country borders outlined in black and a subtle stroke opacity, though no sphere or ocean background is drawn.

Loading thumbnail…

Cheap tricks for interactive maps - India

This interactive map of India displays district and state boundaries with hover effects. District polygons fill with categorical colors, while state outlines appear in steel blue, and zooming is enabled through the d3.zoom API. The visualization uses d3.geoPath with the geoMercator projection to render TopoJSON data for both administrative levels. Tooltips show district and state names via SVG title elements. Data comes from GitHub-hosted TopoJSON files for Indian states and districts, with city coordinates loaded from a CSV file.

Loading thumbnail…

Cheap tricks for interactive maps - India

This interactive map of India displays district-level boundaries colored by state, with state outlines overlaid in steel blue. Users can pan and zoom the map using D3's zoom behavior. The visualization uses d3.geoPath with a geoMercator projection to render TopoJSON district and state data from GitHub sources, while CSV data provides city locations. Hovering over districts reveals tooltips with district and state names, and the map employs d3.scaleOrdinal with schemeCategory10 for color encoding.

Loading thumbnail…

Let's make a map with D3.js!

This example renders a choropleth-style map of Indian districts using D3.js and TopoJSON. The visualization displays administrative boundaries as light green SVG paths with subtle black stroke outlines, projected using the Natural Earth projection via `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. Geographic data is loaded asynchronously from a remote TopoJSON file, with the TopoJSON `feature` API extracting the district geometries. The code uses D3’s `select`, `json`, and `enter` methods to attach the projected paths to an SVG canvas.

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js version 5 and TopoJSON, displaying countries as light green paths with subtle black strokes against a blue spherical backdrop. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths from geographic features. The map loads country boundaries from the world-atlas TopoJSON dataset (110m resolution) via `d3.json`, then appends each country path to the SVG canvas. The visualization demonstrates a clean, static cartographic rendering suitable for introductory mapping tutorials.

Loading thumbnail…

Pantheon - Tracking Cultural Output Through The Ages

This interactive visualization tracks the cultural output of historically notable individuals using the Pantheon dataset, which contains over 60,000 biographies from Wikipedia. A world map displays circles sized by each person's Historical Popularity Index (HPI), while a linked date histogram below allows brushing to filter the map by birth year. The visualization uses d3.geoNaturalEarth1 for the map projection, d3.geoPath for geographic features, and d3.scaleSqrt for circle sizing, with React managing the component state and brush interactions via D3's brushX.

Loading thumbnail…

Hello HTML

This example demonstrates that SVG elements can be rendered directly within an HTML page without any external dependencies. The code defines a single `<circle>` element with a radius of 100 units inside an inline `<svg>` tag, which the browser displays as a black circle. No JavaScript or styling is applied, so the circle appears at the default position. The example highlights the fundamental simplicity of embedded vector graphics, serving as a minimal starting point for HTML-based data visualization.

Loading thumbnail…

Hello HTML

This example demonstrates a minimal HTML web page that displays the text “hello” in the browser body. The code uses only standard HTML elements—`<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, and `<body>`—with no external libraries or JavaScript APIs. It shows the basic structure required for any web document, relying on the browser’s built-in rendering of plain text content. The page’s title is set to “Hello HTML” via the `<title>` tag, while the visible content is the literal string in the body.

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as an SVG circle with a black stroke, missing its second eye and mouth, sits centered on a blank canvas. Built with React and ReactDOM, the visualization uses hard-coded numeric constants for geometry, including center coordinates, radius, and eye offsets, to position the face. The code renders only one eye circle, leaving the composition incomplete. React’s `render` method mounts the SVG elements into a root DOM node, demonstrating a state-free, declarative approach to static graphic generation.

Loading thumbnail…

Smiley Face Part V

This gallery example displays a grid of 18 randomly generated smiley faces, each rendered as an SVG using React components. The code imports `arc` from D3 v5 to construct the mouth shape for each face. React Fragments group the eye elements without adding extra DOM nodes. Using ES6 modules, the code splits components into separate files: `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The `range` function from D3 generates the array that maps over to create the repeated faces, with random values assigned to eye offset, radius, and stroke width.

Loading thumbnail…

Smiley Face Part V

This example renders a yellow smiley face composed of separate React components for the background circle, eyes, and mouth. It demonstrates modularization with ES6 modules and React Fragments, using a face container to group SVG elements. The code relies on React 16.9, D3 v5’s `arc` generator for the mouth path, and renders static SVG without data binding or interactivity.

Loading thumbnail…

Smiley Face Part IV

This example renders a yellow smiley face as an SVG using React components and D3’s `arc` API for the mouth. The face is centered on a 960×500 canvas, with a background circle (yellow fill, black stroke), two eyes positioned via offset coordinates, and a mouth generated from an arc with inner and outer radii. All shapes are drawn declaratively in JSX, with React managing the component props for radius, stroke width, and offsets, while the `g` transform handles centering. The code defines fixed dimensions and styling rather than loading external data.

Loading thumbnail…

Smiley Face Part IV

A smiley face drawn with SVG in React and D3. The app renders a yellow circle for the face, two smaller circles for the eyes, and a D3-generated arc path for the mouth, all positioned within a translated group. It uses React components for the UI structure and the D3 `arc()` generator to compute the mouth’s path. The code hardcodes a person object with Jane Doe’s name but does not display it.

Loading thumbnail…

Hello HTML

A bare-bones HTML page displays the text "Hello HTML" in the browser, with the document structure defined by standard HTML elements. The example serves as a minimal starting point for any web-based visualization, containing only the essential `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` tags. A separate `<script>` tag executes a `console.log` statement that outputs "Hello JavaScript!" to the browser's developer console, demonstrating the integration of JavaScript into an otherwise static page. No external libraries or data sources are used.

Loading thumbnail…

Hello HTML

This example demonstrates the simplest possible SVG graphic: a plain circle with no fill or stroke, centered in an HTML page. The code creates the circle using an inline `<svg>` element with a `<circle>` tag, setting only the radius to 100 units. It relies on built-in HTML and SVG capabilities, requiring no external JavaScript libraries or data sources. The page’s title, "Hello HTML," reflects the focus on minimal markup, and the rendering is handled directly by the browser’s SVG engine.

Loading thumbnail…

Treemap from bl.ocks.org

A treemap displays the top 100 best-selling video games, grouped by platform and sized by sales value in millions. Built with D3 v4, the visualization uses `d3.treemap` with a resquarify tiling algorithm, `d3.hierarchy` for data nesting, and `d3.scaleOrdinal` with a faded category color scheme. SVG rectangles represent each game, with clip-paths and text elements for labels, while the data comes from a local JSON file. The layout is rendered with rounded padding and no animation in the current version.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the percentage of residents with a bachelor’s degree or higher across U.S. counties. Each county is filled with a color from the d3.schemeGreens palette, mapped through d3.scaleThreshold to the education data. The map uses d3.geoAlbersUsa projection with d3.geoPath to render county boundaries from TopoJSON data, while a color legend built with reusable D3 code shows the scale. The visualization also supports zooming and panning via d3.zoom.

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes U.S. county boundaries as a natural Earth projection map, with the sphere background filled in blue and country shapes rendered in light green. It loads GeoJSON data from a freeCodeCamp choropleth dataset and uses `d3.geoPath` with `d3.geoNaturalEarth1` to project and draw the paths. The code selects an SVG element, appends a sphere path, then joins the TopoJSON features to append individual county paths using D3's data join. The map is static, with no interaction or animation beyond the initial rendering.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters the map to highlight a selected category while dimming others. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders country paths with `d3.geoPath` in an SVG. Users can click legend circles to toggle filtering, and a zoom behavior (`d3.zoom`) enables panning and scaling. Data comes from the World Atlas TopoJSON and TSV files, with colors mapped using `d3.scaleOrdinal` and `schemeSpectral`.

Loading thumbnail…

Pantheon - Tracking Cultural Output Through The Ages

This visualization combines a world map with a time-series histogram to explore cultural output through the ages. Using d3.geoNaturalEarth1 and d3.geoPath, it plots notable figures as circles on a natural Earth projection, with circle size reflecting each person's Historical Popularity Index. A d3.brushX interactive date histogram below filters the map by birthdate range. The visualization uses React and d3.v5 to render SVG elements, drawing from a CSV dataset of women with confirmed birthdates sourced from Pantheon.

Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region as multiple smoothed lines, using a color legend to distinguish regions. The data is melted from wide to long format in `loadAndProcessData`, combining UN population estimates (1950–2014) with medium-variant projections (2015–2100). D3 v5 APIs include `d3.nest`, `d3.line` with `curveBasis`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal`. A custom `colorLegend` function renders SVG legends, while axes use `d3.axisBottom` and `d3.axisLeft` with tick formatting via `d3.format`.

Loading thumbnail…

Pantheon - Tracking Cultural Output Through The Ages

A world map with a time-brushing histogram visualizes the cultural output of notable women throughout history, using the Pantheon dataset. A natural Earth projection renders landmasses and graticules via `d3.geoPath`, while `d3.scaleSqrt` sizes each circle by a person's Historical Popularity Index. A date histogram, built with `d3.histogram` and `d3.brushX`, filters the map's displayed figures. The React app uses `d3.csv` for data loading and `topojson` for world atlas features.

Loading thumbnail…

Mouse Follower

A mouse follower visualizes real-time pointer tracking by rendering a circle that follows the cursor across an SVG canvas. Built with React, the app uses the `useState` hook to store the mouse position and a `handleMouseMove` callback triggered by the SVG’s `onMouseMove` event. The circle’s center coordinates update directly from `clientX` and `clientY`, providing immediate feedback within a fixed 960×500 viewport. Material-UI’s `Tooltip` import is present but unused in the rendered output.

Loading thumbnail…

Pantheon - Tracking Cultural Output Through The Ages

This interactive visualization tracks the cultural output of notable women through time, using a world map to display the birth locations of historically significant individuals. A date histogram below the map allows users to brush across time periods, filtering the map to show only people born within the selected range. The map uses a natural Earth projection with graticules and land outlines, while circles sized by each person's Historical Popularity Index are colored by occupation. Built with React, the visualization leverages D3's `geoNaturalEarth1` projection, `geoPath`, `geoGraticule`, `csv` data parsing, and `brushX` for the interactive filtering.

Loading thumbnail…

Vega-Lite API Template

A scatter plot visualizes modern mathematicians, statisticians, computer scientists, engineers, inventors, biologists, and physicists born after 1950 across seven countries, mapping historical prominence index (hpi) and lifespan (l) on the axes. Each point’s color and fill encode occupation, shape indicates birth country, and size reflects non-English page views. The example uses the Vega-Lite API to construct the specification programmatically, with D3’s `csv` loading data from the Pantheon.world dataset, and renders through Vega with tooltip support.

Loading thumbnail…

Vega-Lite API Template

A bar chart visualizes historical figures from the Pantheon dataset, comparing their Heritage Price Index (hpi) across ten countries while color-coding by occupation. The visualization filters the raw CSV data to include only mathematicians, statisticians, computer scientists, engineers, inventors, biologists, and physicists from the United States, United Kingdom, Germany, Italy, China, India, Japan, South Korea, Canada, and France. Built with the Vega-Lite API, the chart uses `vl.markBar()` and encodes fields for country, hpi, occupation, and tooltip with figure names. The code loads data via D3's `csv`, applies custom configuration for axis styling, and renders through Vega, Vega-Lite, and vega-tooltip libraries.

Loading thumbnail…

Smiley Face Part III

This example shows a yellow smiley face composed of SVG shapes, with circular eyes, a thick outlined face, and an arc-shaped mouth drawn centered on a 960×500 canvas. The visualization is built using React for component structure and D3’s `arc` generator to compute the mouth path. D3 v5 supplies the arc shape, while React handles rendering the SVG elements, including circles for the face and eyes, a path for the mouth, and a text label. All dimensions and positions are defined as constants in the code.

Loading thumbnail…

Renowned Computer Scientists by Country

This scatterplot visualizes renowned computer scientists by country, plotting each individual's Historical Popularity Index against their birthplace. The visualization uses D3 v5 to render an SVG chart with a point scale on the y-axis and a time scale on the x-axis, showing data from the Pantheon dataset. Each red, semi-transparent circle represents a scientist, and hovering reveals a tooltip with their name, birth year, and birthplace details via the d3-tip library.

Loading thumbnail…

World Famous Mathematicians

This scatterplot shows the relative fame of renowned mathematicians based on their Historical Popularity Index and birth year, with each point sized by popularity and colored by country of birth. Hovering reveals a tooltip with the mathematician’s name, birth date, and place of birth, along with a link to their Wikipedia article. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `d3-tip` for interaction, rendering SVG circles over axes with gridlines. Data comes from the Pantheon dataset, loaded via `d3.csv`.

Loading thumbnail…

World Famous Mathematicians

This scatterplot maps renowned mathematicians by their Historical Popularity Index against the number of Wikipedia language editions, with bubble size reflecting popularity and color indicating country of birth. Interactive tooltips reveal each mathematician’s name, birth year, birthplace, and a link to their Wikipedia page. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for color encoding, and D3-tip for hover interactions. Data comes from the Pantheon dataset, rendered as SVG circles with animated mouseover effects.

Loading thumbnail…

World Famous Mathematicians

This scatterplot visualizes the historical popularity and Wikipedia language editions of renowned mathematicians, with each point sized by popularity and colored by country of birth. The chart uses D3 v5's linear scales, ordinal color scale, and SVG rendering, with an interactive tooltip from the d3-tip library displaying the mathematician’s name, birth year, and birthplace. Data comes from the Pantheon dataset, loaded via CSV from a remote repository, and axes are labeled with custom formatting and gridlines.

Loading thumbnail…

Heat Map: Monthly Global Land-Surface Temperature

This heat map visualizes monthly global land-surface temperature anomalies from 1753 to 2015, with a base temperature of 8.66°C. Each cell represents a month and year, colored by temperature variance using a custom 14-color scale. The visualization is built with D3 v5, using `scaleTime` for axes, `scaleLinear` for color mapping, and SVG rectangles for rendering. Data is fetched from the FreeCodeCamp ProjectReferenceData JSON source, while the legend and axis labels are generated with `axisBottom` and `axisLeft`. The code includes commented-out tooltip logic, but no interactive tooltips are active in the final render.

Loading thumbnail…

Renowned Mathematicians by Country

This scatterplot shows renowned mathematicians by country, plotting each individual’s Historical Popularity Index against their birthplace country. The data comes from the Pantheon dataset, with points colored red and tooltips revealing the mathematician’s name, birth year, and birthplace details. The visualization uses d3.v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the categorical y-axis, along with `d3-tip` for mouseover interactions. Grid lines from the axes help compare values across countries, while the title labels the chart clearly.

Loading thumbnail…

Famous Computer Scientists

This scatterplot shows notable computer scientists positioned by their Historical Popularity Index and Wikipedia language editions, with point size encoding the popularity index and color differentiating their birth country. The visualization is rendered as an SVG using D3 v5, built with `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, `schemeCategory10` for color mapping, and tooltips revealing each scientist’s name. Data originates from the Pantheon dataset, loaded via `csv` from a remote URL.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization presents migrant deaths through two linked views: a world map with proportional circles and a time-series histogram. Users brush a date range in the histogram to filter which data points appear on the map. Built with React and D3 v5, the map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while the histogram employs d3.histogram, d3.scaleTime, and d3.brushX for interactive filtering. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Heat Map: Monthly Global Land-Surface Temperature

This heat map visualizes monthly global land-surface temperatures from 1753 to 2015, with each cell colored according to temperature variance from a base of 8.66°C. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the year and month axes, `scaleOrdinal` with a custom color range for temperature values, and `d3-tip` for interactive tooltips displaying month, temperature, and variance details. A color legend with discrete temperature bands appears beneath the chart. Data comes from the FreeCodeCamp ProjectReferenceData GitHub repository.

Loading thumbnail…

Monthly Global Land-Surface Temperature

This visualization displays monthly global land-surface temperature anomalies from 1753 to 2015, using a base temperature of 8.66°C. A heatmap grid shows each month-year combination as a colored cell, with colors ranging from deep red (cold) to dark blue (warm). The D3.js code fetches JSON data from a FreeCodeCamp repository, scales the temperature values linearly, and renders an SVG with axes for years and months. d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft handle the scales and axes, while a separate legend shows the color scale.

Loading thumbnail…

Temperature in Vancouver Scatter Plot

This scatter plot displays a month of hourly temperature readings in Vancouver, with each circle representing a measurement over time on the x-axis and degrees Celsius on the y-axis. It uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv to load data from a remote GitHub-hosted file. Circles are appended as SVG elements with a hover tooltip showing the exact temperature. The chart includes axis labels and a title, with data sourced from the Canadian government’s climate weather site.

Loading thumbnail…

Temperature in Vancouver Line Chart

This line chart visualizes a month of hourly temperature data in Vancouver, sourced from climate.weather.gc.ca. The D3.js v5 code uses `scaleTime` and `scaleLinear` to map timestamps and temperatures, with `axisLeft` and `axisBottom` generating grid lines. A smooth `curveBasis` line, rendered via an SVG path, connects the data points, emphasizing the temperature trend over time. The chart includes labeled axes and a title, with the data parsed from a remote CSV file.

Loading thumbnail…

SF Temperature Scatter Plot

This scatter plot displays the relationship between a Historical Popularity Index and Wikipedia language editions for notable computer scientists, with each circle representing an individual. The visualization uses D3 v5 to load CSV data, apply linear scales with `scaleLinear`, and render SVG circles with tooltips. Axes are generated using `axisBottom` and `axisLeft`, with gridlines created via tick sizing. The chart is titled "Temperature Scatterplot" and sources data from the Pantheon dataset, though the code references a weather CSV URL.

Loading thumbnail…

Data Table Summarizer

This example summarizes a data table by displaying basic statistics and a preview. It loads a CSV file containing hourly weather data from Vancouver, using the `select` and `csv` functions from the D3.js library (v5). The page then appends three `<pre>` elements to the body, showing the row and column count, the approximate size in kilobytes computed via `csvFormat`, and the first 10 rows as formatted JSON. The visualization is presented in a terminal-like style with black background and green monospace text.

Loading thumbnail…

Scatter Plot

A scatter plot ranks the top ten countries by their all-time Olympic medal counts, with circles positioned along a linear scale for medal totals and a categorical axis for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the SVG chart, with data loaded from a CSV file. Grid lines extend across the plotting area, and the title highlights the dataset's focus on Olympic medal hauls.

Loading thumbnail…

Scatter Plot

A scatter plot ranks the top ten countries by their all-time Olympic medal counts, with circles positioned along a linear scale for medal totals and a categorical axis for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the SVG chart, with data loaded from a CSV file. Grid lines extend across the plotting area, and the title highlights the dataset's focus on Olympic medal hauls.

Loading thumbnail…

Chart: Which Country Has the Most Olympic Medals?

This horizontal bar chart ranks the top ten countries by all-time Olympic medal count, with the United States leading by a wide margin. The visualization is rendered as an SVG using D3 v5, with linear and band scales mapping medal counts and country names. Axis ticks and labels are styled via CSS, and data is loaded from a CSV file before being drawn as steel-blue rectangles. The chart’s title and axis label are added as SVG text elements.

Loading thumbnail…

Chart: Which Country Has the Most Olympic Medals?

This bar chart displays the top 10 countries by all-time Olympic medal count, with the United States leading at 2,828 medals and Norway at 520. The data comes from Wikipedia. Rendered as an SVG, the chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map medal counts to bar lengths and country names to vertical positions. A steelblue fill colors the bars, with the title and axis labels styled via CSS.

Loading thumbnail…

Chart: Which country has the most Olympic medals?

This bar chart shows the top 10 countries by Olympic medal count, with the United States leading by a wide margin. Built with D3 v5 and rendered as SVG, it uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with bars colored steelblue. Data comes from a CSV file listing country and medal counts, with axes generated by `axisLeft` and `axisBottom`.

Loading thumbnail…

Let's make a face!

This example renders a cartoon face using D3 v5 within a React framework. The face consists of a yellow circle with eyes, eyebrows, and a mouth, all drawn as SVG shapes. The eyebrows and mouth animate repeatedly through transitions, alternating between raised and lowered positions. The code directly uses D3’s `select`, `arc`, and `transition` methods, with the mouth’s shape changing via arc path updates and the eyebrows moving via `attr` transitions.

Loading thumbnail…

Let's make a face!

This example builds a simple animated face using D3 v5 within a React framework. It renders a yellow circle as the head, then adds eyes, eyebrows, and a mouth using SVG primitives like `circle`, `rect`, and `path` with the `d3.arc` generator. The right eyebrow animates via chained `transition` calls, moving up and down over two seconds. The face is centered using a transformed `<g>` group, and all shapes are positioned relative to that group's origin.