G

gcappadaniel

@gcappadaniel·58 public vizzes

Loading thumbnail…

Untitled

This choropleth map of the United States visualizes the legal status of a substance in each state, with colors ranging from red to green based on a five-point scale. The visualization also plots cities as circles, with their size representing the number of years lived there, and includes interactive tooltips that appear on hover. The map is rendered using D3 version 3 with an Albers USA projection, loading geographic data from a GeoJSON file, state statuses from a CSV, and plotting city coordinates through the same projection.

Loading thumbnail…

Fork of Choropleth Map

A choropleth map colors countries by their flight data from a TSV file, with a color legend and tooltip showing total flights, trip type, and aircraft. Using D3 v5 with `geoNaturalEarth1` projection and `geoPath`, it renders the world as SVG paths from TopoJSON. The map supports zoom via `zoom` and uses `scaleOrdinal` with `schemeRdBu` for color encoding. Hover events trigger a custom tooltip div, and `colorLegend` draws circles and text labels.

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes country-level data from a CSV file, using color to represent the "flies" property for each country. The map is rendered as an SVG using D3's `geoPath` and `geoNaturalEarth1` projection, with a linked color legend built using `scaleOrdinal` and `schemeSpectral`. Clicking a legend item filters the map, dimming non-matching countries, while the legend itself fades unselected colors. Tooltips show country names and values.

Loading thumbnail…

Choropleth Map

This choropleth map displays the world’s countries colored by their economy classification, with a hover tooltip revealing each country’s name and economic group. The visualization uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the globe, while `topojson.feature` loads the world atlas data and merges it with TSV metadata. An ordinal color scale applies a `schemeSpectral` range, and the custom `colorLegend` component builds an SVG legend. The map supports interactive pan and zoom via `d3.zoom`.

Loading thumbnail…

Us 2020 elections by county

A choropleth map of the US 2020 presidential election results by county colors each county on a red-blue diverging scale based on the margin between Democratic and Republican votes, with state borders overlaid in white. Hovering over a county updates a detail panel showing the vote percentages and a horizontal bar comparison between Joe Biden and Donald Trump. The visualization uses D3 v4 with `d3.geoAlbersUsa` and `d3.geoPath` to render TopoJSON county boundaries from the US Census, while `d3.scaleSequential` with `d3.interpolateRdBu` handles the color encoding. Data comes from The Guardian and USA Today.

Loading thumbnail…

Sized Points on a Map

A world map displays COVID-19 cumulative cases for cities with populations over 50,000, using sized circles where radius encodes case count via a square-root scale. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render country boundaries, graticules, and city points as SVG circles. Data comes from the World Health Organization via a CSV file, with country shapes from World Atlas TopoJSON.

Loading thumbnail…

Smoothed Daily Coronavirus Deaths by Country

A line chart tracks smoothed daily COVID-19 death counts by country over time, using a logarithmic y-axis to accommodate wide numerical ranges. Hovering over any point reveals the country name, cumulative death total, and date, while highlighting that country’s entire trajectory in a thicker black stroke. The visualization relies on React for UI state and D3 v5 for scales, axis generation, and a Voronoi overlay (via `d3.Delaunay`) to capture mouse interactions efficiently. Data comes from the Johns Hopkins Coronavirus dataset, and the smoothing is achieved through repeated three-point moving averages defined in a custom `blur` function.

Loading thumbnail…

Smoothed Daily Coronavirus Deaths by Country

A line chart tracks smoothed daily COVID-19 death counts by country over time, using a logarithmic y-axis to accommodate wide numerical ranges. Hovering over any point reveals the country name, cumulative death total, and date, while highlighting that country’s entire trajectory in a thicker black stroke. The visualization relies on React for UI state and D3 v5 for scales, axis generation, and a Voronoi overlay (via `d3.Delaunay`) to capture mouse interactions efficiently. Data comes from the Johns Hopkins Coronavirus dataset, and the smoothing is achieved through repeated three-point moving averages defined in a custom `blur` function.

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The area of each circle is proportional to the country’s population, with missing data highlighted in red. Users can pan and zoom via d3.zoom, and hover over countries to see exact population figures. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and TopoJSON for world boundaries, with population data joined from a CSV file.

Loading thumbnail…

Covid-19 global cases

This choropleth map visualizes global COVID-19 cases by country, using a color scale based on economic grouping. The map renders with D3’s `geoNaturalEarth1` projection and `geoPath`, allowing zoom interactions via `d3.zoom`. A clickable ordinal color legend filters highlighted countries, with dimming for non-selected regions. Data is loaded from a CSV and TopoJSON using `d3.csv` and `d3.json`. The visualization uses SVG elements and applies hover effects through CSS.

Loading thumbnail…

Covid-19 cases global data

This visualization displays global COVID-19 case data on an interactive world map using a natural Earth projection, with each country rendered as a green SVG path that turns red on hover. The map uses d3.geoPath with d3.geoNaturalEarth1 for geographic projection, and d3.zoom enables panning and zooming. Country boundaries come from the world-atlas TopoJSON dataset, while country names are joined via the corresponding TSV file. The sphere background is styled blue, and the visualization relies on D3 v5 and topojson.feature to process the geographic data.

Loading thumbnail…

Axes with React & D3

A bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The React component fetches the CSV with `d3.csv`, converts the population column to numbers, and slices the data. It builds scales with `d3.scaleBand` for countries and `d3.scaleLinear` for population values. Custom axes are rendered as SVG `<g>` elements, with `xScale.ticks()` generating grid lines and tick labels, while y-axis labels are positioned manually. The visualization uses React state with `useState` and `useEffect` to manage asynchronous loading, and renders all marks as SVG `<rect>` elements.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a color scale based on world-atlas TopoJSON data. Users can click legend items to highlight countries matching that category while dimming others, and hover effects further emphasize individual countries. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.zoom for panning and zooming, and d3.scaleOrdinal with schemeSpectral for color encoding. The legend and map are built as separate SVG components that re-render when the selection changes.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global COVID-19 cumulative case counts by country, with each nation shaded according to its reported total. The map uses a natural Earth projection and is rendered as SVG, with a zoom interaction allowing users to inspect regions in detail. Data comes from a CSV file joined with world country boundaries from the World Atlas TopoJSON, while colors are assigned via d3.scaleOrdinal with a spectral scheme. Hovering reveals the country name and case count through an SVG title element.

Loading thumbnail…

Choropleth Map

A choropleth map of Venezuelan presidential election results colors each state by the winning candidate’s vote percentage using a red-blue diverging scale over ten bins. Built with D3 v5, it projects municipality boundaries via `geoNaturalEarth1` and `geoPath`, and renders interactive SVG paths. Hovering reveals a tooltip with candidate, vote counts, and percentages for the top three candidates from CSV data. The map reuses a TopoJSON geometry collection with the `feature` API.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities around the world, using data from Data Canvas - Sense Your City. Each city appears as a separate colored line, with a color legend on the right and a titled chart showing time on the x-axis and temperature on the y-axis. The visualization is rendered as an SVG using D3 v5, employing d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisLeft/axisBottom. Data is loaded via d3.csv from a GitHub-hosted CSV file, with dates parsed using the Day.js library.

Loading thumbnail…

Temperature of San Francisco

This area chart displays world population growth from 2005 to 2015, using a smoothed curve to highlight the steady upward trend. The visualization loads data from a local CSV file and renders it as an SVG path using D3’s area generator with basis curve interpolation. It employs `scaleTime` for the temporal x-axis and `scaleLinear` for the population y-axis, with custom axes and labels. The maroon fill emphasizes the area under the curve, while grid lines and axis ticks use D3’s `axisBottom` and `axisLeft` APIs.

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move their mouse across the chart to update the selection, which re-renders the visualization and adjusts the year indicator. The visualization uses d3.csv to load UN population estimates, d3.nest to group data by region, and d3.line with curveBasis to draw the smoothed paths. A d3.axisBottom and d3.axisLeft provide the axes, while an SVG rect with a mousemove handler captures pointer position and applies d3.mouse to invert the x-scale and determine the hovered year.

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a line chart of population over time by region, with a vertical line marking a selected year that updates as the mouse moves across the chart. The chart uses d3.line with curveBasis to draw the paths, d3.nest to group data by region, and a mouse-interceptor rectangle to detect hover position, calling setSelectedYear via d3.mouse. Data comes from UN population estimates CSV files, merged from two sources for years 1950–2100, and is rendered with SVG. A color legend is included using a custom colorLegend module.

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature trends over a week, with a smooth, natural curve linking data points from the Data Canvas Sense Your City dataset. The SVG rendering uses React components for the axes and marks, while d3-scale’s `scaleTime` and `scaleLinear` map the timestamp and temperature values. The chart applies a `curveNatural` interpolation via d3-shape’s `line` generator, with Poppins typography and a muted color palette for a polished look.

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by fossil fuel types. The data is parsed from a CSV file and rendered as an interactive SVG, with each layer representing a distinct emission category. The visualization uses d3.stack() to compute the stacked series and d3.area() to draw the areas. Labels are positioned automatically using the d3-area-label library. Hovering highlights individual segments, and the chart adapts to window resizing, with axes and scales generated via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a line chart of population over time by region, with a vertical line marking a selected year that updates as the mouse moves across the chart. The chart uses d3.line with curveBasis to draw the paths, d3.nest to group data by region, and a mouse-interceptor rectangle to detect hover position, calling setSelectedYear via d3.mouse. Data comes from UN population estimates CSV files, merged from two sources for years 1950–2100, and is rendered with SVG. A color legend is included using a custom colorLegend module.

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by source type: solids, liquids, and gas. The chart uses d3.stack to layer the series and d3.area with a curveBasis interpolation to render the smooth areas. Labels are positioned using the d3-area-label plugin, and the color scale employs d3.schemeDark2. The visualization is interactive, with hover effects darkening each area, and includes axes with gridlines and a rotated y-axis title.

Loading thumbnail…

Choropleth Map

A choropleth map of Venezuelan parishes colors regions by population density using a red-purple sequential scale. Hovering a parish reveals a tooltip with its name and population count. The visualization uses D3 v5 with `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering TopoJSON geometry, and a threshold scale for color encoding. Parish data merges external CSV values with the TopoJSON file.

Loading thumbnail…

Choropleth Map

This choropleth map displays Venezuelan presidential election results at the municipal level. The map is colored according to the percentage of votes received by the leading candidate in each municipality, using a diverging color scale. Hovering over a municipality reveals a tooltip with detailed vote counts and percentages for the top two candidates and other votes. The visualization uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering SVG paths, `scaleThreshold` for color mapping, and TopoJSON for geographic data.

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Loading thumbnail…

Choropleth Map

A choropleth map of Venezuela's Amazonas state colors each municipality by the winning candidate's vote share, using a threshold color scale with a red-blue diverging palette. Hovering reveals a tooltip with election results per candidate, votes, and percentages. The visualization leverages D3 v5's `geoNaturalEarth1` projection, `geoPath`, `scaleThreshold`, and TopoJSON to render SVG paths, while loading and joining CSV election data with geospatial features via `d3.csv` and `topojson.feature`.

Loading thumbnail…

Choropleth Map

This choropleth map shows the results of a Venezuelan presidential election by state, using color to indicate the percentage of votes for a particular candidate. The map encodes data from the CSV file onto geographic regions defined by the TopoJSON `estados.json` file, with the `d3.geoPath` and `geoNaturalEarth1` projection rendering the SVG paths. Colors are assigned using a threshold scale with a red-blue scheme, and hovering over a state displays a tooltip with the state name and vote percentage, powered by D3 event handlers.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its economy type. Using D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` for rendering, it loads world map data from TopoJSON and TSV files containing country metadata. The color scale uses `scaleOrdinal` with `schemeSpectral` ranges, and hovering highlights a country in red while a tooltip displays the country name and economic group.

Loading thumbnail…

Untitled

A choropleth map of Venezuelan states shows each state’s percentage of votes for the first candidate in an election, using a threshold color scale from a blue sequential scheme. The visualization loads geographic boundaries from a TopoJSON file and tabular vote data from a CSV, then draws the map as SVG paths with `d3.geoPath` and a Mercator projection. The code applies a `d3.scaleThreshold` to map vote percentages to colors, with the fill for each state set based on its `porcentaje_1` value.

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Loading thumbnail…

Let's make a map with D3.js!

This example presents a world map with countries rendered as light blue SVG paths, with the map’s sphere filled in white. It uses D3.js v5 to load a GeoJSON file of countries (countries-110m.geojson) and projects them with the `geoNaturalEarth1()` projection. The code specifically uses `d3.geoPath()` to generate the path data for each country and a `geojson` library to parse the GeoJSON features. The sphere and country outlines are drawn with SVG paths, with countries given a white stroke.

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a line chart of population over time by region, with a vertical line marking a selected year that updates as the mouse moves across the chart. The chart uses d3.line with curveBasis to draw the paths, d3.nest to group data by region, and a mouse-interceptor rectangle to detect hover position, calling setSelectedYear via d3.mouse. Data comes from UN population estimates CSV files, merged from two sources for years 1950–2100, and is rendered with SVG. A color legend is included using a custom colorLegend module.

Loading thumbnail…

Map with Selectable Countries

A choropleth map displays countries color-coded by economy using D3's `geoNaturalEarth1` projection and `geoPath`. Users click countries to select them, which highlights the chosen nation while dimming others; clicking again deselects. A color legend using `scaleOrdinal` with `schemeSpectral` allows filtering by income group. Data loads from world-atlas TSV and TopoJSON files, with SVG rendering supporting zoom interactions via D3's `zoom` event.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data in degrees Celsius from cities around the world, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v5 with an SVG rendering, employing functions like `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to draw smooth lines for each city. A `scaleOrdinal` color scale distinguishes cities, and a nested data structure sorts them by their last temperature reading. Gridlines extend across the chart, with axis labels and a title completing the presentation.

Loading thumbnail…

Circles on a Map

This interactive map uses circles of varying area to represent the population of each country, with data sourced from a UN dataset. Built with D3 v5, the visualization employs a square-root scale to size the circles and a natural Earth projection to render the countries. Users can pan and zoom, and hovering over a country reveals its exact population via a tooltip. The visualization also includes both a size legend and a categorical color legend, all rendered as SVG elements.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Using dropdown menus, viewers can select which numeric columns map to the X and Y axes, with the axis labels updating accordingly. The visualization is built with D3 v5, using `scaleLinear` for coordinate mapping, `axisBottom` and `axisLeft` for tick rendering, and `transition().duration(2000).delay()` for animated circle movement. The SVG scene includes gridlines with custom styling, and all data values are explicitly converted to numbers before plotting.

Loading thumbnail…

Choropleth Map

This choropleth map, built with D3.js, visualizes global economic classifications by country. It uses a spectral color scale from the `schemeSpectral` range, with countries colored according to their economy attribute. Users can click legend items to highlight specific economic groups, which dims non-matching countries. The map projects geographic features using `geoNaturalEarth1` with `geoPath`, and data is loaded from the world-atlas TopoJSON and TSV files.

Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications by coloring each country according to a categorical ordinal scale derived from the `economy` property in the world-atlas dataset. The visualization loads TopoJSON and TSV data, then uses `d3.geoPath` with a natural Earth projection to render country boundaries, while a custom color legend built with SVG circles and text explains the color encoding. Users can zoom and pan via `d3.zoom`, with hover effects highlighting individual nations.

Loading thumbnail…

Cheap Tricks for Interaction

This example displays a world map colored by each country’s economy category, using a natural Earth projection and D3’s `geoPath`. A hover effect highlights individual countries in red, while `d3.zoom` enables pan and zoom interactions that transform the entire map group. The map is rendered as SVG, with data loaded from the World Atlas TopoJSON and TSV files, and country names appear via native `<title>` tooltips. The code uses `scaleOrdinal` with `schemeCategory10` for the color scale and topojson’s `feature` method for geometry.

Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications by coloring each country according to a categorical ordinal scale derived from the `economy` property in the world-atlas dataset. The visualization loads TopoJSON and TSV data, then uses `d3.geoPath` with a natural Earth projection to render country boundaries, while a custom color legend built with SVG circles and text explains the color encoding. Users can zoom and pan via `d3.zoom`, with hover effects highlighting individual nations.

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a smiley face whose eyebrows animate. The code selects an SVG element, sizes it to the full browser window, and appends a rounded rectangle as the background. It demonstrates fundamental DOM manipulation by chaining D3 methods like `select` and `append` to create the face’s parts, with the eyebrow movement driven by simple data-driven updates in the same SVG structure. The project relies on D3 v5 and renders entirely as SVG.

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Loading thumbnail…

Cheap Tricks for Interaction

A world map rendered with SVG paths displays countries in light green against a blue sphere, with red highlighting on hover. The visualization uses D3 v5’s geoNaturalEarth1 projection and geoPath to draw geographic features from TopoJSON world-atlas data, while country names come from a TSV file. Pan and zoom interaction is implemented via d3.zoom, applying transforms to a group element. Tooltips are provided by SVG `<title>` elements showing each country’s name.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green and the globe as a blue sphere. It demonstrates loading geographic data from a TopoJSON file via `d3.json` and converting it to GeoJSON features using the `feature` function from the TopoJSON library. The map projection and path generation are handled by `d3.geoNaturalEarth1` and `d3.geoPath`, which draw the country boundaries and the sphere outline. The code uses D3 v5 and relies on the world-atlas dataset at 110m resolution.

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Loading thumbnail…

Temperature of San Francisco

This visualization presents the global population over time as a filled area chart, with a maroon region beneath a smooth curve. The data comes from a CSV file called `world-population-by-year-2015.csv`, loaded via `d3.csv`. The code uses D3 v5 functions such as `scaleTime`, `scaleLinear`, `area` with `curveBasis` for the curved path, and `axisBottom` and `axisLeft` for the axes, with gridlines and tick formatting. The y-axis labels abbreviate large numbers, converting billions from "G" to "B".

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population over time, with the x-axis mapping years and the y-axis representing population counts in billions. The data comes from a CSV file loaded via `d3.csv`. Using D3 v5, the code employs `scaleTime` and `scaleLinear` to construct the axes, and an `area` generator with `curveBasis` to render the smoothed, filled path. The SVG output includes custom axis labels, formatted tick values, and a title.

Loading thumbnail…

Customizing Axes

This bar chart displays the relationship between horsepower and weight for cars in the auto-mpg dataset, with each circle representing one vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render customizable axes with extended tick lines that span the chart interior, removed domain lines, and custom axis labels. The plot margin is set to accommodate rotated y-axis text, and the data is loaded via `csv` from a remote file before being scaled and drawn as semi-transparent red circles in an SVG.

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 dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled accordingly. The visualization uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering as SVG. It reads the dataset from a remote URL, converts numeric fields, and draws the chart within configured margins, including custom title and axis labels.

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 dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled accordingly. The visualization uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering as SVG. It reads the dataset from a remote URL, converts numeric fields, and draws the chart within configured margins, including custom title and axis labels.

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 dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled accordingly. The visualization uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering as SVG. It reads the dataset from a remote URL, converts numeric fields, and draws the chart within configured margins, including custom title and axis labels.

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 dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled accordingly. The visualization uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering as SVG. It reads the dataset from a remote URL, converts numeric fields, and draws the chart within configured margins, including custom title and axis labels.

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Loading thumbnail…

HTML Starter

This example shows a bare minimum HTML page that renders the text “Hello HTML” in a browser. It demonstrates the simplest possible starting point for a visualization or web project, containing only the basic structure of an HTML document with a title and body. The code uses no external libraries or APIs, relying solely on plain HTML and a minimal inline style block. It serves as a foundation for adding more complex elements, scripts, or frameworks like React.