Skip to main content
Log in
M

Mukund Khandelwal

@MukundKhandelwal·161 public vizzes

Loading thumbnail…

Bowl with fruits transition assignment

Three differently sized fruits—apples and lemons—are arranged in a row inside a bowl. The animation shows the bowl updating as fruits are removed or their types change, with the circles and labels transitioning smoothly to their new positions and sizes. The visualization uses D3.js version 5 and leverages the `selection.merge` and `transition` APIs to animate changes in `attr('r')` and `transform` attributes. SVG rendering displays the bowl as a rectangle with rounded corners, and the fruit data is managed with simple array operations over time.

Nov 6, 2018
Loading thumbnail…

When you are excited about the long weekend but its still Wednesday!

A green smiley face with red eyes, thick black glasses, and a partial arc mouth sits on a white canvas. The eyebrows rotate slightly outward, then animate upward and back down, conveying a mood of tired anticipation. Built with D3 v5, the visualization uses SVG shapes—circles, rectangles, lines, and an arc path—and applies a chained `transition` to animate the eyebrow group’s transform over four seconds. The code constructs each facial feature by translating groups relative to the SVG’s center.

Nov 6, 2018
Loading thumbnail…

Tax revenue over time plot

This scatter plot visualizes United States tax revenue as a percentage of GDP from 1800 to 2011, sourced from IMF historical data. Green circles encode each year, with axes for year and revenue share. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to build the SVG chart, with explicit margins, gridlines, and rotated axis labels. Data is loaded via `csv` from a VizHub dataset, and styling uses comic-sans fonts and semi-transparent circles with black strokes.

Nov 6, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

Nov 6, 2018
Loading thumbnail…

Premier League Player Stats

This horizontal bar chart visualizes the top 10 goal scorers in the English Premier League for the 2017-18 season. It uses D3 v5 to map player names to a band scale and goal counts to a linear scale, rendering SVG rectangles with a fixed pink fill. The data is loaded from a local CSV file containing player and goal columns, and axes are generated with `axisLeft` and `axisBottom`.

Nov 6, 2018
Loading thumbnail…

Tax revenue over time plot

This line chart displays United States tax revenue as a percentage of GDP from 1800 to 2011, using data from the IMF. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.line with a curveBasis interpolation to draw a thick, semi-transparent green trend line. Revenue values are parsed as numbers from the CSV, while the title and axis labels are styled with Comic Sans. The chart is rendered as an SVG with gridlines created via negative tick sizes.

Nov 6, 2018
Loading thumbnail…

Expenditure over time plot

This line chart shows United States government expenditure as a percentage of GDP from 1800 to 2011, based on IMF data. The y-axis measures expenditure percentage, while the x-axis displays the year. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing. The red line path has a thick, semi-transparent stroke, and gridlines extend across the plot area. Data is loaded from a CSV file hosted on VizHub.

Nov 6, 2018
Loading thumbnail…

Map Interaction Assignment Final

This interactive world map visualizes countries colored in light green against a blue sphere, with hover effects that turn countries yellow and reveal a tooltip containing the country name, continent, and economic status. Built with D3 v5 and the topojson library, it uses `d3.geoPath` with an equirectangular projection to render geographic features from the World Atlas 50m dataset, while supporting zoom and pan interactions through `d3.zoom`. Country metadata, including economy and continent classifications, is loaded from the accompanying TSV file and linked to the geometric data by ISO country codes.

Nov 6, 2018
Loading thumbnail…

Debt over time plot: India

The chart displays India’s national debt as a percentage of GDP from 1913 to 2011, using a smooth line to reveal spikes tied to historical economic events. Drawn as an SVG, the visualization uses D3 v5’s `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` to plot the data, which originates from the IMF’s historical debt database. Axes include labeled tick marks and light gridlines, with an orange path highlighting debt variation over time.

Nov 6, 2018
Loading thumbnail…

Primary Balance on Choropleth Map

This choropleth map visualizes the primary balance as a percentage of GDP for 55 countries, using color to distinguish values. The map uses an equirectangular projection rendered as SVG paths via d3.geoPath, with data sourced from the IMF. Users can zoom and pan through d3.zoom, and click color legend entries to highlight specific balance ranges. The color scale uses d3.scaleOrdinal and the YlOrRd scheme.

Nov 6, 2018
Loading thumbnail…

Economic factors over time for US: Menus

This interactive scatter plot visualizes U.S. economic factors from 1800 to 2011, using data from the IMF. Two dropdown menus let viewers select which economic variable appears on each axis, updating the visualization dynamically. Each data point is drawn as an orange circle that animates into position over four seconds using a staggered delay. The code uses d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and transition.attr to render the SVG and handle the animated updates.

Nov 6, 2018
Loading thumbnail…

Change in GDP: Post World War II

This scatterplot compares GDP growth for the United States and Germany from the post-World War II era using data from the IMF. Two countries are distinguished by color with an interactive legend that lets users isolate a single nation. The D3 v5 code builds the visualization as an SVG, relying on `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` for the color scheme. Circles are drawn with `append('circle')` and update opacity based on the selection.

Nov 6, 2018
Loading thumbnail…

Project | Interaction | Re-submit

A choropleth map shows the primary balance of countries, colored on a Yellow-Orange-Red ordinal scale, with a clickable legend to filter and highlight selected economic categories. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` to render SVG country paths from TopoJSON (world-atlas 50m), joined with CSV data. The map supports zooming via `d3.zoom`, and legend interactions trigger re-renders that adjust country opacity and highlight states.

Nov 6, 2018
Loading thumbnail…

Debt over time plot: India

This visualization shows India’s debt as a percentage of GDP from 1913 to 2011, highlighting spikes linked to economic or global events. The line chart uses a smooth curve (d3.line with curveBasis) to connect yearly data points, with an orange semi-transparent stroke. The x-axis displays years and the y-axis shows debt percentage, rendered as an SVG. Data is loaded from a CSV using d3.csv, scales and axes are built with d3.scaleLinear and d3.axisBottom/axisLeft, and the source is the IMF historical debt database.

Nov 6, 2018
Loading thumbnail…

Primary Balance filter 1

This choropleth map shows the primary balance as a percentage of GDP for 55 countries, with a color legend that filters the map when a value is clicked, dimming non-matching countries. The visualization uses d3.geoEquirectangular for the projection and d3.geoPath to render the world map, with d3.zoom enabling pan and zoom interaction. Data is loaded via d3.csv and d3.tsv from the IMF website, and the ordinal color scale uses d3.schemeYlOrRd. The map is rendered as SVG, with hover highlighting and click-based filtering managed through D3 selections.

Nov 4, 2018
Loading thumbnail…

Variation of GDP over time for USA and Germany

This example shows the variation of GDP over time for the USA and Germany as a scatterplot, with each country’s annual GDP values plotted as colored points. Users can click the legend to highlight one country’s data while dimming the other. The visualization uses d3.csv to load data, d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.scaleOrdinal with schemeCategory10 for colors. The legend renders as SVG circles with interactive click handlers, and the scatterplot updates point opacity based on the selected country.

Nov 4, 2018
Loading thumbnail…

Debt over time plot - India

This line chart displays India’s debt as a percentage of GDP over time using a smooth green curve, with the x-axis showing years and the y-axis reporting the debt ratio. The visualization is built with D3 v5, using `d3.line()` and `curveBasis` to generate the path, and renders to SVG. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while data is loaded from a CSV file via `d3.csv`. A semitransparent stroke and comic-sans labels give the chart a distinctive style.

Nov 4, 2018
Loading thumbnail…

Tax revenue over time plot

This visualization shows U.S. tax revenue as a percentage of GDP over time, plotting each year as a green circle. The chart uses D3 v5’s `csv` loader to fetch data from a VizHub-hosted CSV file, then renders the scatterplot in SVG. Axes are generated with `axisBottom` and `axisLeft`, while `scaleLinear` maps year and revenue values to screen coordinates. The visualization includes labeled axes, a title, and formatted tick values.

Nov 4, 2018
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

Nov 4, 2018
Loading thumbnail…

Project | Interaction | Re-submit

A choropleth map shows the primary balance of countries, colored on a Yellow-Orange-Red ordinal scale, with a clickable legend to filter and highlight selected economic categories. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` to render SVG country paths from TopoJSON (world-atlas 50m), joined with CSV data. The map supports zooming via `d3.zoom`, and legend interactions trigger re-renders that adjust country opacity and highlight states.

Nov 4, 2018
Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection map with semi-transparent teal circles sized by each country’s 2018 population, drawn from UN population estimates and world atlas TopoJSON data. A square-root size scale encodes population values, with a corresponding size legend and an ordinal color legend for missing data. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map geometry, d3.geoCentroid to position circles, and d3.zoom for panning and zooming. Hovering a country reveals a tooltip with its region and formatted population.

Nov 4, 2018
Loading thumbnail…

GDP changes: Post World War II

A scatterplot displays annual GDP percentage changes for the US and Germany from 1946 onward. Country is encoded with color, and clicking a legend entry filters the data by highlighting that country while dimming the other. The visualization loads CSV data from the IMF using `d3.csv`, scales axes with `scaleLinear` and `extent`, and renders SVG circles and axes with `axisBottom` and `axisLeft`. A custom `colorLegend` module handles interactive selection.

Oct 30, 2018
Loading thumbnail…

Project | Interaction | Re-submit

This visualization presents a choropleth map of national fiscal metrics, with an interactive legend for filtering by economic category. Users click legend items to highlight matching countries and dim others. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` to render world shapes from TopoJSON, with `d3.zoom` for panning and scaling. Data comes from CSV files joined to country IDs via `d3.csv`, with `d3.scaleOrdinal` mapping categories to the `schemeYlOrRd` color scheme.

Oct 25, 2018
Loading thumbnail…

Project | last part

This visualization is a choropleth map of world countries colored according to a color scale derived from a categorical attribute, with a legend allowing interactive filtering of highlighted countries. The map uses the D3 geo projection API (`geoEquirectangular` with `geoPath`) to render country boundaries as SVG paths from TopoJSON data merged with CSV attributes. The legend, built with D3's ordinal color scale and the `schemeYlOrRd` color scheme, responds to clicks to toggle a selected category, which dims non-matching countries. The map also implements a zoom interaction via D3's `zoom` event.

Oct 25, 2018
Loading thumbnail…

Project | last part-resubmit

This choropleth map displays the primary balance of countries, using a yellow-to-red sequential color scale. Users can click a legend item to highlight countries with the selected value, while dimming all others. Built with D3 v5, the map projects geographic data using `d3.geoPath` and `d3.geoEquirectangular`, with zoom and pan via `d3.zoom`. Country boundaries and economic data come from the World Atlas TopoJSON and a CSV dataset, loaded through `d3.json` and `d3.csv`.

Oct 25, 2018
Loading thumbnail…

Project | Interaction

A choropleth map of world countries colored by primary balance, with a yellow legend panel for selecting economic categories. Clicking a legend item highlights matching countries and dims others; clicking again clears the selection. The map supports zoom and pan via d3.zoom. Built with d3.geoPath and geoEquirectangular projection, using TopoJSON world-atlas data and CSV attributes merged by ISO code. Hovering a country shows its name and primary balance in a tooltip.

Oct 25, 2018
Loading thumbnail…

Project | Load color | legend | moving

This example displays a world map with countries colored by a categorical measure of "prudence," using a yellow-or-red ordinal color scale. An interactive legend allows users to click a color value to filter and highlight matching countries while dimming others. The visualization uses d3.geoPath with a geoEquirectangular projection, d3.zoom for panning, and a custom color legend component. Data comes from CSV and TopoJSON files, rendered as SVG paths with hover effects defined in CSS.

Oct 24, 2018
Loading thumbnail…

Project | Load color | legend

This example visualizes world data on primary balance and economy using a choropleth map. The map projects countries with the `geoEquirectangular` projection via `d3.geoPath`, while fill colors are assigned by an ordinal color scale using a `schemeYlOrRd` palette. The data originates from a CSV file joined to the world-atlas TopoJSON. A custom legend lists the color scale's ordinal values, allowing users to click a legend item to update the map's color mapping.

Oct 24, 2018
Loading thumbnail…

Project | Load color

This example visualizes national primary balance data on a world map, using color intensity to represent each country’s economic status. Built with D3 v5, it projects geographic features via `d3.geoPath` and `geoEquirectangular`, while `scaleOrdinal` with `schemeYlOrRd` maps data values to fill colors. A custom color legend component displays the ordinal scale with circles and labels, set against a semi-transparent background. Countries render as SVG paths with hover effects, and the map supports zooming through D3’s zoom behavior. Data comes from CSV files joined to TopoJSON world geometry.

Oct 24, 2018
Loading thumbnail…

Project | Primary Balance | Chloro

This example visualizes each country’s economy type and primary balance using a choropleth world map. Countries are colored by their economic classification through a categorical color scale with a custom legend, while hovering reveals the country name and primary balance value. The map is rendered as SVG using `d3.geoPath` with an equirectangular projection, and country outlines come from TopoJSON data. D3’s `d3.zoom` enables panning and zooming, and the visualization uses `d3.scaleOrdinal` and `schemeSpectral` for color mapping.

Oct 24, 2018
Loading thumbnail…

Project | Load

This visualization shows a world map where each country is colored according to its economic status, using a diverging red-yellow-green color scale derived from a dataset of primary balance values. The map supports zooming via d3.zoom, and a color legend generated with custom D3 code displays the ordinal scale’s categories. The geographic paths are rendered using d3.geoPath with a geoEquirectangular projection, while country data is loaded from a CSV file merged with TopoJSON world atlas geometry using topojson.feature.

Oct 24, 2018
Loading thumbnail…

Project | Primary Balance | Part 1

This map visualizes primary balance values by country, with each nation colored orange and displaying its name, primary balance, and economic status in a tooltip on hover. The visualization uses a geographic projection (`d3.geoEquirectangular`) to render world boundaries as SVG paths, with data loaded from a CSV file and world atlas TopoJSON. The code applies a zoom interaction and hover styling that changes the fill to yellow, utilizing `d3.geoPath` for path generation and the `topojson` library for feature conversion.

Oct 24, 2018
Loading thumbnail…

Project | Primary Balance | Part 1 | Chloro-new

This example displays a world map using D3.js, coloring each country orange and highlighting it yellow on hover. It visualizes primary balance and economic data by country, with tooltips showing country names. The visualization uses `d3.geoEquirectangular` projection, `d3.geoPath` to render geographic paths, and TopoJSON to convert world atlas data. Users can zoom and pan the map via D3’s zoom behavior. Data is loaded from CSV and JSON sources via `Promise.all`, and each country includes a `<title>` element for hover details.

Oct 24, 2018
Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive choropleth map shows world countries colored by name, with a clickable legend that filters the map to highlight a selected country while dimming others. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` for rendering countries, and `d3.zoom` for pan and zoom. Data combines CSV attributes with TopoJSON country boundaries, while the ordinal color scale uses `schemeSpectral`. Clicking a legend item toggles the filter, adjusting opacity and stroke width for highlighted countries.

Oct 24, 2018
Loading thumbnail…

Untitled

This example displays a world choropleth map colored by each country’s economy category, with an interactive legend that filters and highlights selected categories. It uses d3.geoPath and d3.geoNaturalEarth1 for geographic rendering from TopoJSON data loaded via topojson.feature, with d3.scaleOrdinal and schemeSpectral mapping categories to colors. The legend and map respond to clicks, adjusting opacity and stroke widths, while d3.zoom enables panning and zooming.

Oct 24, 2018
Loading thumbnail…

Project | Primary Balance | Chloro | Filter-2

This example displays a world map where each country is colored according to its economic status, using a spectral color scale. The map also shows primary balance data in tooltips when hovering over countries. A custom color legend on the left allows users to filter countries by clicking on specific economic categories, which dims non-selected values. The visualization uses d3.geoPath with a geoEquirectangular projection, d3.scaleOrdinal for coloring, and d3.zoom for interactive panning.

Oct 24, 2018
Loading thumbnail…

Project | Primary Balance | Chloro | Filter

This example presents a choropleth map of the world, colored by the economic status of each country. Hovering over a country highlights it in yellow and displays a tooltip with its name, primary balance, and economy classification. The visualization uses d3.geoPath with an equirectangular projection to render geographic features. The color legend is built with a custom colorLegend component, while data from a CSV file is joined with world-atlas TopoJSON. Styling and interactivity are handled through CSS and d3's selection and event APIs.

Oct 24, 2018
Loading thumbnail…

Project | Primary Balance | Chloro | Filter

A world map colored by each country's economic status, rendered with SVG paths via d3.geoPath and a geoEquirectangular projection. Hovering reveals a tooltip with the country name, primary balance, and broader economic classification. The color legend, built with a custom colorLegend function, uses an ordinal scale mapped to the d3 schemeSpectral range. Data comes from a CSV joined with TopoJSON world-atlas shapes, while d3.zoom enables panning and zooming.

Oct 24, 2018
Loading thumbnail…

Project: Primary Balance, Part 2

This visualization displays global primary balance data mapped onto an equirectangular world projection. It uses D3 v5 with d3.geoPath and topojson to render country boundaries, while CSV data from VizHub supplies each nation’s economic status and primary balance. Hovering over a country reveals its name, primary balance value, and broader economic position via SVG title tooltips. The map supports pan-and-zoom interaction through d3.zoom, with countries colored grey and highlighted black on hover.

Oct 17, 2018
Loading thumbnail…

Project: Primary Balance, Part 1

This visualization displays a world map where each country is colored grey with a red stroke, and hovering over a country reveals its primary balance, economy type, and name in a tooltip. The map uses an equirectangular projection rendered as SVG paths via d3.geoPath, with TopoJSON data from the world-atlas package combined with CSV data loaded from VizHub. Zooming is enabled through d3.zoom, and the project uses D3 v5 to bind the CSV attributes to each geographic feature.

Oct 17, 2018
Loading thumbnail…

Project: Map Interaction Assignment Final

This interactive world map displays each country with hover tooltips showing its name, continent, and economic classification. The visualization uses an equirectangular projection rendered as SVG paths via d3.geoPath, with topojson feature conversion for geographic data. Pan and zoom functionality is implemented through d3.zoom, applying transforms to the map group. Country boundaries come from the world-atlas TopoJSON dataset, while names and economic metadata are joined from TSV data using ISO country codes. Hover effects change country fill and stroke colors, with tooltips provided through SVG title elements.

Oct 17, 2018
Loading thumbnail…

Map Interaction Assignment

This example displays an interactive world map using an equirectangular projection rendered as SVG paths. Clicking a country highlights it, while hovering turns countries yellow. The visualization loads geographic data from the World Atlas TopoJSON and TSV datasets, using `d3.geoPath` with `geoEquirectangular` projection and the TopoJSON `feature` API to extract country boundaries. Styles for the sphere background and country fills are defined in a separate CSS file.

Oct 16, 2018
Loading thumbnail…

Project: Primary-Balance Testing-csv

This visualization displays a world map where each country is colored based on its primary balance data from a CSV file, with tooltips showing the country name, primary balance, economy type, and continent. The map uses a d3.geoEquirectangular projection with d3.geoPath to render TopoJSON world atlas data, and d3.zoom enables interactive panning and zooming. Countries are rendered as SVG paths that turn black on hover, while the primary balance values and regional metadata from the CSV are encoded in the title elements.

Oct 16, 2018
Loading thumbnail…

Project: Primary-Balance Testing

This visualization displays a world map highlighting countries by their economic status, with hover tooltips revealing each country’s name, continent, and broader economic position. It renders geographic boundaries using D3’s `geoEquirectangular` projection and `geoPath`, layered over a blue sphere. TopoJSON data from world-atlas is converted to GeoJSON via `feature`, while ISO country codes are matched to metadata from a TSV file. The map supports zooming and panning through D3’s `zoom` behavior, and SVG paths respond to hover with a fill and stroke color change.

Oct 15, 2018
Loading thumbnail…

Project

This example displays a world map with countries filled in light green, rendered on a blue spherical backdrop. The map allows panning and zooming through the d3 zoom event, which applies a transform to the map group. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` APIs to project geographical data, and the `topojson.feature` function to convert TopoJSON into GeoJSON features. Country names are loaded from a TSV file from the world-atlas package and displayed as tooltips via SVG `title` elements.

Oct 14, 2018
Loading thumbnail…

Exports to Seven Countries with Menus

This interactive scatter plot displays annual export values from 2000 to 2016 for seven countries, drawn from World Trade Organization data. Two dropdown menus let users select which countries to compare on the x- and y-axes. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().delay()` to animate circles from the center to their positions. The `dropDownMenu` component updates the chart on each selection, while SVG rendering and axis labels provide clear context for the chosen comparison.

Oct 10, 2018
Loading thumbnail…

Avocados Scatter Plot With Menus

This scatter plot visualizes avocado pricing and sales data from Kaggle's Hass Avocado dataset. Two dropdown menus let users select which data columns to plot on the x- and y-axes, dynamically updating the chart. The visualization uses D3 v5 to render SVG circles with animated transitions, scaling axes via `scaleLinear`, drawing axes with `axisLeft` and `axisBottom`, and handling menu interactions with custom `dropdownMenu` and `colorLegend` functions.

Oct 10, 2018
Loading thumbnail…

Economic factors over time plot with Menus

This scatter plot displays economic factors for the United States from 1800 to 2011, using data from the IMF. Two dropdown menus let users select which variables to plot on the x- and y-axes, with axes and labels updating dynamically. Built with d3.v5, it uses SVG rendering and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to draw the points, grid lines, and animated transitions. The circles represent individual years, and the chart supports interactive exploration of relationships between revenue, expenditure, GDP, and debt.

Oct 10, 2018
Loading thumbnail…

Economic factors over time plot with Menus-Final

This scatter plot displays the relationship between various US economic factors from 1800 to 2011, using data from the IMF website. Interactive dropdown menus allow the user to select which economic indicators appear on the x-axis and y-axis, with the plot updating dynamically. Built with D3 v5, the visualization uses `scaleLinear()`, `axisBottom()`, `axisLeft()`, and `circle` elements for the scatter plot, while the dropdown menus are created using a custom `dropdownMenu` component that appends HTML `select` and `option` elements.

Oct 10, 2018
Loading thumbnail…

Economic factors over time plot with Menus

This scatter plot displays U.S. economic indicators from 1800 to 2011, allowing users to compare any two factors by selecting columns from dropdown menus for the x- and y-axes. The visualization uses d3.v5 with SVG rendering and animated transitions that gradually move points into position over three seconds. Data from the IMF website is loaded via `d3.csv`. Axis scales are generated with `scaleLinear`, `extent`, and `axisBottom`/`axisLeft`, while the chart updates dynamically whenever a menu selection changes.

Oct 10, 2018
Loading thumbnail…

Economic factors over time plot with Menus-test1

This example visualizes economic factors in the United States from 1800 to 2011, plotting tax revenue against other variables as a scatter plot. The chart allows users to select which economic columns to display on the x-axis and y-axis via dropdown menus. The visualization uses d3.v5's scaleLinear, axisBottom, and axisLeft to construct the axes, while a custom scatterPlot function renders the circles. Data is loaded from a CSV file hosted on VizHub, and the rendering is done as an SVG.

Oct 7, 2018
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It displays temperature in degrees Celsius over time, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 to render an SVG, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` with `curveBasis` for the smoothed path. The chart includes labeled axes and a title, with data loaded asynchronously via `csv`.

Oct 7, 2018
Loading thumbnail…

Debt over time plot - India

This line chart displays the revenue generated through taxes by the United States government from 1800 to 2011, with the y-axis reporting revenue as a percentage of GDP and the x-axis reporting the year. It uses d3’s `csv` loader to fetch data from the described IMF dataset, then renders the line with `d3.line` and a `curveBasis` curve. The chart uses `scaleLinear` with `nice()` for both axes, and `axisBottom` and `axisLeft` for tick marks. The line is styled with a green stroke and 0.4 opacity, with titles and labels rendered as SVG text.

Oct 7, 2018
Loading thumbnail…

Change in GDP: Post World War II

This interactive scatterplot visualizes GDP changes in the United States and Germany after World War II, with GDP percentage on the y-axis and year on the x-axis. A yellow legend panel allows users to click on a country to highlight or dim corresponding data points. The visualization uses d3.csv for data loading from the IMF, d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and a d3.ordinal color scale with schemeSet2. Circles are rendered as SVG elements with opacity adjustments based on selected country.

Oct 4, 2018
Loading thumbnail…

Tax revenue over time plot

This scatter plot visualizes United States tax revenue as a percentage of GDP from 1800 to 2011, sourced from IMF historical data. Green circles encode each year, with axes for year and revenue share. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to build the SVG chart, with explicit margins, gridlines, and rotated axis labels. Data is loaded via `csv` from a VizHub dataset, and styling uses comic-sans fonts and semi-transparent circles with black strokes.

Oct 4, 2018
Loading thumbnail…

GDP changes: Post World War II

This visualization uses a scatterplot to show GDP changes for the USA and Germany after World War II, with the y-axis reporting GDP in percent and the x-axis showing the year. A categorical color scale distinguishes the two countries, and an interactive color legend filters the data by country on click. The code loads data from the IMF via D3’s `csv` function and builds the chart using `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` with `schemeSet2`. The update pattern follows Nick Lima’s approach for handling selections and transitions in SVG.

Oct 4, 2018
Loading thumbnail…

Version_3_SP

This visualization shows GDP variation as a percentage for the USA and Germany after World War II, with year on the x-axis and GDP on the y-axis. It uses a scatterplot with color-coded points for each country and an interactive legend that highlights or dims data by country. The code relies on d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.scaleOrdinal with schemeSet2 for colors. Data is loaded via d3.csv from the IMF website, and interaction is handled through click events on the legend.

Oct 4, 2018
Loading thumbnail…

New-5

This scatterplot compares the GDP variation of the USA and Germany after World War II. The x-axis shows the year, and the y-axis shows GDP as a percentage. A color legend allows users to click on a country to highlight its data points, while the other country's points are dimmed. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, and `scaleOrdinal` with `schemeSet2` for colors, with data sourced from the IMF.

Oct 4, 2018
Loading thumbnail…

New-1

A scatterplot displays GDP variation after World War II for the USA and Germany, with GDP in percent on the y-axis and year on the x-axis, sourced from IMF data. The visualization uses d3.scaleOrdinal with schemeSet2 for color encoding and d3.scaleLinear axes with grid lines. Interactive color legend elements filter points by country, adjusting opacity based on selection. d3.csv loads the dataset, while d3.axisBottom and d3.axisLeft render tick marks.

Oct 4, 2018
Loading thumbnail…

Version_2_SP

This visualization compares the GDP variation of the USA and Germany after World War II, using a scatterplot where the x-axis maps the year and the y-axis reports GDP in percent. The dataset originates from the IMF Website. An interactive color legend, built with `d3.scaleOrdinal` and `d3.schemeSet2`, allows users to click on a country to highlight its data points while dimming others. The chart is rendered as an SVG using `d3.axisBottom` and `d3.axisLeft` for the axes, with circles positioned via `d3.scaleLinear`.

Oct 4, 2018
Loading thumbnail…

New-6

This interactive scatterplot compares GDP variation in the United States and Germany after World War II, with the y-axis showing GDP as a percentage and the x-axis showing the year. Users click a color legend to highlight one country while dimming the other. The visualization uses d3.scaleOrdinal for colors, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for tick marks. SVG circles represent individual observations, with data sourced from the IMF website and loaded via d3.csv.

Oct 4, 2018
Loading thumbnail…

New-2

This visualization displays the change in GDP (in percent) over time for the United States and Germany after World War II, using data from the IMF. A scatterplot with SVG circles, colored by country, shows yearly values, while a clickable color legend filters the data. The code uses d3.csv for loading, d3.scaleLinear and d3.scaleOrdinal for scaling, and d3.axisBottom and d3.axisLeft for axes. An interactive legend reduces opacity of non-selected countries.

Oct 4, 2018
Loading thumbnail…

New-3

This scatterplot visualizes the percentage change in GDP for the US and Germany after World War II, with GDP on the y-axis and year on the x-axis. The visualization uses D3 v5 with an SVG rendering, employing a categorical color scale to distinguish countries. Clickable legend items filter the data points, dimming unselected countries. Data is loaded from a CSV via the IMF website, and axes are created using `d3.axisLeft` and `d3.axisBottom`.

Oct 4, 2018
Loading thumbnail…

New-4

This visualization compares GDP variation (in percent) between the USA and Germany after World War II, using data from the IMF. The d3.v5 scatterplot displays GDP on the y-axis and year on the x-axis, with a clickable color legend to highlight either country. It employs scaleOrdinal and scaleLinear for scales, axisLeft and axisBottom for axes, and SVG circles for data points. The legend uses d3 event handlers to toggle country selection, adjusting circle opacity accordingly.

Oct 4, 2018
Loading thumbnail…

Plays over Time

This interactive scatterplot visualizes monthly play counts for a user's top 10 artists from their Last.fm listening history. Each circle represents one artist’s plays in a given month, colored by artist, with a clickable legend that filters the view to a single artist. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal with a categorical color scheme, rendering as SVG. Data is loaded via d3.csv from a hosted CSV file.

Oct 4, 2018
Loading thumbnail…

Variation of GDP over time for USA and Germany-test3

This scatterplot tracks the GDP variation over time for the USA and Germany, using two distinct colors to differentiate the countries. A color legend allows users to click on a country to highlight its data points while dimming the others. The visualization is built with D3 v5, using `scaleLinear` for the axes, `scaleOrdinal` with `schemeSet2` for the color mapping, and SVG circles for the data points. The data is loaded from a CSV file via `d3.csv`.

Oct 4, 2018
Loading thumbnail…

Plays over Time

This visualization shows the monthly play counts for a user's top 10 artists from Last.fm, with each artist represented as a colored scatterplot point over time. The interactive legend, sorted by total plays, allows filtering to isolate a single artist's data by dimming the other points. The chart uses d3.v5's scaleTime, scaleLinear, scaleOrdinal, axisBottom, and axisLeft APIs within an SVG canvas, and is built with the d3 framework.

Oct 4, 2018
Loading thumbnail…

Plays over Time

This interactive scatterplot displays the monthly play counts for a user’s top 10 Last.fm artists over time, with each colored circle representing one artist’s plays in a given month. Clicking an item in the color legend filters the view to that artist, dimming other points. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/Left within an SVG rendered via D3 v5, with data parsed from a CSV file containing plays per artist per month.

Oct 4, 2018
Loading thumbnail…

Almost Final-8

This interactive scatterplot displays GDP variation over time for artists from the USA and Germany. A color legend with clickable circles filters the data, dimming unselected countries. The visualization uses D3 v5 APIs including scaleLinear, axisBottom, axisLeft, and scaleOrdinal with schemeSet2. Data is loaded asynchronously via csv() from a VizHub dataset, and SVG rendering is used with transition-free updates.

Oct 4, 2018
Loading thumbnail…

Almost Final-1

This visualization plots GDP variation over time for the USA and Germany, with each country represented by a colored circle. Users can click legend items to highlight a specific country while dimming others. The chart uses D3 v5 with `scaleLinear`, `axisBottom`, and `axisLeft` to render the scatterplot and a custom `colorLegend` that supports interactive selection. Data is loaded asynchronously via `d3.csv` from an external file, and the visualization renders to SVG.

Oct 4, 2018
Loading thumbnail…

Choropleth Map with Interactive Filtering-1

This choropleth map shows countries colored by a data value, with an interactive legend that filters the map. Clicking a legend item highlights only the matching country and dims the others, while clicking again clears the filter. Built with D3 v5, it renders an SVG using topojson for geographic boundaries and loads data from a CSV file. The color legend is implemented as a reusable component that binds click events to toggle the selected color value.

Oct 4, 2018
Loading thumbnail…

GDP changes: Post World War II

This interactive scatterplot compares GDP changes in the US and Germany after World War II, with each point representing a country’s annual GDP percentage. Users click the color legend to highlight or dim each country’s trajectory. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` for rendering SVG circles, while data is loaded via `d3.csv` from the IMF website.

Oct 4, 2018
Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive visualization combines a scatter plot and a categorical color legend to show GDP variation across years for the USA and Germany. Users can click a country in the legend to filter the data, highlighting selected points while dimming others. The project uses D3 v5 with `d3.scaleOrdinal` for color assignment, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for tick marks, rendering as SVG from a CSV dataset.

Oct 4, 2018
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification, with an interactive legend that filters the map to highlight a selected income group while dimming others. The visualization also includes a linked scatterplot showing GDP over time for each country, where points corresponding to the selected economic group remain opaque. Built with D3 v5, the map uses `d3.geoPath` and TopoJSON to render geographic features, while the legend and scatterplot are implemented as reusable functions. Data is loaded from a CSV file hosted on VizHub, and SVG is used for all rendering.

Oct 4, 2018
Loading thumbnail…

Expenditure over time plot

This plot shows United States expenditure as a percentage of GDP since 1800, with a red line charting the yearly values. The visualization uses D3.js v5, scaling the x-axis linearly for years and the y-axis linearly for expenditure percentages. It renders as SVG, with the line generated using `d3.line`, `curveBasis` for smoothing, and axes created via `axisBottom` and `axisLeft`. Data is loaded asynchronously from a CSV file using `d3.csv`.

Oct 4, 2018
Loading thumbnail…

Bowl with fruits transition

A bowl of fruits animates through a sequence of state changes, showing apples and lemons appearing, disappearing, and swapping types. D3.js v5 with SVG drives the transition, using `scaleOrdinal` for color and radius mappings per fruit type. The code applies `transition().duration(1000)` to circle radii as fruits enter or update, while exit transitions remove departing groups smoothly over one second.

Oct 4, 2018
Loading thumbnail…

Bowl of Pudding - General Update Pattern Special Cases

This example demonstrates the general update pattern for data joins, showing how fruits (apples and lemons) transition in and out of a bowl-shaped container. It uses D3 v5 with SVG rendering and animations, applying ordinal scales for color and radius to distinguish fruit types. The code explicitly handles enter, update, and exit selections—though enter and merge are used, while exit removes departing groups. The bowl itself is a static rectangle with rounded corners, and fruit positions are calculated from index values, with transitions animating radius changes over one second.

Oct 4, 2018
Loading thumbnail…

Bowl of Pudding - General Update Pattern Special Cases

This example demonstrates the general update pattern for data joins, showing how fruits (apples and lemons) transition in and out of a bowl-shaped container. It uses D3 v5 with SVG rendering and animations, applying ordinal scales for color and radius to distinguish fruit types. The code explicitly handles enter, update, and exit selections—though enter and merge are used, while exit removes departing groups. The bowl itself is a static rectangle with rounded corners, and fruit positions are calculated from index values, with transitions animating radius changes over one second.

Oct 4, 2018
Loading thumbnail…

Bowl of Pudding - Animated Transitions

Animated transitions update a bowl of pudding represented by circles, with chocolate pudding in dark brown and strawberry in pink, moving horizontally and resizing over one second. The visualization uses d3's selection and transition APIs, specifically `.transition().duration()` and `.attr()`, to animate entering, exiting, and changing circles. Data is generated randomly via `Math.random()` for unique IDs, with puddings added and removed over timed intervals, rendered as SVG elements in a 960x500 viewport.

Oct 4, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with several special cases, using a row of fruit in a bowl that changes over time. It shows how to handle entering elements (adding fruit), exiting elements (removing them), and updating existing ones (changing an apple to a lemon). The code uses D3 v5 with `selection.enter`, `selection.merge`, and `selection.exit` to bind data to SVG groups, while `scaleOrdinal` maps fruit types to color and size. A `setTimeout` sequence drives the temporal changes.

Oct 4, 2018
Loading thumbnail…

Almost Final-9

This scatterplot displays GDP variation over time for the USA and Germany, with a categorical color scale assigning each country a distinct color. An interactive legend allows users to click a country name to highlight its data points while fading the other nation's points, filtering the visualization. The chart is rendered with D3 v5 and SVG, using the `d3.scaleLinear` and `d3.scaleOrdinal` APIs for axes and color, while the legend and scatterplot are built from custom modular functions. Data is loaded from a CSV file via `d3.csv`.

Oct 4, 2018
Loading thumbnail…

Almost Final-6

This scatterplot displays GDP variation over time for the USA and Germany, with points colored by country from a CSV file. Users can click a color legend to filter the visualization, dimming points from unselected countries. Built with D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` with `schemeSet2` for colors, and custom modules `scatterplot` and `colorLegend` to render SVG circles and interactive legend elements.

Oct 4, 2018
Loading thumbnail…

Variation of GDP over time for USA and Germany-test5

This interactive scatter plot visualizes the yearly GDP variation for the USA and Germany, with each circle representing a country-year pair. A color legend allows users to select a specific country, which highlights its points while dimming others. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with the `schemeRdYlBu` color scheme, and SVG rendering. Data is loaded asynchronously from a CSV file via `csv()`.

Oct 4, 2018
Loading thumbnail…

Variation of GDP over time for USA and Germany-test4

This scatterplot shows the variation in GDP over time for the USA and Germany, with each circle representing a data point colored by country. A legend allows users to click on a country to highlight its points while dimming the others. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `selectAll` with data joins for updates. The data is loaded from an external CSV file, and the chart includes descriptive axis labels for year and GDP percentage.

Oct 4, 2018
Loading thumbnail…

Almost Final

A scatterplot shows GDP variation for the USA and Germany over time, with each country's data points colored using a categorical scale. Clicking a country in the accompanying color legend highlights its points and fades the others, allowing focused comparison. The visualization uses d3.csv to load data, d3.scaleLinear for axes, d3.scaleOrdinal with schemeSet2 for colors, and d3.axisLeft/axisBottom for tick marks, all rendered as SVG elements.

Oct 4, 2018
Loading thumbnail…

Plays over Time-test

This visualization shows the monthly play counts for a user’s top 10 most-listened artists on Last.fm, with each artist represented as a colored dot positioned by time on the x-axis and play count on the y-axis. A clickable color legend filters the scatterplot to highlight a single artist’s data while dimming others. The code uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal with schemeCategory10, and d3.axisBottom/axisLeft, rendering SVG circles. Data is loaded from a CSV via d3.csv.

Oct 4, 2018
Loading thumbnail…

Almost Final-5

This scatterplot compares GDP variation between the USA and Germany over time, using D3.js v5 to render an SVG visualization. A color legend with clickable artist labels filters the data points, dimming unselected countries to an opacity of 0.05. The chart includes custom axes with gridlines and labels, driven by `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a CSV file via `csv()` and processed in `loadData.js`.

Oct 4, 2018
Loading thumbnail…

Almost Final-7

This scatterplot shows GDP variation over time for the USA and Germany, with a legend filtering data by country. The visualization uses d3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and custom `colorLegend` and `scatterplot` modules to render SVG circles. Users can click legend items to highlight a specific country’s data points while dimming others. Data is loaded via `csv` from an external URL, with axes labeled and gridlines styled through CSS.

Oct 4, 2018
Loading thumbnail…

Almost Final-11

This visualization displays GDP variation over time for the USA and Germany, with each country represented by a distinct color from a categorical scale. Users can click on the color legend to highlight a specific country’s data points while dimming others. Built with D3 v5, the chart uses `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs to render an SVG scatterplot with interactive filtering, loading CSV data from a remote URL.

Oct 4, 2018
Loading thumbnail…

Almost Final-10

This example visualizes GDP variation for the USA and Germany over time as a scatterplot, with each country’s annual percentage change in GDP plotted against the year. A categorical color legend allows viewers to highlight or filter a specific country by clicking, which adjusts the opacity of unselected points. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with a schemeSet2 color palette, and d3.axisBottom and d3.axisLeft for gridlines and labels. Data is loaded via d3.csv from a remote CSV file, and rendering is done using SVG elements.

Oct 4, 2018
Loading thumbnail…

Almost Final-4

This scatterplot visualizes GDP variation over time for multiple countries, with each dot colored by country and opacity highlighting a selected country while dimming others. Users click legend items to filter the visualization. The chart uses D3 v5 with SVG rendering, `scaleLinear` for axes, `scaleOrdinal` with `schemeSet2` for colors, and custom `scatterplot` and `colorLegend` modules. Data loads from a CSV file containing yearly GDP percentages.

Oct 3, 2018
Loading thumbnail…

Almost Final-2

An interactive scatterplot shows GDP variation across years for selected countries, with circles colored by country and clickable legend entries that highlight a chosen nation while dimming others. Built with D3 v5, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` with gridlines, and an SVG renderer. Data is loaded from a CSV and updated via a `render` function that re-calls the scatterplot and color legend components.

Oct 3, 2018
Loading thumbnail…

Tax revenue over time plot

This scatter plot displays U.S. government tax revenue as a percentage of GDP from 1800 to 2011, using data from the IMF. Points are colored by artist category, with a clickable color legend to highlight individual series. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for axes and coloring, rendered as SVG circles. The legend and plot are modularized using reusable functions, and interactivity dims non-selected points.

Oct 2, 2018
Loading thumbnail…

GDP Variation over time plot-2

This scatter plot shows GDP variation over time, with each circle representing a country-year observation. The color of each point corresponds to the year, using an ordinal color scale with a diverging RdYlBu color scheme. The visualization includes an interactive color legend that filters points by year through click events. Built with D3 v5, the example uses `d3.scaleOrdinal`, `d3.schemeRdYlBu`, and custom modules for the scatter plot and legend, rendering as SVG with data loaded from a CSV file.

Oct 2, 2018
Loading thumbnail…

Tax revenue over time plot

This scatter plot shows London roadside PM2.5 and PM10 particulate concentrations from a CSV dataset, with each point colored by the year. A color legend lets users filter by year, dimming non-selected points. The visualization uses D3 v5's `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and the `schemeRdYlBu` color scheme to map data to the SVG canvas, rendering circles with `csv`-loaded data.

Oct 2, 2018
Loading thumbnail…

GDP Variation over time plot-2

This example displays GDP variation over time as a scatter plot, with each circle colored by year and an interactive legend that filters and highlights selected time periods. The visualization loads CSV data from an external URL and renders SVG elements using d3.v5, employing scaleOrdinal with schemeRdYlBu for categorical colors, axisBottom and axisLeft for axes, and a custom colorLegend module that responds to click events to toggle opacity and highlight datapoints. The scatterPlot component uses d3.scaleLinear for positioning, with grid lines and labels provided by d3 axes.

Oct 2, 2018
Loading thumbnail…

Color and Size Legends

This example demonstrates reusable legend components for both categorical color scales and quantitative size scales. It renders four fruit categories (apple, lemon, lime, orange) using a d3.scaleOrdinal with distinct colors, alongside a d3.scaleSqrt size legend with five ticks. Both legends are built with SVG groups, circles, and text elements, using d3 selections and the .call() method to invoke the custom colorLegend and sizeLegend functions. The size legend filters out zero values and reverses tick order for visual clarity.

Oct 2, 2018
Loading thumbnail…

GDP Variation over time plot

This visualization uses a scatter plot to show GDP variation over time for the US and Germany, with each circle representing a year’s GDP value. The chart includes labeled axes for Year and GDP, along with a title, and uses a linear scale for both dimensions. The code relies on d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.extent to render the SVG elements, while data is loaded asynchronously from a CSV file using d3.csv. Gridlines are drawn via tick sizes, and circles are styled with green fill and black strokes.

Oct 2, 2018
Loading thumbnail…

GDP Distribution US and Germany

This scatterplot shows the distribution of government revenue as a percentage of GDP over time for the United States and Germany, with each circle representing a year. The chart uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines and labels, and an interactive d3 color legend that filters which country's data points are highlighted. Data is loaded from a remote CSV file via d3.csv, and the visualization is rendered as SVG elements with circles positioned by scaled year and GDP values.

Oct 2, 2018
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

Oct 2, 2018
Loading thumbnail…

Color and size legends - test

This example demonstrates a static SVG visualization of fruit types in a bowl, using both color and size to distinguish between apples and lemons. It renders fruit as circles with radius and fill color determined by category, alongside text labels for each fruit. The code uses d3.scaleOrdinal for both color and radius scales, and builds the scene through d3 selection and merging operations in the `fruitBowl` function.

Sep 30, 2018
Loading thumbnail…

TRy 1

This visualization shows a world map rendered as SVG paths, with each country filled in light green and outlined in black against a blue sphere background. It uses d3.geoNaturalEarth1 projection and d3.geoPath to draw the geographic features, loading TopoJSON data from the world-atlas dataset. Countries are clickable, though the click handler currently only stores the selected country ID without triggering any visual update.

Sep 26, 2018
Loading thumbnail…

Map Interaction Assignment

This example displays a world map using an equirectangular projection, with countries colored in a uniform gray-blue tone. The visualization shows country names, continents, and economic classifications as tooltips when hovering over each nation. Built with D3 v5 and TopoJSON, it loads geographic data from the world-atlas package and renders countries as SVG paths using d3.geoPath. A d3.zoom behavior enables panning and zooming of the map, while the sphere background is drawn as a distinct path element.

Sep 26, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a zoomable, pannable world map projection using D3.js, where countries are rendered as SVG paths and labeled on demand. The visualization loads geographic data and applies a custom equirectangular projection with a northern center, then uses D3’s `d3.zoom` and `d3.event.transform` to enable smooth scaling and panning interactions. Country highlighting and label backgrounds are styled via CSS classes such as `.country-on` and `.countryLabelBg`, while the map initially hides all labels until zooming or selection occurs.

Sep 26, 2018
Loading thumbnail…

Map Interaction Assignment

This visualization displays a world map using a natural Earth projection, with countries shaded in light green and oceans in blue. Clicking a country triggers an interaction where the selected country turns red, highlighting the user’s choice. The map is rendered as SVG, with geographic data from the world-atlas TopoJSON dataset and country names loaded from a TSV file. The code utilizes d3.geoPath, d3.geoNaturalEarth1, and d3.zoom, along with topojson.feature to process the data.

Sep 26, 2018
Loading thumbnail…

Map Interaction Assignment

This interactive map displays world countries colored by economic status, with tooltips revealing the country name, continent, and broader economic position on hover. Users can click a country to select it, and a zoom interaction allows panning and scaling the projection. Built with D3.js, the visualization uses `d3.geoPath` and `d3.geoEquirectangular` to render geographic features from TopoJSON data, while loading country metadata from a TSV file. The map supports hover highlighting and a separate CSS class for selected countries.

Sep 26, 2018
Loading thumbnail…

Map Interaction Assignment

This map displays the countries of the world, color-coded by continent, and shows each country's name, continent, and broader economic position in a tooltip on hover. It uses a natural Earth projection via `geoNaturalEarth1` and renders geographic paths with `geoPath`, while `topojson.feature` converts the TopoJSON source into renderable features. Users can pan and zoom the map, with the interaction handled by the `zoom` API, which applies a transform to the entire group of country paths. Hovering highlights a country by filling it yellow.

Sep 25, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map where countries are rendered in light green and turn red on hover, while a blue sphere outlines the globe. It demonstrates cheap interaction tricks using a zoom tool and simple CSS hover effects. The visualization relies on D3 v5 and the TopoJSON library to load and project geographic data from the world-atlas package, using a equirectangular projection and SVG paths for rendering. A title element displays the country name on hover, sourced from a TSV metadata file.

Sep 25, 2018
Loading thumbnail…

Map Interaction Assignment

This example displays a world map with countries colored light green, where hovering highlights a country in yellow and reveals a tooltip with its name, continent, and economic status. Users can pan and zoom the map through mouse interactions. The visualization uses D3 v5’s `geoEquirectangularRaw` projection, `geoPath`, and `zoom` behavior, with TopoJSON and TSV data from the world-atlas package to render SVG paths and join country metadata.

Sep 25, 2018
Loading thumbnail…

Tricks for Interaction

This visualization displays a world map with countries colored light green on a blue sphere, using D3 v5 and topojson. It shows geographic boundaries and continent information from the World Atlas dataset. The map supports zooming and panning through D3’s zoom and event APIs. Hovering a country triggers a CSS hover effect turning it red and displaying a tooltip with the country name and continent, built using d3.geoPath and d3.geoNaturalEarth1 projections.

Sep 25, 2018
Loading thumbnail…

Map Interaction Assignment

This example shows an interactive world map where each country is rendered as a filled path, and hovering over a country turns it red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from TopoJSON data in the world-atlas package. Zoom and pan interactions are implemented using `d3.zoom`, which applies a transform to the map group. Country names are matched from ISO codes in a TSV file and displayed as tooltips using SVG `<title>` elements.

Sep 25, 2018
Loading thumbnail…

Map Interaction Assignment

This interactive map visualizes global country boundaries using a natural Earth projection, rendered as SVG paths within a zoomable viewport. The map shows the sphere as a blue background and individual countries in green, which turn red on hover, with country names displayed as tooltips. Built with D3 v5, the example uses `d3.geoNaturalEarth1`, `d3.geoPath`, and the `topojson` library’s `feature` function to process world atlas data loaded from TSV and JSON files. A zoom interaction, implemented via D3’s `zoom` event, transforms the map group, allowing users to explore the geographic data.

Sep 25, 2018
Loading thumbnail…

Map Testing Assignment

This interactive map displays world countries with hover-highlighting, static labels, and click-to-zoom functionality. Using D3 v5 and TopoJSON, it renders GeoJSON features as SVG paths via `d3.geoPath` with an equirectangular projection. Users can pan and zoom via `d3.zoom`, while clicking a country triggers a custom `boxZoom` function that transitions to the country’s bounding box. Country names are positioned with `path.centroid` and styled with background rectangles. Zoom limits are dynamically set on resize, and the map employs minimal styling with CSS hover effects.

Sep 25, 2018
Loading thumbnail…

Map Interaction Assignment

This map displays global country boundaries over a blue sphere, with hover interactions highlighting each nation in red. Panning and zooming are enabled via d3.zoom, which applies transforms to the geographic group. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON with topojson.feature, and renders paths using d3.geoPath with a d3.geoNaturalEarth1 projection. Hover tooltips appear through appended SVG title elements, which draw country names from the accompanying TSV data file.

Sep 25, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a zoomable world map rendered as an SVG, with country names displayed as hover tooltips. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from the World Atlas TopoJSON and country names from its accompanying TSV file. The map supports pan and zoom through `d3.zoom`, and the code includes a commented-out `d3.behavior.zoom` variant. Country boundaries are drawn as light green paths with black strokes, while the ocean sphere is filled blue.

Sep 25, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive pan and zoom on a natural Earth projection map of world countries. Built with D3 v5, it uses `d3.zoom` to apply SVG transforms and `d3.geoPath` with `geoNaturalEarth1` for rendering. Country boundaries come from TopoJSON world-atlas data, with names matched via a TSV file and displayed as `<title>` tooltips. Hovering highlights a country in red, while the sphere background is blue.

Sep 24, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example displays a world map rendered as an SVG using a natural Earth projection, with countries colored light green on a blue sphere. Hovering over any country turns it red, and the entire map can be panned and zoomed. The visualization loads TopoJSON world data and a TSV file of country names from the world-atlas package, then creates map paths with `d3.geoPath`. Zoom interaction is handled through `d3.zoom` and event transforms, while hover styling is applied via CSS on the `.country` class, with tooltips provided by SVG `<title>` elements.

Sep 23, 2018
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles animate between a bowl arrangement and removal, with each apple and lemon rendered as an SVG circle. The d3.js code uses a shared fruitBowl function with a click handler to highlight the selected fruit with a black stroke. Transitions employ the D3 update pattern with enter, merge, and exit selections to smoothly animate radius and position changes over one-second durations. The colorScale and radiusScale ordinals map fruit types to their visual properties.

Sep 23, 2018
Loading thumbnail…

test

A short animation demonstrates the dynamic addition, removal, and modification of fruit within a bowl. Using D3 v5 and an SVG rendering, the example showcases the enter, update, and exit transitions of the visualization. The code utilizes `scaleOrdinal` for color and radius mapping, while `selection.enter`, `exit`, and `transition` manage the animated lifecycle of each fruit. The data is generated programmatically in `index.js` with timed mutations to trigger the visual state changes.

Sep 19, 2018
Loading thumbnail…

Bowl with fruits transition

Animated SVG transitions illustrate a bowl of fruits that changes over time. Apples and lemons enter, exit, and morph as the dataset updates, using D3 v5’s data join pattern with keyed `selection.data()`, `merge`, and `exit().remove()`. Circles scale from radius 5 to their target size via `transition()`, while fruit types shift colors through `scaleOrdinal`.

Sep 19, 2018
Loading thumbnail…

Bowl with fruits transition

A bowl of fruits transitions as apples are eaten and replaced with lemons, demonstrating animated data joins with D3 v5. Circles and labels enter, update, and exit with staggered transitions, using `scaleOrdinal` for color and radius mapping. The code relies on `selection.merge`, `transition.duration`, and `groups.exit().remove()` to handle dynamic changes, rendering as SVG with a 1000ms animation for radius transitions.

Sep 19, 2018
Loading thumbnail…

Bowl with fruits transition

Five apples transition in and out of a bowl shape using D3's data join, with circles scaling from a radius of 5 to their full size over one second. Three timeouts drive the changes: eating an apple, replacing one with a lemon using d3.scaleOrdinal for color and radius, and filtering out another fruit. The SVG rendering uses enter, merge, and exit selections with transition and remove methods.

Sep 19, 2018
Loading thumbnail…

Expenditure over time plot

This visualization displays United States expenditure as a percentage of GDP over time, from 1800 onward, using a smooth blue line chart. The SVG rendering employs d3.csv to load data and d3.scaleLinear for both axes, with axisBottom and axisLeft generating gridlines. d3.line with curveBasis creates the smoothed path, while d3.extent sets the domains. The chart includes clearly labeled axes for Year and Expenditure, with data sourced from a CSV file hosted on VizHub.

Sep 19, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of small blue rectangles is arranged in seven rows and three columns inside a grey rectangular frame, with one rectangle overwritten in the third row. The layout is generated programmatically using nested JavaScript loops that create SVG `rect` elements via `document.createElementNS` and append them to an SVG element with the `xmlns` namespace. Pure SVG and CSS render the shapes, with no external visualization library.

Sep 11, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of small blue rectangles is arranged in repeating rows and columns across an SVG canvas, creating a simple patterned composition. The visualization is built entirely with raw JavaScript and SVG manipulation, using `document.createElementNS` logic through a loop to generate each rectangle with fixed dimensions and fill color. The code references `svgOne` as the target SVG element and applies styles from an external CSS file, though the primary rendering relies on inline attributes set via the script. The example demonstrates basic shape generation without any data binding or interaction, serving as a static graphic recreation.

Sep 11, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of small blue rectangles is generated and drawn into an SVG canvas. The page loads an HTML document that defines a 5000 by 3000 pixel SVG element and uses a JavaScript loop to create each rectangle, setting its position, size, and fill color programmatically via the SVG namespace. The rectangles are arranged in rows and columns, creating a simple, repeating pattern. The visualization relies entirely on the SVG `rect` element and JavaScript DOM manipulation, with no external charting library, and includes a CSS stylesheet for general page styling.

Sep 11, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

Sep 11, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

This example demonstrates a simple grid of blue squares rendered inside an SVG element. The visualization begins with a single static rectangle defined in the markup, then uses the D3.js `select` and `attr` APIs to programmatically append a looping series of additional rectangles, creating a dense 50-pixel grid pattern across the canvas. The underlying data is generated algorithmically rather than sourced from a dataset. The final result is an abstract, low-level exercise in shape composition, with the SVG output styled by a minimal external CSS file.

Sep 11, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

Sep 11, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a smiley face built with D3.js, where its eyebrows move to create an animated expression. The visualization uses an SVG canvas of 960 by 500 pixels, populated through D3’s `select` and `arc` functions to draw the face’s components. HTML and CSS structure the page, while the core logic resides in `index.js`, which imports from D3 v5 and manipulates the SVG attributes directly. The animation is achieved through DOM manipulation, with the eyebrows’ positions updated dynamically, as visible in the included video walkthrough.

Sep 11, 2018
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a yellow smiley face with a black outline, two eyes, and a mouth, then animates its eyebrows upward and downward using chained `transition` calls. The SVG is constructed by selecting the root element, setting a viewBox of 960 by 500, and translating a group to the center. The code uses D3’s `select`, `arc`, and `transition` APIs to draw circles, rectangles, and a path, with the mouth as an arc.

Sep 11, 2018
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A collection of geometric shapes and lines, arranged in a dense, grid-like composition, recreates the graphics of a Dataviz 2018 assignment. The example uses only SVG and CSS, with a single `<rect>` element duplicated in a loop and a `fill` color applied. A CSS class, `.lines`, defines stroke properties for paths, though no specific JavaScript libraries are referenced in the visible code. The embedded YouTube video suggests the work may be a video-based assignment, while the SVG rendering is scaled and positioned within an HTML page.

Sep 11, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between year and revenue for a dataset of cars, with each red, semi-transparent circle representing a data point. The code uses the D3 library (v5) to create an SVG visualization, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for gridlines and ticks, and `csv` to load data from an external file. The plot is titled "Cars: Horsepower vs. Weight," and the data originates from the UCI Machine Learning Repository's Auto MPG Data Set.

Sep 10, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects. It shows the total row and column counts, the dataset size in kilobytes, and the first ten rows as formatted JSON. The visualization uses D3 v5’s `csv` loader to fetch the data, `csvFormat` to calculate file size, and `select` to append `<pre>` elements with the summary information. A minimal black-and-green terminal aesthetic is applied via CSS.

Sep 10, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red, semi-transparent circles mark each vehicle, with axes labeled and a title displayed above the plot. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks and gridlines. SVG elements are appended and positioned via d3-selection, with data parsed into numeric values before rendering.

Sep 10, 2018
Loading thumbnail…

Revised Data Table Summary: IMF

This example displays a terminal-style summary of an IMF dataset on fiscal variables as percentages of GDP. Using d3.csv to load the data, it shows the row and column counts, file size in kilobytes, and the first ten rows as pretty-printed JSON via `JSON.stringify`. Styled with black background and green monospace text, the code relies on d3’s `select`, `csv`, and `csvFormat` functions to fetch and measure the dataset.

Sep 5, 2018
Loading thumbnail…

Data Summary: IMF

This example displays a plain-text summary of an IMF dataset covering fiscal variables for many countries, showing row and column counts alongside the data size in kilobytes and the first ten rows as JSON. It uses d3.csv to load the remote CSV file, then d3.csvFormat to calculate the file size, and d3.select to append multiple pre elements to the body. The view uses a black background with green monospaced text, styled via CSS, to present the dataset overview without any charts or interaction.

Sep 5, 2018
Loading thumbnail…

Data Table Summary: IMF

This example displays a text-based summary of an IMF fiscal dataset, showing the total row and column counts, an estimated file size in kilobytes, and the first ten rows as raw JSON. The visualization renders directly to the page using D3 v5, fetching the CSV data via `d3.csv` and processing it with `d3.csvFormat`. The black background with green monospaced text gives it a terminal-like aesthetic. The underlying data, from the IMF's paper on fiscal prudence, covers variables like government revenue, expenditure, and GDP, all expressed as percentages of GDP.

Sep 5, 2018
Loading thumbnail…

Data Table Summary: IMF

This example displays a plain-text summary of an IMF dataset of fiscal variables for a panel of countries, including revenue, expenditure, and debt as percentages of GDP. It shows the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses `d3.csv` to load the data and `d3.csvFormat` to compute its size, then appends the results to the page with D3 selections.

Sep 5, 2018
Loading thumbnail…

Data Table Summary: Lending Club

This example displays a plain-text summary of the Lending Club dataset, showing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as indented JSON. The code loads the data with `d3.csv`, formats it back to CSV using `csvFormat` to calculate its size, and renders the output by appending `<pre>` elements to the body with D3’s `select` and `append`. The styling uses a black background and green monospace text. The data covers loans issued in Q1 2018, including loan amounts, terms, home ownership, issue month, and state.

Sep 5, 2018
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the goal counts of Premier League players, sorted in descending order from Mohamed Salah’s 32 to Eden Hazard’s 12. Built with D3 v5, the example loads CSV data via `d3.csv`, selects the SVG element with `d3.select`, and renders steelblue rectangles with `rect` elements. The chart uses a fixed 960×500 SVG canvas, with text labels sized via CSS, demonstrating a straightforward mapping from tabular data to visual bars.

Sep 2, 2018
Loading thumbnail…

Making a Bar Chart

A bar chart displays the number of goals scored by Premier League players, with data from a local CSV file loaded via D3’s `csv` function. Steelblue rectangles represent each player’s goal count, with player names and values rendered as text. The visualization uses an SVG canvas, sized 960 by 500 pixels, and is built with D3 v5, selecting the SVG element and parsing the data through the `select` and `attr` methods.

Sep 2, 2018
Loading thumbnail…

Grad

A simple SVG scene presents two green circles and rectangles grouped with a black stroke, while a blue line and path connect shapes below. The static composition includes an HTML list naming Mukund, Khandelwal, and WPI. The example uses raw SVG elements within an HTML page, with basic CSS styling from a separate stylesheet, and imports D3.js’s `select` API to set text on a message div, though the included JavaScript does not affect the visible drawing.

Sep 2, 2018
Loading thumbnail…

Untitled

This example imports a small array of car objects from an ES6 module and displays the name of the first item in an HTML element. The data is parsed from a JSON string literal using `JSON.parse` and rendered as text content via `document.getElementById`. The page uses a large Ubuntu font from Google Fonts with a dark background, and the bundled output is loaded through `bundle.js`. No external visualization libraries are involved, as the focus is purely on data extraction and DOM text insertion.

Sep 2, 2018
Loading thumbnail…

Data Table Summary: Cricket

This example displays a summary of a cricket ODI dataset from Kaggle, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. It uses d3.csv to load the data and d3.csvFormat to calculate the data size, appending the results to the body with d3.select and pre elements. The black background with green monospace text presents the output in a terminal-like style.

Sep 1, 2018
Loading thumbnail…

Data Table Summary: Lending Club

This example displays a plain-text summary of a Lending Club dataset containing loans under $5000 from the first quarter of 2018. It shows the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. Using D3 v5’s `select`, `csv`, and `csvFormat` functions, the code loads `data.csv` and appends the summary to the page, styled with black background and green monospace text. The data originates from the Lending Club website.

Sep 1, 2018
Loading thumbnail…

Data Table Summary: Lending Club

This example displays a plain-text summary of loan data from the first quarter of 2018, sourced from the Lending Club website. It shows the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the body. The black background and green monospace text mimic a terminal interface, emphasizing the raw, tabular nature of the summary.

Sep 1, 2018
Loading thumbnail…

Data Table Summary: Lending Club

This example displays a plain-text summary of the Lending Club dataset, showing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as indented JSON. The code loads the data with `d3.csv`, formats it back to CSV using `csvFormat` to calculate its size, and renders the output by appending `<pre>` elements to the body with D3’s `select` and `append`. The styling uses a black background and green monospace text. The data covers loans issued in Q1 2018, including loan amounts, terms, home ownership, issue month, and state.

Sep 1, 2018
Loading thumbnail…

Data Table Summary: Lending Club

This example shows the first ten rows of Lending Club loan data for the first quarter of 2018, along with a summary of row and column counts and file size in kilobytes. The page renders the raw dataset as formatted JSON text, using `d3.csv` to load `data.csv`, `csvFormat` to calculate data size, and `select` and `append` to build `<pre>` elements. The styling uses a black background with green monospace text, echoing a terminal interface.

Sep 1, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV dataset by displaying its row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. Two `pre` elements present this text output, styled with green monospace text on a black background. The data originates from the Lending Club loan dataset, though the code uses a simpler ten-country population sample. It loads the file with `d3.csv`, computes the size via `d3.csvFormat`, and renders the output using D3 selections with `select` and `append`.

Sep 1, 2018
Loading thumbnail…

Data Table Summary

This example shows a plain-text summary of a dataset containing the 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects. The display reports the number of rows, columns, and file size in kilobytes, followed by the first ten rows of data formatted as JSON. The program uses the D3 v5 library’s `csv` selector to load the data and `csvFormat` to compute its size, then appends the results to the page’s body as three separate `pre` elements.

Sep 1, 2018
Loading thumbnail…

Data Table Summary: Credit Lending

This example summarizes a CSV dataset of the most populous countries in 2018, sourced from the United Nations World Population Prospects. It displays the total row count, column count, and file size in kilobytes, followed by a JSON-formatted preview of the first ten rows. The visualization uses d3.csv to load the data and d3.csvFormat to compute file size, rendering the summary as styled text elements in a black-and-green terminal aesthetic. Data is presented as simple text output rather than a chart.

Sep 1, 2018
Loading thumbnail…

Data Table Summary: Credit Lending

This example displays a plain-text summary of a credit lending dataset, showing the row count, column count, file size, and the first ten records as formatted JSON. It uses D3's `select`, `csv`, and `csvFormat` APIs to load and process the data, then appends the output as `<pre>` elements with a green monospace aesthetic. The data originates from the 2018 United Nations World Population Prospects, despite the title referencing credit lending.

Sep 1, 2018
Loading thumbnail…

Data Table Summary: IMF

This example displays a plain-text summary of an IMF dataset of fiscal variables for a panel of countries, including revenue, expenditure, and debt as percentages of GDP. It shows the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses `d3.csv` to load the data and `d3.csvFormat` to compute its size, then appends the results to the page with D3 selections.

Sep 1, 2018
Loading thumbnail…

Data Table Summary

This visualization displays a plain-text summary of a CSV dataset containing population and economic indicators for the most populous countries from 2018, sourced from the United Nations World Population Prospects. It reports the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses D3 v5’s `csv` loader and `csvFormat` to parse and measure the data, then appends pre-formatted text elements to the page body. Styling applies a monochrome green-on-black terminal aesthetic via external CSS.

Sep 1, 2018
Loading thumbnail…

Data Table Summary

This example displays a textual summary of a dataset of the world’s most populous countries from 2018, sourced from the United Nations. It shows the total row count, column count, file size in kilobytes, and the first ten rows as pretty-printed JSON. The code uses d3.csv, d3.csvFormat, and d3.select to load and format data, then appends text to the page via pre elements. A black background with green monospace text mimics a terminal output.

Sep 1, 2018
Loading thumbnail…

Hello VizHub!

This example displays the text “Hello VizHub!” centered on a dark background, styled with the Ubuntu font. The page is built using an HTML file that imports D3.js and renders the message by selecting a div and setting its text content with `d3.select` and `text`. The code is organized into separate ES6 modules, with the message defined in `myMessage.js` and the main logic in `index.js`. The styling is handled via an external CSS file that imports Google Fonts.

Sep 1, 2018
Loading thumbnail…

When you are excited about the long weekend but its still Wednesday!

A green, SVG-rendered smiley face with red eyes and black glasses sits against a dark frame. The character’s eyebrows animate upward, then settle back down, conveying the emotional arc of anticipating a long weekend. The code uses D3 v5 with `select`, `arc`, and chained `transition` calls to move the eyebrow group. Static shapes like circles, rectangles, and lines define the face, while the mouth is drawn with a D3 arc path generator.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

A self-contained D3.js animation builds a smiley face from SVG primitives—a yellow circle head, two eyes, rectangular eyebrows, and an arc-based smile. The face is centered using a coordinate transform, and the eyebrows bounce up and down in an infinite loop via chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with the `select` and `append` API, along with the `arc` symbol for path generation, all rendered in a 960×500 SVG viewport.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn with D3.js, composed of SVG shapes for the head, eyes, eyebrows, and mouth, with an animated eyebrow movement that raises and lowers them. The example uses D3 v5 selections to append and style elements, and `transition()` with a duration to create the eyebrow motion over time. An arc generator from D3's shape module renders the mouth path.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example shows a green background, a large yellow circle, and a simplified smiley face rendered as SVG. The face includes two circular eyes, rectangular eyebrows, and a mouth drawn as an arc using D3’s `arc` generator. The code imports `select` and `arc` from d3, appends SVG elements to a fixed 960×500 canvas, and positions them via transformations. The eyebrows are offset vertically, suggesting movement, but no animation or data is included—only static DOM manipulation.

Aug 28, 2018