princit

Focus + Context

This visualization depicts Apple’s stock price over time as a blue area chart, using a focus+context technique to explore the data. A smaller overview chart shows the full time series, while a gray brushed region can be dragged to pan or resized to zoom the main chart’s date range. The code uses D3 v5’s `d3.brushX` for the interactive selection, `d3.scaleUtc` and `d3.scaleLinear` for axes, and SVG `clipPath` to constrain the focus area. Data comes from Yahoo Finance via CSV.

Jun 1, 2020

Visualization 2 (Multiline graph)

This chart displays population distributions for six U.S. states, broken down into seven age groups. A grouped bar chart, it uses horizontal positioning for states and color-coded bars for each age bracket, with a legend on the right. The visualization loads CSV data via `d3.csvParse` and renders SVG elements using D3 v5, employing `d3.scaleBand` for the x and subgroup positions, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Jun 1, 2020

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across customer segments (Consumer, Corporate, Home Office) for each product sub-category, with each bar segment colored by segment. The visualization uses D3.js with SVG rendering and includes an interactive legend that highlights specific segments on hover, supported by tooltips showing exact sales values. The chart animates between two data orderings—first grouping by segment, then reversing to group by sub-category—to reveal different comparative perspectives.

May 28, 2020

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data across U.S. states, displaying a choropleth map colored by average ILI percentage, a bar chart of top states, and multi-year trend lines. Users can select years and states to highlight corresponding marks across all three views. The visualization uses d3.v5 scales and geoPath with topojson US Atlas data, React for component structure, and SVG rendering, with interactive filtering through dropdown menus and hover/click handlers.

May 28, 2020

Visualization 1 (Stacked Bars)

This stacked bar chart visualizes sales comparisons across different market segments (Consumer, Corporate, Home Office) for various product sub-categories. The visualization uses an interactive SVG rendering with a color legend that allows users to highlight specific segments. Built with D3.js, the chart employs the `d3.layout.stack` API to create stacked bars, with tooltips via `d3-tip` to display precise sales values. The data is sourced from a categorized CSV file showing sales totals, and the chart animates when rendering layers.

May 27, 2020

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes sales by segment and subcategory, with each bar stacked to represent the total sales per segment. Hovering over a legend item highlights the corresponding subcategory across all segments, while a tooltip shows the exact sales value. The visualization uses D3.js (v3) with the `d3.layout.stack` API for stacking, `d3.legend` for the color legend, and `d3-tip` for tooltips. Data comes from a CSV file, and the chart includes animated transitions when re-sorting the data.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This example uses an animated stacked bar chart to illustrate the distribution of project funding items across different institution types in 2018. The chart displays grouped data by segment and sub-category, with interactive hover effects that highlight specific categories and tooltips revealing exact sales figures. The visualization is built with D3.js, utilizing `d3.layout.stack` for the stacked bar layout, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend that filters which sub-category bars are prominently shown. The data is sourced from a CSV file containing sales records sorted by segment and sub-category.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This example shows a normalized stacked bar chart comparing sales totals across customer segments, with each bar subdivided by product subcategory. Hovering over a legend entry highlights the corresponding subcategory’s bars in the foreground while dimming the rest. The visualization is built with D3.js (v3), using `d3.layout.stack` for stacking, `d3.svg.axis` for scales, and the `d3-legend` and `d3-tip` plugins for color legends and tooltips. Data comes from CSV files, and the SVG output includes animated transitions between different data groupings.

Covid-19

A world map shows the geographic spread and cumulative confirmed COVID-19 cases as of March 25, 2020. Orange circles, sized with a square-root scale, are positioned by country coordinates using a Mercator projection and the `geoPath` and `geoMercator` functions from D3 v5. The data is loaded from a CSV file and rendered as SVG, with the world map built from TopoJSON data and the slider element in the HTML interface.

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents a four-panel view of CDC ILINet flu surveillance data, showing annual trends by week, a choropleth map of state averages, a ranked bar chart of top states, and yearly trends for those selected states. Built with React and D3.js v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.geoPath` with a US Atlas TopoJSON for rendering. Interactive filtering by year and state highlights selections across all views, with synchronized hover and click effects.

Firefly Map of Coronavirus Case Locations

This firefly map displays the geographic locations of reported coronavirus cases as of March 5, 2020, using a dark background with glowing teal points that shimmer like fireflies. Each location is represented by a single point, regardless of case count, highlighting the global spread of the virus. The visualization uses OpenLayers for map rendering with a Stamen toner-lite basemap, styled with an inverted CSS filter. Point sprites are generated via Canvas radial gradients using d3-cubehelix color manipulation, and the React component manages map lifecycle through hooks. Data is loaded from the Johns Hopkins COVID-19 time series CSV using d3.csv.

May 23, 2020

Circles on a Map

This example visualizes global population data from the United Nations, using colored circles on a natural Earth projection map. D3’s `geoPath` and `geoCentroid` position each circle over its country’s centroid, while `scaleSqrt` encodes population magnitude through circle radius. A custom `sizeLegend` displays graduated population values, and `colorLegend` provides a color key. The map supports pan and zoom via `d3.zoom`, and country hover effects are styled in CSS. Data is loaded from CSV and TopoJSON, rendered as SVG.

May 23, 2020

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the Flare dataset, with concentric rings representing nested categories such as analytics, animate, and query. The visualization uses D3 v5's partition layout to render the sunburst as SVG, with each sector's arc length proportional to its value. Users can click on any arc to zoom in and explore that branch of the hierarchy, with the root label and title updating to reflect the current focus. The code implements this interactivity using D3's `d3.partition`, `d3.hierarchy`, and event handling on the SVG elements.

May 21, 2020

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

May 19, 2020

Untitled

Three linked D3.js views explore a dataset of US states: a scatterplot maps time of creation against score with circle size encoding comment count, a symbol map projects agricultural productivity onto an AlbersUSA geography, and a time-based brush chart displays event markers. Hovering highlights matching points across all views via dispatcher events, while brushing filters the scatterplot and map through the `brush` component’s `brushend` handler. SVG transitions animate updates, and the map uses TopoJSON for state boundaries.

May 19, 2020

Untitled

This interactive visualization integrates a choropleth map of U.S. states with a scatter plot and a time-series brush to explore event data. Users can brush over a timeline to filter events, which simultaneously updates the map and scatter plot. Hovering over a point in either view highlights the corresponding data in the other. Built with D3.js v3, it uses `d3.geoPath` for map projection, `d3.svg.brush` for filtering, and `d3.svg.axis` for the time axis. Data is loaded from a local JSON file.

May 19, 2020

MULTILINE CHART

This multiline chart compares profit across product sub-categories for different regions, using color to distinguish each region. Built with D3 v5, it renders an SVG with a time-scaled x-axis, linear y-axis, and a legend via the custom `colorLegend` function. Data is loaded from a CSV file and processed with `d3.nest()`, then lines are drawn using `d3.line()` with `curveBasis` smoothing.

May 13, 2020

MULTILINE CHART

This multiline chart compares profit across sub-categories for different regions, with each region represented by a distinct colored line. The visualization uses d3.nest() to group data by region and d3.line() with curveBasis to generate smooth paths, while d3.scaleOrdinal with schemeCategory10 assigns colors. A custom colorLegend component renders the region labels. Profit values are parsed from a CSV file containing sample sales data, and the chart includes axes with gridlines, a title, and axis labels.

May 12, 2020

MULTILINE MELTED

This visualization shows population projections by continent from 1950 to 2100, using a multi-line chart where each line represents a region. The lines are smoothed with a basis curve and blended together using a multiply effect. The code leverages d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft, with data sourced from UN population estimates and medium-variant projections. A categorical color scale with a custom legend orders the regions by their final population values.

May 11, 2020

MULTILINE MELTED

ILINet Flu Surveillance Data

This visualization displays annual ILI total cases from 2015 to 2019 as overlaid line charts, enabling year-over-year comparison of flu season patterns and peaks. It uses the vega-lite-api and d3.csv to load CDC FluView surveillance data, with vega and vega-lite handling rendering and tooltips. The y-axis shows aggregated ILI totals by week, while color encodes year; the code also includes a Choropleth map interaction option for regional or state-level exploration.

D3 Example

This example visualizes profit across regions and sub-categories from a CSV dataset, using color-coded lines to show trends over the profit axis. It renders as an SVG chart with axes and a color legend. The code uses the D3 v3 library, specifically `d3.csv`, `d3.nest`, `d3.svg.line`, `d3.svg.axis`, and `d3.legend.color` from the d3-legend plugin.

D3 Example

A small multiples line chart shows population growth from 1950 to 2015 for China, India, and the U.S. It uses D3 v3 with SVG, `d3.svg.line`, `d3.time.scale`, and `d3.legend.color`, rendering colored strokes per country. The y-axis uses a custom SI format (B for billions), and data loads from a CSV via `d3.csv`.

MULTILINE CHART

This multiline chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 with nested line paths to plot temperature over time, with each city assigned a distinct color from the ordinal color scale. The code employs d3.line with curveBasis for smooth curves, d3.nest to group data by city, and custom axis labels and legends rendered as SVG elements.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes the distribution of sales amounts for various product subcategories, segmented by consumer, corporate, and home office institutions. The chart displays total sales per subcategory as stacked segments, with each color representing a different segment. Hovering over a segment reveals its specific sales value. The visualization is built with D3.js, using the `d3.layout.stack` for the stacked layout and `d3.legend.color` for the interactive color legend.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes sales by sub-category and customer segment, using animated transitions and hover effects to highlight individual segments. Built with D3.js, it employs `d3.layout.stack` for stacking, `d3.svg.axis` for scales, and `d3-tip` for tooltips showing sales values. A color legend allows users to filter and emphasize specific segments, while the base bars fade to provide focus. The visualization reads from static CSV data and renders in SVG.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This visualization displays stacked bar chart data of general project funding items in 2018, broken down by institutional nature. It uses D3.js APIs including `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`. The chart colors segments by category, with an interactive legend that filters foreground bars on hover. Tooltips appear via `d3-tip`, showing item counts per segment and sub-category. Data comes from a CSV file with sales figures, rendered as animated SVG.

MULTILINE CHART

MULTILINE MELTED

This chart displays projected population trends for world regions from 1950 to 2100, with each region shown as a distinct colored line. It uses D3.js v5 to load CSV data, melt it into a tidy format, and render an SVG line chart with a time-scaled x-axis and linear y-axis. The color legend is ordered by each line’s final population value, using D3’s `nest` and `descending` functions. The data originates from UN population estimates and medium-variant projections.

ILINet Flu Surveillance Data

This line chart visualizes simulated ILINet flu surveillance data, showing flu cases across US regions by week of the year, with each line colored by year. The visualization aggregates the data by year, region, and week before plotting. It uses the Vega-Lite API through the vega-lite-api library, with D3.js handling data loading from a CSV file. The custom config adjusts axis styling, font sizes, and colors for improved readability, while vega-tooltip provides interactive hover details.

Selecting a year on a line chart

This visualization presents population trends over time for world regions using a multi-line chart, with a vertical line marking the currently selected year. Users move the mouse across the chart to change the selected year, which updates the line position. The chart is rendered as SVG using D3 v5, employing scales like `scaleTime` and `scaleLinear`, the `line` generator with `curveBasis`, and nested data via `nest`. A separate color legend maps each region’s line to a categorical color scale.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes general project funding items for 2018, segmented by the nature of institutions and broken down by sub-category. It uses D3.js (version 3.5.5) with the `d3.layout.stack` API to create the stacked layers, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend. Hovering over the legend highlights a specific segment while fading the others, and a tooltip from `d3-tip` displays the exact sales value for each item. The chart is rendered as an SVG with a smooth animation.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes 2018 general project funding items by institution nature, breaking down sales data across sub-categories and customer segments. Built with D3.js, it uses `d3.nest()`, `d3.layout.stack()`, and ordinal/linear scales to render grouped layers. Hovering over the color legend highlights specific segments, while `d3-tip` displays detailed tooltips with item counts. The SVG animation supports fade effects between base and foreground bar layers for comparative analysis.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This visualization displays stacked horizontal bars representing 2018 project funding items by sub-category, segmented by institution nature (Consumer, Corporate, Home Office). The chart uses D3.js v3 with `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and `d3.legend` for the color legend. Hovering over legend entries highlights corresponding segments via foreground layers, while a `d3.tip` tooltip shows exact item counts. Data is loaded from an external CSV file, rendered as animated SVG with custom tick formatting.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart displays 2018 general project funding items categorized by institution nature, using D3.js to render SVG with animation. The visualization uses d3.layout.stack to stack segments by color, with hover tooltips via d3-tip showing segment counts. A color legend with d3-legend allows highlighting specific categories by fading other bars through semi-transparent overlays. Data comes from an embedded CSV file, processed through d3.nest to group by segment layers.

MULTILINE MOOD

This visualization displays profit trends across product sub-categories, with each line representing a different region. The chart uses a basis curve to smooth the multi-line paths, and a color legend identifies each region. Built with D3 v5 and Vue, the code employs `d3.nest()` to group data by region and `d3.scaleOrdinal` for color mapping. The SVG rendering includes axes with gridlines, and the data comes from a CSV file containing sales records.

MULTILINE CHART

This example shows how profit evolved over time for different regions using a multiline chart. The visualization uses d3.line with curveBasis to generate smooth paths, and d3.scaleTime and d3.scaleLinear for the axes. Data is loaded from a CSV file and nested by region using d3.nest. A custom color legend is rendered alongside the chart, and the SVG display includes axis labels and a title.

Graph with four lines

This stacked bar chart displays the allocation and unallocation of telescope time across three instruments, with red and blue segments representing the two categories. Built with D3 v5, the visualization uses `d3.stack()` to aggregate the data, `d3.scaleBand()` and `d3.scaleLinear()` for positioning, and `d3.axisBottom()`/`d3.axisLeft()` for axes. A legend is manually drawn, and the chart renders as SVG within a 300×300 viewport. Data comes from a CSV file containing telescope names and their allocated/unallocated day counts.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes 2018 general project funding items by academic department and institution category (schools, research institutes, and others). Hovering over a data point displays a tooltip with the exact item count, while interacting with the color legend fades unrelated bars. The visualization uses D3.js for data binding, scales, axes, and SVG rendering, with the d3.legend and d3.tip libraries for the interactive legend and tooltips. Data originates from the provided CSV file, encoded through a stacked layout API and ordinal scale for the categorical y-axis.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes 2018 general project funding items by institution nature, using D3.js (v3) with SVG rendering and animation. It forks Curran Kelleher’s stacked bar example, employing `d3.layout.stack`, ordinal and linear scales, and `d3.legend.color` for the categorical color legend. Hovering over legend entries highlights corresponding layers via a foreground bar layer and a semi-transparent overlay, while `d3-tip` displays tooltips with funding amounts. The y-axis uses a custom SI formatter replacing “G” with “B” for billions.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart displays 2018 general project funding items categorized by institution type, with departments on the x-axis and item counts on the y-axis. Built with Vue and D3.js, it uses `d3.layout.stack` for bar layering and `d3.scale.ordinal` for positioning. Hovering over legend entries filters bars via a toggle mechanism, while `d3-tip` provides tooltips showing exact values per category and department. Animated SVG transitions and a color legend from `d3-legend` enhance exploration of the dataset.

Tab.1(3)-Amount of general project funding in 2018 (by nature of institutions)

This stacked bar chart displays the amount of general project funding in 2018, broken down by nature of institution. The visualization uses a horizontal stacked bar layout, with each bar representing a department and color-coded segments for each category. Built with Vue and D3.js, it employs `d3.layout.stack` and `d3.scale.ordinal` to manage the stacked bars and axes. Interactive hover effects, powered by `d3-tip`, display detailed tooltips with revenue figures. A color legend allows users to filter and highlight specific categories by fading out non-selected bars.

EdX Viewer Data by Course with Stacked Bars, AY2013

A stacked bar chart displays total video view counts per EdX course for the 2013 academic year, with each bar segment colored by country of origin. The visualization uses the vega-lite-api to encode course on the x-axis, summed video views on the y-axis, and country as the color channel, rendering with vega-lite and vega. Data comes from the MITx-HarvardX Dataverse CSV, fetched via d3.csv. The chart applies a sinebow color scheme and a custom dark config for axis styling and tooltip appearance.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

D3 Example

A stacked bar chart shows Sales across Product Sub-Categories, with bars segmented by Customer Segment, using a categorical color scale. The visualization renders as SVG via D3 v3’s `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`, with a legend from d3-legend. Data is loaded from a CSV file containing order details, while axes use a custom SI tick formatter that converts billions to "B".

Religions of Largest 20 Countries

A stacked bar chart displays the estimated 2010 religious composition of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each bar is segmented by religion, with country names on the y-axis and population counts on the x-axis. Users can hover over bars to see tooltips detailing each religion’s population within a country, and hovering over the legend highlights that religion’s segments across all countries. The visualization uses D3.js for SVG rendering, including d3.layout.stack for the stacking logic, d3.svg.axis for chart axes, and d3.legend.color for the interactive legend.

Customizing Axis

This example shows the top 12 most populous countries using horizontal bars ordered by population. It uses d3.csv to load population data (in thousands, converted to raw counts), d3.scaleBand for the categorical country axis, and d3.scaleLinear for the numerical population axis. Customized axes include removed domain lines, formatted tick labels with abbreviations (e.g., "1.41B"), and a custom axis title, all rendered as SVG. D3’s axisLeft and axisBottom generate the ticks and grid lines.

Line chart with multiple lines

This visualization shows profit trends across product sub-categories over time, with multiple colored lines representing different states and a legend that filters lines by click. The chart uses d3.csv for data loading, d3.nest to group data by state, d3.scaleLinear for both axes, and d3.line with curveBasis for smooth line paths. A colorLegend component (built with D3 selections) enables interactive highlighting by dimming non-selected states. The SVG rendering includes axes with d3.axisLeft and d3.axisBottom, while the data comes from a CSV file with order details.

MULTILINE MELTED

This visualization shows population change over time as a set of semitransparent, overlapping lines, with each line representing a different region and a color legend on the right. The data comes from a CSV file containing UN population estimates and projections, melted into a tidy format before rendering. Built with D3 v5, the code uses `d3.nest()` to group data by region, `d3.line()` with `curveBasis` for smooth paths, and `d3.scaleOrdinal` with `schemeCategory10` for colors. The chart is rendered as SVG with axes, gridlines, and a custom color legend component.

Line Chart with Multiple Lines

This example displays CO2 emissions by country, plotting profit against sub-category over time, with each region represented by a distinct colored line. The visualization uses D3 v5 within a Vue framework, rendering to SVG. It employs `d3.line` with `curveBasis`, `d3.nest` to group data by region, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. Axis labels and legends are added via `d3.axisLeft`, `d3.axisBottom`, and a custom `colorLegend` function, based on sample data from annualco2.csv.

D3 Example

A stacked horizontal bar chart displays sales totals per product sub-category, with bars segmented by customer segment and colored using `d3.scale.category10`. Hovering over a legend entry highlights that segment by fading other bars behind a semi-transparent overlay and re-drawing the selected segment in the foreground, while `d3-tip` shows tooltips. The chart uses D3 v3 with SVG, including `d3.layout.stack` for stacking and `d3.legend.color` for an interactive color legend, and reads data such as the provided `lebron.csv` file.

Stacked Bars

This stacked bar chart displays sales totals by product sub-category, with each bar segmented by customer segment. The visualization uses Vega-Lite API with D3.js to load CSV data, aggregate sales values, and render SVG output. Categories are sorted by descending sales, while color encoding differentiates Consumer, Corporate, and Home Office segments. Tooltips provide additional sales details on interaction, and axis labels are customized through the Vega-Lite config object.

Age Distribution Chart

This stacked bar chart displays age distributions across different provinces, with each bar segmented by age ranges from 0-10 through 90-100 years. Users can toggle between raw counts and percentages of the total via radio buttons. Built with D3.js (version 3.5.6), the visualization uses SVG rendering and d3.layout.stack for stacking, d3.svg.axis for axes, and smooth transitions via transition().duration() when switching between count and percentage modes. Data comes from a CSV file containing provincial health statistics.

Stacked Bars

Stacked bar chart displays sales totals per product sub-category, segmented by customer segment. The visualization uses D3.js with SVG and animated transitions. Data comes from a CSV file containing order records. Hovering over the color legend highlights a specific segment by dimming other layers with a semi-transparent overlay. Tooltips, powered by d3-tip, show exact values for each bar segment. Axis formatting and legend rendering use D3's SVG axis and d3-legend APIs.

Stacked Bars

This chart uses stacked bars to show how total sales are divided among customer segments for each product sub-category. The visualization allows users to hover over legend entries, which highlights the corresponding segment’s bars while dimming the rest. The implementation uses d3.svg.axis, d3.nest, and d3.layout.stack to aggregate and stack the data from the CSV file, with bar rendering using SVG rectangles. A d3-tip tooltip displays detailed values on hover. The color legend, built with d3.legend.color, drives the interactive filtering.

Sales comparision by segment per sub-category

This example visualizes the total sales case numbers for four segments—Consumer, Corporate, Home Office, and Unknown—stacked by sub-category, with each segment’s contribution represented as a colored bar section. The chart initially displays absolute counts, and a toggle above the visualization switches the view to a percentage-based, normalized comparison. The visualization is built with D3.js v3 and Vue, using the `d3.svg.axis`, `d3.scale.linear`, and `d3.layout.stack` APIs to compute and render the stacked bars. The data is loaded from a CSV file containing the sales records.

Stacked Bars

This stacked bar chart visualizes population distribution across countries by religious affiliation, using a horizontal layout where each bar segment represents a different religion’s share. Built with D3.js, the chart encodes categorical data via `d3.scale.ordinal` and `d3.layout.stack`, and supports interactive highlighting: hovering over the color legend dims non-selected layers and re-renders the foreground bars. Animated transitions via `transition.attr` control overlay opacity, while tooltips from `d3-tip` display exact values. The SVG rendering uses axes, a color legend from `d3-legend`, and loads population data from a CSV file.

Vega-Lite API Template

This example shows a grouped bar chart comparing religious populations across five countries, with each bar segmented by religion and sorted by total population. It uses the Vega-Lite API to declare the visualization, registering vega, vega-lite, and vega-tooltip handlers, then renders it as SVG. The data is loaded from a local CSV via d3.csv, and a custom config adjusts axis and font styles for readability.

Vega-Lite API Template

This example presents a stacked bar chart of population by country, with each bar segmented by religion, using data from a CSV file. It is built with the Vega-Lite API, which composes the visualization declaratively through methods like `markBar`, `x().fieldN`, and `y().fieldQ`. The chart renders in SVG via vega, vega-lite, and vega-lite-api, with tooltips enabled through vega-tooltip. Custom axis and label styling are applied from a separate `config.js` module.

Apr 27, 2020

Melting Data for multiple lines

This example visualizes population estimates and projections by region from 1950 to 2100, using multiple overlaid lines to show trends over time. The view encodes time on a linear scale and population on a log-free axis, with a categorical color legend identifying each region. The underlying dataset is merged from two UN CSV files using a custom data-melting process that reshapes wide-format rows into long-format records. The chart uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render smooth paths, while a reusable colorLegend component draws the SVG legend.

Mar 31, 2020

Circles on the Map

This visualization displays the global population distribution for 2018 using sized circles positioned over a natural Earth projection map. Each circle’s radius encodes population magnitude via a square-root scale, with a corresponding size legend and a categorical color legend for missing data. The code uses D3 v5’s `geoPath`, `geoNaturalEarth1`, `zoom`, and `scaleSqrt`, rendering SVG elements. Data comes from a CSV file merged with TopoJSON world atlas geometries, and interaction includes hover tooltips showing region names and formatted population values.

Color and Size Legends

This example demonstrates how color legends and size legends are constructed using D3 v5’s ordinal and square-root scales. A colorLegend component renders colored circles for fruit categories, while a sizeLegend maps numeric tick values to circle radii. Both legends are built with data-bound SVG groups, using `selection.enter()` and `selection.merge()` for updates, and `scaleOrdinal` and `scaleSqrt` for encoding. The code also employs `sizeScale.ticks()` to generate evenly spaced legend entries, with text labels offset from each circle.

Circles on the Map

This example displays a world map with countries colored according to their economic classification, using a categorical color scale with a legend rendered as circles. It loads world geometry from TopoJSON and metadata from TSV files, then projects the map with `d3.geoNaturalEarth1` and renders it as SVG paths via `d3.geoPath`. A `d3.zoom` behavior enables panning and zooming, while the color legend is built with a custom function that updates scales and ticks. The visualization uses `d3.scaleOrdinal` with the `schemeSpectral` palette and supports hover highlighting through CSS.

Scatter plot with menus

This interactive scatter plot displays relationships between pairs of attributes from the auto-mpg dataset, with dropdown menus letting users choose which columns to plot on the x and y axes. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.transition to animate circles from the center to their positions over two seconds. Data is loaded via d3.csv, and the custom dropdownMenu module handles the menu selection logic. The SVG rendering includes grid lines via tickSize and axis labels that update dynamically with each selection.

Choropleth Map with interactive filtering

This choropleth map visualizes the world’s economies using color-coded countries, with interactive filtering by clicking legend items to highlight specific economic categories. The map uses an Equirectangular projection and supports zooming and panning. Built with D3 v5, it employs `geoPath` and `geoNaturalEarth1` for geographic rendering, while a clickable `colorLegend` toggles opacity and highlights selected regions. Data originates from the World Atlas TopoJSON and TSV files, rendered as SVG elements.

Choropleth Map

This choropleth map visualizes the world’s economies, coloring each country according to its economic classification using a spectral color scale. The map displays the geographic distribution of these categories, with hover states revealing a country’s name and category. Built with D3.js (v5), the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from world-atlas TopoJSON and TSV data. A custom `colorLegend` component, drawn as SVG circles and text, provides a reference for the color categories, while zooming is handled via D3’s `zoom` event and `event.transform`.

Choropleth Map

This example presents a choropleth map of world countries rendered as an SVG using D3 v5. It displays each country as a red-filled path on a blue sphere, with country names shown in tooltips on hover. The visualization uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for drawing, and `d3.zoom` for panning and zooming. Data loads from TopoJSON and TSV files via the world-atlas package, with `topojson.feature` processing geographic boundaries. Hover effects change fill color to red, while the base country color is also red, with black stroke outlines.

Choropleth Map

This choropleth map displays world countries as red-filled paths on a blue sphere using a natural Earth projection, with hover effects changing the fill to red. The visualization employs D3 v5’s `geoPath` and `geoNaturalEarth1` for geographic rendering, and TopoJSON’s `feature` to convert world-atlas 50m topology into GeoJSON. Data from a TSV file is merged with country IDs to attach country names for tooltips. The map supports zooming via D3’s `zoom` behavior, applying transforms to the SVG group.

Bowl of Fruit - General Update Pattern

This example demonstrates D3’s general update pattern for entering, updating, and exiting data joins. Animated over time, a bowl of fruit changes as apples are removed, a lemon replaces one apple, and another apple disappears, with circles and labels updating accordingly. The code uses `d3.scaleOrdinal` for color and radius encoding, `selection.merge` to handle entering and updating elements, and `selection.exit().remove()` for removal. The fruit bowl shape is an SVG rectangle with rounded corners.

Mar 28, 2020

Color and Size Legends

This example demonstrates how D3 legends can visually encode data through both color and size. It uses a D3 ordinal color scale to map the categories "apple" and "lemon" to red and yellow swatches, while fixed circle radii and text offsets in the custom `colorLegend` function control the legend’s spatial layout. The SVG-based visualization is rendered using D3 v5, with the legend positioned via an SVG transform and styled through external CSS.

Mar 28, 2020

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion. It uses a horizontal tree layout with D3.js v5, rendering SVG elements for both links and text labels. The code applies D3's `tree()`, `hierarchy()`, `linkHorizontal()`, and `zoom()` APIs to construct the layout and enable interactive panning and zooming. The underlying data comes from a JSON file containing nested country and region names.

Mar 28, 2020

Blank Canvas

This example demonstrates a completely blank SVG canvas that scales to fill the browser window. The code uses D3 v5’s `select` method to target the SVG element, then sets its width and height based on the viewport dimensions. A single rectangle with rounded corners (`rx` set to 40) fills the entire space, styled by the accompanying CSS, which fixes the body to the viewport and removes margins. The visualization serves as a minimal starting point for any future D3 project.

Lets Make a map with D3.js

This example visualizes world countries as a static map using a natural Earth projection. The map renders countries in light green with subtle black strokes against a dark blue sphere, providing a clear geographic overview. The code uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw SVG paths, while TopoJSON’s `feature` extracts country boundaries from a world-atlas dataset. Country shapes are appended to an SVG container, with styling applied via CSS classes for sphere and country paths.

Bowl of Fruit -Hover to select

Five fruit circles represent apples and lemons in a simple SVG bowl. Hovering over a circle selects it with a black outline. The visualization uses D3’s ordinal color and radius scales to map fruit type to red or yellow fill and size. The `fruitBowl` function animates circle enter, update, and exit transitions over 1000 milliseconds. A script demonstrates dynamic updates by removing apples, replacing one with a lemon, and filtering data.

Bowl of Fruit -Click to select

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

Bowl of Fruit - General Update Pattern

Bowl of Fruit-General Update Pattern

This example demonstrates the general update pattern for data joins in D3, using a bowl of fruit as an animated metaphor. It shows how entering, updating, and exiting elements transition smoothly when the dataset changes over time via timed intervals, including removal, type changes, and filtering. The visualization renders SVG circles and text labels, with scales mapping fruit types to colors and radii. The code uses d3.select, d3.range, transition methods, and a modular fruitBowl function that handles the join logic with enter/merge/exit selections.

Bowl of Fruit-General Update Pattern

Five fruit circles render as apples and shift position, change type, or disappear over time. The example demonstrates D3’s general update pattern with data joins, using `selection.enter`, `merge`, and `exit` to handle entering, updating, and exiting elements. Each state transition animates circle radius and position via `transition().duration(1000)`, while `scaleOrdinal` maps fruit type to color and size. The visualization uses an SVG rendering approach with D3 v5 and randomly generated fruit IDs as the data source.

World Population Area Chart

This area chart visualizes world population growth over time, with the x-axis showing years and the y-axis displaying population in billions. The code uses d3.scaleTime and d3.scaleLinear to map data, d3.area with curveBasis to create the filled path, and d3.axisBottom and d3.axisLeft for tick marks and labels. The data, sourced from a CSV file, is loaded via d3.csv and rendered as an SVG.

Temprature in San Francisco Line Chart

This visualization shows a week of temperature readings in San Francisco as a smooth, filled area chart over time. The area path is generated using D3’s `area` generator with a `curveBasis` interpolation, while `scaleTime` and `scaleLinear` map the timestamp and temperature data to the SVG canvas. Axes with gridlines are created via `axisBottom` and `axisLeft`, and the data is loaded as CSV from a VizHub-hosted dataset.

Temprature in San Francisco Line Chart

This visualization displays a line chart of San Francisco temperatures over a week, with time on the x-axis and temperature on the y-axis. The SVG chart is built using D3 v5, employing `scaleTime`, `scaleLinear`, and `line` with `curveBasis` for smooth interpolation. Axis labels and a title are added via SVG text elements, while grid lines are generated using tick sizes. Data is loaded asynchronously from a CSV file using `csv`, with timestamps parsed as `Date` objects and temperatures converted to numbers.

Temprature in San Francisco Scatter plot

This scatter plot visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5's `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for gridlines, and SVG circles to represent data points. Data is loaded from a CSV file containing timestamp and temperature values, then mapped to the plot’s ranges. The design includes rotated axis labels and a title, with ticks and text styled via CSS.

Scatter plot

This scatter plot visualizes the relationship between car horsepower and weight using data from the auto-mpg dataset. Red semi-transparent circles are plotted on an SVG canvas, with axes labeled and styled via D3 v5's scaleLinear, axisBottom, and axisLeft APIs. The visualization includes a title and axis labels, with gridlines generated through tickSize settings. Data is loaded as CSV and parsed into numeric values before rendering.

Scatter plot

This scatter plot displays the 12 most populous countries using a circular mark for each nation. The x-axis encodes population on a linear scale, with values formatted in compact notation (e.g., “1.42B”), while the y-axis uses a point scale for country names, creating evenly spaced rows. The code builds the chart with d3.csv, scaleLinear, scalePoint, axisBottom, axisLeft, and selectAll—rendering circles and axes in SVG. Population figures from the CSV are multiplied by 1,000 to reflect actual counts, and gridlines extend across the plot via tickSize.

Learn D3.js

This example shows worldwide operating system market share for Android, Windows, and iOS as a labeled pie chart. It renders in SVG using D3 v4, with the `d3.pie` layout generating arc data from hardcoded percentages and `d3.arc` producing the path geometry. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, while arc centroid labels display each platform and its percentage directly on the chart. The visualization demonstrates basic pie chart construction with group elements and path/text bindings.

Learn D3.js

This example shows worldwide operating system market share percentages in a static pie chart drawn with SVG. The code uses D3 v4’s `d3.pie()` to compute arc angles from three data objects and `d3.arc()` with `outerRadius` and `innerRadius` to generate the path shapes. A single `<text>` element per slice, positioned via `label.centroid(d)`, displays the platform name and percentage. Categorical colors come from `d3.scaleOrdinal(d3.schemeCategory10)`. The visualization is rendered inside an `svg.pie-chart` element in the HTML, with data hard-coded in the JavaScript array.

Learn D3.js

This line chart visualizes the historical Bitcoin Price Index from December 2017 to April 2018, using data fetched from the CoinDesk API. The SVG chart displays price over time with a steelblue line, axis labels, and a rotated y-axis title. The example demonstrates D3.js v4's `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for building a complete, responsive chart from JSON data parsed into date-value pairs.

Making a Bar Chart

This example shows a horizontal bar chart of country populations, ranking thirteen nations from China to the Philippines. The bars are rendered as SVG rectangles filled with steel blue, with a left axis displaying country names and a bottom axis showing population counts. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to generate the axes. Population values are converted from thousands using array methods before rendering.

Lets Make a face with D3.js

This example builds a stylized face from basic SVG shapes using D3.js v5 and React. It draws a yellow circle for the head, adds eyes and eyebrows as circles and rectangles, and creates a mouth with a D3 arc generator. The eyebrows animate upward and back down using chained `transition().duration()` calls, creating a playful expression. The code selects the SVG element, calculates dimensions dynamically, and positions facial features relative to the center using translation transforms.

Cars Report

This example demonstrates a minimal web page titled “Cars Report” that displays the static text “Hello HTML” centered on a blank background. The visualization is built with a plain HTML file using inline CSS to set the body’s text alignment and an extremely large font size (13em). It does not load any external libraries or data, instead relying solely on standard HTML and CSS rendering. The page serves as a bare-bones starter template, likely intended for later expansion into a more complex React-based dashboard.