Skip to main content
Log in
S

sophburke

@sophburke·88 public vizzes

Loading thumbnail…

Line Chart - from Working with Time

This line chart displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The React-based visualization renders as an SVG, using d3.scaleTime and d3.scaleLinear to map data from the Data Canvas Sense Your City dataset. A path generated with d3.line and curveNatural connects the points, while circle elements provide tooltips via the title tag. Axes are built programmatically using d3.timeFormat and custom React components for bottom and left ticks.

Dec 24, 2019
Loading thumbnail…

Sophie's Stylized Scatter Plot v.2

This example shows the relationship between video views and final grades for HarvardX and MITx online courses during the 2013 academic year, sourced from the MITx-HarvardX Dataverse. Each circle represents a student, with position determined by d3.scaleLinear scales mapping video-play counts to the x-axis and grades to the y-axis. The React components render SVG axes and marks, using d3-format’s `.2s` tick formatting to abbreviate large view counts. Loading states display a large "Loading..." text while the data is fetched via d3.tsv from a remote CSV URL.

Dec 24, 2019
Loading thumbnail…

Final Project - Video Analytics, EdX, 2013

This scatterplot dashboard explores relationships among learner activity metrics—active days, video plays, forum posts, and grade—from the 2013 HarvardX and MITx EdX dataset. Two dropdown menus allow users to select which metrics appear on the x- and y-axes. A categorical color scale encodes gender, and point tooltips show the exact metric values. The visualization is built with React, rendering SVG marks and axes via D3 v5. Data loads from a CSV hosted on GitHub through D3’s `tsv` request.

Oct 30, 2019
Loading thumbnail…

EdX Viewer Data by Course with Stacked Bars, AY2013

This example uses stacked bars to show the total number of video plays per course on EdX for the 2013 academic year, with each bar segment colored by the view counts’ country of origin, revealing the geographic distribution of engagement for each course. The visualization is built with the vega-lite-api, which registers Vega and Vega-Lite, and it loads CSV data from a GitHub-hosted dataset derived from the MITx-HarvardX Dataverse. The chart sums the ‘nplay_video’ field across courses, sorts courses by total views, and applies a sinebow color scheme to the country categories, with a custom config adjusting axis and label styling.

Oct 30, 2019
Loading thumbnail…

EdX Viewer Data by Course, AY2013, AY2013

This visualization displays the total number of video views per viewer, aggregated by course, for HarvardX and MITx courses in the 2013 academic year from the MITx-HarvardX Dataverse. It uses a stacked bar chart with a sinebow color scheme, where each bar segment represents a distinct course. The Vega-Lite API, built on D3, renders the chart in SVG, with axis and label styling customized in a separate config file. Data is loaded asynchronously via D3’s `csv` method from a GitHub-hosted dataset.

Oct 30, 2019
Loading thumbnail…

EdX Viewer Data by Course and Country, AY2013

This stacked bar chart shows the total number of EdX video views for each country during AY2013, with each bar segment color-coded by course. The visualization uses the vega-lite-api to build a bar mark with an aggregate sum of `nplay_video` on the y-axis and country on the x-axis, sorted by total views. A sinebow color scheme distinguishes courses, and tooltips display the aggregated view counts per segment. Data is loaded from a CSV file hosted on GitHub, originally sourced from the MITx-HarvardX Dataverse, with custom axis and label styling via vega-lite configuration.

Oct 30, 2019
Loading thumbnail…

EdX Viewer Data by Course and Country, AY2013

This stacked bar chart shows total video views for HarvardX and MITx courses during the 2013 academic year, with each bar segmented by viewer country using a sinebow color scheme. The visualization uses vega-lite-api with d3.csv to load course and country data from the MITx-HarvardX Dataverse, then renders interactive tooltips via vega-tooltip. Bar height encodes summed video views per course, sorted descending, while the configuration adjusts axis styling and label font sizes for readability.

Oct 30, 2019
Loading thumbnail…

Dropdown attempts - EdX Viewing Patterns by Country, 2013

This map visualizes geographic patterns in EdX video views for the 2013 academic year, with circles sized by total views per country on a Mercator projection. The visualization includes a dropdown menu to filter countries, though the filtering logic is incomplete. The React application uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and loads world geography from World Atlas TopoJSON while view data comes from a CSV of Harvardx/MITx course records.

Oct 30, 2019
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. Each circle is colored by species using a d3.scaleOrdinal color scale with distinct hues. The visualization is built with React and D3 v5, using d3.scaleLinear for axes and SVG for rendering. Hovering reveals tooltips via native SVG `<title>` elements.

Oct 29, 2019
Loading thumbnail…

Jim's Help - EdX Viewing Patterns by Country, 2013

This map visualizes global video viewing patterns for HarvardX/MITx online courses in 2013, with circle size representing the total number of views per country. A dropdown menu filters the displayed data, though filtering by country is not yet wired to the visualization itself. The view combines a Mercator projection rendered via `d3.geoPath` from World Atlas TopoJSON with circle marks, using `d3.scaleSqrt` for radius encoding. Data comes from the HarvardX/MITx Course-Person Dataset, loaded with `d3.csv`, while the interface is built with React and the `react-dropdown` component.

Oct 29, 2019
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays U.S. metro area crime statistics, with dropdown menus letting users independently select which two attributes (e.g., violent crime, homicide, robbery, year) map to the x- and y-axes. The visualization is built with React and D3 v5, using `scaleLinear`, `extent`, `csv`, and SVG circles to render the marks. A color legend highlights specific values on hover. Data comes from a CSV file loaded via D3’s `csv` function.

Oct 29, 2019
Loading thumbnail…

H1b Petition in Different States

This interactive visualization displays the number of H-1B visa petitions by case status across different U.S. states, using a stacked bar chart where each bar represents a state and color segments indicate the case status. The chart is built with the Vega-Lite API, which registers Vega and Vega-Lite in a React environment, and uses d3.csv to load immigration data from the Office of Foreign Labor Certification. The visualization sorts states by petition count in descending order and includes tooltips for detailed values.

Oct 29, 2019
Loading thumbnail…

Stacked Franchise Revenues by Revenue Category

This stacked bar chart shows franchise revenues broken down by revenue category, with each bar representing a franchise and stacked segments colored by category. Hovering over the legend highlights the corresponding category and dims others, while a tooltip displays exact revenue values in billions. Built with D3.js version 3, it uses `d3.layout.stack` for stacking, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. The data comes from Tidy Tuesday’s July 2019 franchise revenue dataset, rendered as an SVG with animated transitions.

Oct 29, 2019
Loading thumbnail…

EdX Video Views by Country, AY2013

This stacked bar chart shows total EdX video views by country for the 2013 academic year, with color encoding distinguishing countries. The visualization uses the vega-lite-api to construct the chart, with `vl.markBar`, `vl.y().fieldQ('TotalViews')`, and `vl.x().fieldN('Countries').sort('y')` specifying bar marks and quantitative/ordinal encodings. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV originating from the MITx-HarvardX Dataverse. The chart is rendered with Vega, Vega-Lite, and Vega- Tooltip, customized through a config file that adjusts axis styles and label formatting.

Oct 28, 2019
Loading thumbnail…

EdX Video Views by Course, AY2013

A stacked bar chart shows the total number of video view events for each course, with bars segmented by certification status. The visualization uses a horizontal layout, sorting countries by view count, and employs the viridis color scheme to distinguish courses. Built with the vega-lite-api, it renders via Vega and Vega-Lite, with data fetched from a CSV using d3.csv. The code customizes axis labels and tooltips for readability.

Oct 28, 2019
Loading thumbnail…

Messin - EdX Video Views by Country, AY2013

A stacked bar chart shows total video views for each HarvardX and MITx course in the 2013 academic year, with each bar segmented by country. The visualization is built using the vega-lite-api, which registers vega and vega-lite for rendering. Data is loaded via d3.csv from a GitHub-hosted dataset derived from the MITx-HarvardX Dataverse. The chart uses summed nplay_video values per course, sorts courses by total views, and enables tooltips on hover. The dark-themed configuration customizes axis labels and title styling.

Oct 28, 2019
Loading thumbnail…

Sophie's Polished Scatter Plot with Menus

This scatter plot explores the relationship between different learning activities and outcomes for HarvardX and MITx students on edX in 2013. Interactive dropdown menus allow users to select which two attributes, such as video plays, forum posts, or grade, to compare on the x- and y-axes. Built with React and rendered as an SVG, the visualization uses D3’s scale functions for axis construction and ordinal color scaling to differentiate data points by gender. The raw data is loaded from a CSV file using D3's `tsv` parser, with marks displayed as circles and tooltips showing precise values.

Oct 26, 2019
Loading thumbnail…

Aggregated, Interactive Common Cocktail Ingredient Pairings

This visualization displays the top 20 most frequently used ingredients in cocktails, aggregated from a modified Hotaling & Co. dataset. A bar chart shows ingredient counts, while a dropdown menu filters results by base alcohol such as Gin or Rum. The React app uses d3.csv to load data, d3.nest and d3.rollup for aggregation, and d3.scaleBand and d3.scaleLinear for axes. User selections trigger filtering and re-rendering of the SVG marks.

Oct 26, 2019
Loading thumbnail…

Interactive Color Legend with EdX Viewer Data

An interactive scatterplot displays video plays versus active days for EdX users in 2013, with each circle’s color representing a course. Hovering over the ordinal color legend fades non-matching points and overlays a highlighted subset. Built with React and D3 v5 (scaleLinear, scaleOrdinal), the SVG renders axes via custom components and circles with native HTML titles for tooltips. Data originates from the MITx-HarvardX Dataverse repository.

Oct 26, 2019
Loading thumbnail…

Interactive Color Legend with EdX Viewer Data

A scatterplot shows the relationship between active days and video plays for EdX platform users, with each circle's color indicating a course. Hovering over the color legend filters the visualization to display only data points from that selected course while dimming others. The chart uses React with hooks, D3 scales via `d3.scaleLinear` and `d3.scaleOrdinal`, and SVG rendering. Data comes from a CSV of the MITx-HarvardX 2013 academic year dataset.

Oct 26, 2019
Loading thumbnail…

EdX Viewing Patterns by Country, 2013

A world map using a Mercator projection displays circles sized by total video views for HarvardX and MITx online courses in 2013. The visualization uses d3.geoPath for rendering land and graticules, while circles are positioned by longitude and latitude and scaled with d3.scaleSqrt. Hovering reveals country and view counts. A dropdown menu filters between total views and individual courses, although the filtering logic is not connected. Data comes from a CSV dataset of course-person viewer locations.

Oct 25, 2019
Loading thumbnail…

Worldwide Suicide Map with Menu

This interactive world map visualizes global suicide statistics from the World Health Organization, with a dropdown menu allowing users to select a specific year from 1979 to 2015 or view the most recent available data. Countries are represented by red circles scaled proportionally to suicide counts using d3.scaleSqrt, positioned via d3.geoNaturalEarth1 and rendered with d3.geoPath. The map displays land masses, graticules, and country borders from World Atlas TopoJSON data. Built with React and D3 v5, the visualization includes all geographic features in SVG format, with suicide rates parsed from CSV data.

Oct 25, 2019
Loading thumbnail…

Curran's version: Aggregation by Country using Excel + Dropdowns!

This interactive map uses a geoMercator projection via d3.geoPath to display global course viewership data, with circle sizes proportional to aggregated view counts per country. Users select a course category from a React dropdown menu, which filters the dataset loaded from a CSV file containing viewer locations. The visualization combines topojson-derived land boundaries with graticules and sphere outlines, while hovering over circles reveals the country name and total views through SVG title elements. The map data comes from the World Atlas topojson source.

Oct 25, 2019
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a dropdown menu for selecting a pet. The React component uses the `useState` hook and an `onSelectedValueChange` callback to manage the selected value, while the static SVG markup remains commented out and unused. The code imports React, ReactDOM, and D3 v5 from CDN, with the React app mounted to the `#root` element via `ReactDOM.render`. It shows how D3 can be paired with React for interactive state-driven interfaces, though no data visualization or dynamic rendering is currently active.

Oct 24, 2019
Loading thumbnail…

Aggregation by Country + Dropdown

This example visualizes video views from the Harvard/MITx online course dataset (academic year 2013) on a world map. A dropdown menu filters which course’s view counts are displayed as circles, with radius encoding the total views per country via `scaleSqrt`. Hovering reveals the country name and view count. The map uses a Mercator projection (`geoMercator`) with `geoPath` to render land and graticules from World Atlas TopoJSON, while the interface is built with React and the `react-dropdown` component.

Oct 24, 2019
Loading thumbnail…

Aggregation by Country + Dropdown

This visualization displays the number of video views for HarvardX/MITx online courses in 2013, with circles sized by view count on a world map. A dropdown menu filters the displayed data by course. The map uses a Mercator projection via `geoMercator` and `geoPath`, with geographic features from the World Atlas TopoJSON. View data comes from a CSV file loaded with `d3.csv`. The visualization is built with React components and D3 scales (`scaleSqrt`) for circle sizing.

Oct 24, 2019
Loading thumbnail…

React Starter

This example shows a minimal React application, displaying a basic “hello react!” message on the page. It uses React 16.9 and ReactDOM to render a simple functional component into the root DOM element, with D3 v5 loaded in the background. The visualization is static, rendered as SVG, though the active code only outputs text, while a commented-out block hints at potential SVG circles. All data and markup live inline in the JavaScript and HTML files, requiring a bundler to produce the final `bundle.js`.

Oct 24, 2019
Loading thumbnail…

Ok, what about a color legend

This example displays a Mercator projection world map using d3.geoPath and TopoJSON world-atlas data, overlaid with circles representing video views from the Harvardx/MITx online course dataset. An ordinal color scale identifies courses, and a d3.scaleSqrt sizes points by view count. The React component renders an SVG with interactive hover states: a color legend built with React elements allows filtering and fading of map circles to highlight specific courses through d3.csv-loaded data.

Oct 24, 2019
Loading thumbnail…

Sophie's version: Aggregation by Country using Excel

This example visualizes the total video views for HarvardX and MITx online courses in 2013, aggregated by country and shown as circles on a world map. Circle size encodes view count, and hovering reveals the country and number of views. The map uses a Mercator projection built with D3’s `geoMercator`, `geoPath`, and `geoGraticule`, layered with land and interior boundaries from the World Atlas TopoJSON. Data is loaded from a remote CSV via D3’s `csv` function, and the circles are positioned using the projection, with their radius scaled by `scaleSqrt` in SVG.

Oct 24, 2019
Loading thumbnail…

The version I will mess up

A world map displays the geographic distribution of MITx course views, with circles scaled by view count. A dropdown menu filters the data by course, including options for individual subjects or all courses combined. The visualization uses React with D3 v5, employing `geoNaturalEarth1` and `geoPath` for map rendering, and `scaleSqrt` for circle sizing. Data comes from a CSV file of course viewer locations, merged with World Atlas TopoJSON for country boundaries. Tooltips show country names and view counts on hover.

Oct 24, 2019
Loading thumbnail…

Worldwide Suicide Map with Menu

An interactive world map displays suicide counts by country, with a dropdown menu to switch between years from 1979 to 2015 or the most recent available figure. Circles sized by a square-root scale encode the suicide numbers, overlaid on a natural Earth projection rendered with d3.geoPath. The visualization uses React for state management, D3 for data loading and scales, and SVG for rendering, with country boundaries from World Atlas TopoJSON and suicide data from a WHO-based CSV dataset.

Oct 24, 2019
Loading thumbnail…

From Chen Ding: Aggregation by Country using Excel + Dropdowns!

This example visualizes the number of video views for HarvardX/MITx online courses in the 2013 academic year. Circles, sized by total views, are positioned on a world map according to viewer location, with a dropdown menu to filter by specific course. A tooltip reveals the country and view count for each circle. The visualization uses a Mercator projection via `geoMercator`, renders map features with `geoPath`, and calculates the circle sizing using `scaleSqrt` from D3 v5. The map data comes from the World Atlas TopoJSON, while view data is loaded from a CSV file.

Oct 24, 2019
Loading thumbnail…

Menus with React -Aggregation by Country + Dropdowns!

This interactive map visualizes video view counts for Harvardx/MITx online courses in 2013, aggregating data by country. A dropdown menu lets users filter the displayed points by individual course. The visualization uses D3’s `geoPath` with a Mercator projection to render the world map and graticule, while `scaleSqrt` sizes circles representing views. Hovering over a point reveals the country name and view count. Data is loaded from a CSV using D3’s `csv` function, and the interface is built with React state management for the dropdown selection.

Oct 24, 2019
Loading thumbnail…

Worldwide Suicide Map with Menu

A worldwide map displays suicide rates with circles sized by the number of suicides for a selected year, using a drop-down menu to choose between different years or all available data. The visualization renders a natural Earth projection with graticules and country borders using d3.geoPath, while circle radii are determined by a d3.scaleSqrt. Suicide statistics come from a CSV dataset, and country boundaries use TopoJSON from the World Atlas. The interface is built with React components, with dropdown options managed through React state.

Oct 24, 2019
Loading thumbnail…

Worldwide Suicide Map with Menu

A world map displays the geographic distribution of course viewers from MITx and HarvardX, with circles sized by total views. A dropdown menu filters the data by course, including options like Biology, Circuits1, and CS1-H. The visualization uses React for the interface and D3 v5 for map rendering, employing `geoNaturalEarth1` projection and `geoPath` to draw land and graticules. Suicide rates from the World Health Organization and country boundaries from World Atlas TopoJSON populate the visualization, with circle radius scaled using `scaleSqrt`.

Oct 24, 2019
Loading thumbnail…

Tweaking WenLei Cao's MA Safety Map

This visualization displays the global distribution of viewer engagement for MITx courses, using a Mercator-projected world map rendered with `d3.geoPath` and topojson land boundaries. Circles sized with `d3.scaleSqrt` represent total views per country, while a React dropdown filters by specific courses. The map is built with React hooks (`useState`, `useEffect`) loading CSV data containing longitude, latitude, and view counts, with tooltips detailing country-level statistics.

Oct 24, 2019
Loading thumbnail…

Sophie's version: Aggregation by Country using Excel + Dropdowns!

This example visualizes video views for HarvardX/MITx online courses in 2013, aggregated by country on a world map. Circles sized by `d3.scaleSqrt` represent total views per location, with a dropdown menu to filter by individual course. Data is loaded via `d3.csv` from a gist, while geographic boundaries come from World Atlas TopoJSON. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath`, with graticules and land masses rendered as SVG paths, and tooltips show course and view counts.

Oct 24, 2019
Loading thumbnail…

Massachusetts safe town/city selector by county and community

This interactive map of Massachusetts filters crime data by community type and county, highlighting the five safest towns or cities with the lowest crime rates. Built with React and D3 v5, it uses a custom `geoAlbers` projection via `d3.geoPath` to render the state's boundaries and places scaled circles at each location to show relative crime severity. The dataset, sourced from the 2016 Massachusetts crime statistics, allows users to compare municipal safety across the state.

Oct 24, 2019
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, letting users choose which flower measurements to compare on the X and Y axes. Two dropdown menus, built with React state, control the selected attributes; the chart updates the scales, axes, and labels accordingly. The visualization uses D3 v5 scales and SVG rendering through React components, with tooltips on each circle showing the formatted X value. Data is loaded asynchronously via d3.csv from a remote gist.

Oct 23, 2019
Loading thumbnail…

Sophie's version: Aggregation by Country using Map

This interactive map visualizes video views from the Harvardx/MITx Course-Person Dataset for 2013, with circles sized using a square-root scale to represent view counts per location. Built with React and D3 v5, it uses d3.geoMercator and d3.geoPath to render world map boundaries from World Atlas Topojson, while data points are positioned by longitude and latitude. Hovering over a circle reveals the aggregated view count and country name.

Oct 23, 2019
Loading thumbnail…

Aggregation by Country using Map

This example visualizes the geographic distribution of video views for Harvardx and MITx online courses in 2013. Circles positioned using a Mercator projection show total views per location, with a tooltip revealing the country name and view count. The visualization combines React for component rendering with D3’s `geoMercator`, `geoPath`, and `scaleSqrt` for sizing. It overlays aggregated view data from a CSV dataset onto land and graticule shapes generated from TopoJSON world atlas data.

Oct 23, 2019
Loading thumbnail…

EdX Viewership 2013: Aggregating in App! back to normal, 10:23

A Mercator map of the world shows the geographic distribution of video views in the HarvardX/MITx online courses for 2013. Circles sized with `d3.scaleSqrt` mark the number of video plays at each recorded latitude and longitude, with hover tooltips revealing the specific country and view count. The visualization uses `d3.geoPath` to render land and graticules from World Atlas TopoJSON, while React manages the component state. The dataset is loaded from a CSV file via `d3.csv`, with each point’s radius proportional to its view total.

Oct 22, 2019
Loading thumbnail…

EdX Viewership 2013: Aggregating in App!

This visualization maps EdX video viewership for HarvardX and MITx online courses in 2013, plotting circles sized by total video plays per country on a Mercator-projected world map. The circles, generated with d3.scaleSqrt and rendered as SVG paths via d3.geoPath, sit atop land and graticule layers from the World Atlas TopoJSON. Hovering reveals the country name and view count. The React app loads CSV data with d3.csv and aggregates counts by country using d3.bin and d3.sum.

Oct 22, 2019
Loading thumbnail…

EdX Viewership 2013: Adding Dropdowns

This example maps the geographic distribution of video views in HarvardX/MITx online courses from 2013. Circles sized by view count are projected onto a world map using `d3.geoMercator` and `d3.geoPath`, with graticules and country interiors drawn from World Atlas TopoJSON. The visualization includes dropdown menus to filter data by course and institution, though filtering logic and tooltips are not yet implemented. Data comes from a CSV file loaded via `d3.csv`, and the React component structure uses hooks like `useState` and `useEffect` alongside d3 scales for sizing.

Oct 21, 2019
Loading thumbnail…

Sized Points on a Map using videoData!

This example displays a world map with semi-transparent circles sized to represent video views, using data from a CSV of course participants. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders geographic features with `geoPath` and `geoGraticule`, while the circles use `scaleSqrt` mapped to the `nplay_video` field. Country boundaries come from World Atlas TopoJSON, and the React-based component structure leverages the `useWorldAtlas` and `useDataViews` hooks to load and parse the data.

Oct 19, 2019
Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Oct 19, 2019
Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event where the reported date is plotted against the total number of dead and missing. The visualization uses D3 version 5 for scales and formatting, specifically `scaleTime`, `scaleLinear`, `extent`, and `timeFormat`, while rendering as an SVG within a React application. Data is loaded via D3’s `csv` function from a GitHub-hosted CSV file. The circles, axes, and tick marks are all generated using React components, with tooltips showing the formatted date using `timeFormat`.

Oct 18, 2019
Loading thumbnail…

Missing Migrants Date Histogram

This visualization displays the monthly total of dead and missing migrants as a date histogram, using data from the Missing Migrants Dataset. It shows a bar chart where each bar represents the sum of casualties for a given month, with the x-axis mapping time and the y-axis representing the count. The implementation uses React with D3 v5, leveraging `d3.bin` to group data into monthly buckets, `d3.sum` to aggregate counts, and `d3.scaleTime` and `d3.scaleLinear` for axis scaling. The chart is rendered as an SVG, with axes generated via custom `AxisBottom` and `AxisLeft` components and data bars drawn as rectangles.

Oct 18, 2019
Loading thumbnail…

Massachusetts safe town/city selector by county and community

This interactive visualization helps users identify the five safest towns or cities in Massachusetts by filtering crime data through dropdown menus for community type and county. The map displays crime rates as scaled circles overlaid on geographic boundaries, with hover tooltips showing city name, county, and crime percentage. Built with React and D3 v5, it uses `geoAlbers` projection with `geoPath` for map rendering, `scaleSqrt` for circle sizing, and loads data from Massachusetts crime statistics and TopoJSON geographic files.

Oct 16, 2019
Loading thumbnail…

EdX Viewership Map, 2013

A world map displays the geographic distribution of video views in HarvardX and MITx online courses for 2013. Each circle’s radius encodes the total number of views at its location, with a tooltip revealing the exact country and view count on hover. The visualization uses a Mercator projection through `d3.geoPath` and `d3.geoMercator`, rendering land and graticules from the world-atlas TopoJSON. Data points, loaded via `d3.csv` from a GitHub Gist, use `d3.scaleSqrt` to map view counts to radius, all drawn as SVG marks within a React component.

Oct 16, 2019
Loading thumbnail…

World Happiness Scores by Population

This visualization maps world happiness scores by population, with each country represented by a circle whose area is proportional to its population and whose color encodes its happiness score. Hovering reveals the country name and score, while clicking and pan/zoom allows closer inspection. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, d3.scaleSequential with interpolateInferno for color, and d3.zoom for interaction. Data comes from the World Happiness Report, processed from CSV and TopoJSON sources.

Oct 15, 2019
Loading thumbnail…

Points on a Map

A world map displays over 50,000 cities as translucent teal dots, with country boundaries and graticules rendered in soft gray. The visualization uses React to manage component state and D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic coordinates into SVG paths. City locations are projected from latitude and longitude into screen positions, while the world atlas TopoJSON is processed with `feature` and `mesh` for land and interior borders. Data comes from a Simplemaps CSV containing city populations.

Oct 15, 2019
Loading thumbnail…

Circles on a Map

This example visualizes global population by country, with circle area encoding 2018 population values on a natural Earth projection. Users can pan and zoom the map, and hovering over countries reveals more details via tooltips. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for proportional circle sizing, and d3.zoom for interactive navigation. Data comes from a CSV file joined with TopoJSON world geometry, while d3.scaleOrdinal and size legends explain the visual encoding.

Oct 15, 2019
Loading thumbnail…

Sophie's Let's make a map with D3.js!

This example shows a world map rendered with a natural Earth projection, where each country is filled in light green and outlined with a faint black stroke against a blue ocean sphere. It uses D3 v5 and TopoJSON to load world-atlas data and convert it into GeoJSON features for drawing. The map is rendered as SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`, with the sphere backdrop drawn first and country boundaries appended dynamically after the data loads.

Oct 10, 2019
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset displays sepal width against petal length, with points colored by species. An interactive color legend on the right filters the visualization: hovering over a species name highlights matching points while dimming all others to 20% opacity. Built with React and D3 v5, the example uses `scaleLinear` and `scaleOrdinal`, SVG circles, and `onMouseEnter`/`onMouseOut` events to drive the hover state. The data loads via `d3.csv` from a gist.

Oct 9, 2019
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, with point size scaled by population using a square-root scale. The map renders SVG paths via `d3.geoPath` with a natural Earth projection, including graticules, land masses, and country interiors from TopoJSON world-atlas data. City coordinates are projected from latitude and longitude, with React components managing the visualization and D3 modules handling data loading and scales.

Oct 9, 2019
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with each of the three iris species represented by a distinct color. The visualization uses D3.js scaling functions (`d3.scaleLinear`, `d3.scaleOrdinal`) within a React framework, rendering circles as SVG marks. A color legend provides species identification, with axes and labels formatted and styled through custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`).

Oct 7, 2019
Loading thumbnail…

Sophie's Polished Scatter Plot with Menus

A scatter plot shows the relationship between various academic activity metrics—such as active days, video plays, and forum posts—from HarvardX and MITx course participants in 2013. Two dropdown menus allow users to select which attributes appear on the x- and y-axes. The visualization is built with React and uses D3’s `scaleLinear`, `extent`, and `scaleOrdinal` for axis and color scales, rendering as SVG with custom `Marks` components and tick-axis helpers. Gender is encoded via a two-color ordinal scale. Data comes from the MITx-HarvardX Dataverse.

Oct 3, 2019
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying measurements such as petal length and sepal width as circles in an SVG rendered with React and D3 v5. Two dropdown menus let users select which attribute to plot on the x- and y-axes, with axis labels updating accordingly. The code uses D3’s `scaleLinear` and `extent` for scaling, and custom React components render the axes and marks, with tooltips provided by SVG `<title>` elements.

Oct 1, 2019
Loading thumbnail…

Polished Scatter Plot with Menus and Color

Interactive scatter plot of the MITx/HarvardX course dataset (a CSV loaded via `d3.tsv`) lets users select X and Y axes from dropdown menus built with `react-dropdown`. Each circle is colored by gender using a `d3.scaleOrdinal` with a three-color range. Axes are drawn with custom React components, and the chart state updates through React hooks like `useState` and `useEffect`, with SVG rendering.

Oct 1, 2019
Loading thumbnail…

Menus with React

This example shows a React-based menu system for selecting a pet from a dropdown list, displaying the chosen value in the browser console. The interface renders a label and a `<select>` element using the `Dropdown` component, which maps over an array of pet options and updates state via `onSelectedValueChange`. React hooks, specifically `useState`, manage the selected value, while ReactDOM renders the app into a div with the id `root`. The code imports the `Dropdown` component from a separate file and uses production builds of React and ReactDOM from unpkg.

Sep 30, 2019
Loading thumbnail…

React starter

This example shows a minimal React application that renders the text “Hello React!” on a blank page. It demonstrates how to integrate D3 with React by loading both libraries via script tags, then using ReactDOM to mount a functional component into the `#root` element. The code uses React’s `createElement` pattern through JSX, while D3 is available globally but not yet invoked, highlighting a basic setup for combining the two frameworks.

Sep 30, 2019
Loading thumbnail…

Sophie's Stylized Scatter Plot v.3

This scatter plot visualizes video views versus grades for HarvardX and MITx courses on EdX during the 2013 academic year. Each circle represents a course participant, with position encoding the number of video plays and final grade. The visualization uses React to render SVG elements, with D3 scales (scaleLinear) handling the x and y axes. Data loads asynchronously from a CSV file via d3.tsv, while axis components and marks are built using React components in the code.

Sep 25, 2019
Loading thumbnail…

Curran's Stylized Scatter Plot

This example visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis in a stylized scatter plot. A React component loads the CSV data with `d3.csv` and uses `d3.scaleLinear` to compute scales. Axes and circle marks are rendered as SVG elements with separate components, while CSS styles the ticks, labels, and marks with the Poppins font. Native SVG `title` elements provide hover tooltips.

Sep 25, 2019
Loading thumbnail…

NACRO Membership by Institution

This map shows the geographic distribution of NACRO (National Association of Collegiate Research Administrators) membership across US institutions, with circle size encoding the number of members per school. Built with Vega-Lite and D3.js, it layers institution points over a US state map using the Albers projection. Data comes from the NACRO Member Geography dataset, which was joined with geographic coordinates from the College Scorecard Dataset. The visualization uses `vl.markCircle` for the points and `vl.markGeoshape` for the state boundaries, with tooltips revealing institution names.

Sep 25, 2019
Loading thumbnail…

Sophie's Stylized Scatter Plot v.1

This scatter plot visualizes the relationship between video views and grades for HarvardX and MITx students in the 2013 academic year, using data from the MITx-HarvardX Dataverse. Built with React and D3 v5, it renders an SVG with d3.scaleLinear axes and circle marks, where hovering reveals the x-value via a native SVG `<title>` tooltip. The x-axis uses d3.format to abbreviate large view counts, and the Poppins font styles the chart.

Sep 25, 2019
Loading thumbnail…

Video Views by Country

A world map displays video views by country for MITx and HarvardX courses in 2012–2013, using land and interior boundaries from World Atlas TopoJSON. Built with React and D3 v5, it renders an SVG via d3.geoNaturalEarth1 and d3.geoPath, drawing graticules and a light gray sphere. Country polygons are filled teal, while borders and graticules use contrasting strokes.

Sep 25, 2019
Loading thumbnail…

Harvard X-MITx Viewership by Country

This example maps HarvardX-MITx course viewership by country for AY2013. A geoMercator projection with d3.geoPath renders the world map from World Atlas TopoJSON, while overlaid circles mark viewer locations using linear scales derived from the dataset. The visualization uses React to manage state and render SVG elements, with d3.json and d3.tsv loading the map topology and viewership data. Graticules, landmasses, and interiors are styled separately to distinguish geographic features from data points.

Sep 24, 2019
Loading thumbnail…

Making a Bar Chart with React & D3 - no Axes

This example displays a bar chart of population data from the UN World Population Prospects 2019, with bars rendered without axes. It uses React’s `useState` and `useEffect` to load a CSV via `d3.tsv`, then maps each country to a `rect` element whose height is set by `d3.scaleBand` and width by `d3.scaleLinear`. The SVG output is produced through ReactDOM, with D3 v5 handling scaled dimensions.

Sep 24, 2019
Loading thumbnail…

Viewing Data with React & D3

A bar chart displays the number of video plays per course from a 10,000-person MITx dataset, sourced via CSV from a GitHub gist. Loaded into React with `useState` and `useEffect`, the data drives a D3 SVG visualization using `scaleBand` for courses on the y-axis and `scaleLinear` for the x-axis, rendering axis ticks and rectangles without axes.

Sep 24, 2019
Loading thumbnail…

Trying to Use D3 with Viewing Data

This example builds a horizontal bar chart of country populations using React to render SVG elements, with D3 scales for layout. The chart displays population values from the United Nations World Population Prospects 2019 dataset, formatted in billions with a custom tick label function. D3’s `scaleBand` positions the categorical country labels on the y-axis, while `scaleLinear` maps population counts to bar widths on the x-axis. A loading state appears before data arrives, and basic tooltips show exact values on hover through the SVG `<title>` element.

Sep 24, 2019
Loading thumbnail…

A D3 chart

This example uses the vega-lite-api to construct a visualization and demonstrates the aggregation data transformation. The rendered chart is a simple SVG bar chart built with D3 v4, displaying four bars with values from the `ratData` array. The chart uses the aggregation transformation to summarize the underlying data before rendering. The visualization is embedded directly in an HTML page with inline JavaScript and SVG elements, showing how vega-lite-api can be combined with framework-level D3 code.

Sep 24, 2019
Loading thumbnail…

Harvard/MitX Video Views

This chart aggregates total video views per course from a Harvard/MITx person-course dataset, using color to encode engagement categories and sorting courses by descending view counts. Built with the vega-lite-api, it declares a bar mark with quantitative x-axis sums and categorical y-axis fields, then renders through Vega-Lite’s SVG renderer. The visualization loads data via d3.tsv and applies custom axis styling from a config object.

Sep 24, 2019
Loading thumbnail…

Harvard/MitX Video Views

This stacked bar chart visualizes video-view events across HarvardX and MITx courses on EdX for the 2013 academic year, with each bar segmented by three levels of student engagement, from courseware access to certificate achievement. The visualization uses the Vega-Lite API, with vega-lite’s mark-bar encoding x by course, y by summed video plays, and color by engagement level. Data is loaded asynchronously via d3’s tsv method from a CSV hosted on GitHub, and the rendered SVG is customized using a config object for axis styling.

Sep 24, 2019
Loading thumbnail…

World Map First Pass

This example displays a world map with country boundaries and graticules, rendered as an SVG using React and D3 v5. It uses the `geoNaturalEarth1` projection and `geoPath` to draw landmasses, interior borders, and a graticule grid, with the sphere outline shown in light gray. The data comes from the World Atlas TopoJSON file, processed via the `topojson` feature and mesh utilities, and styled with CSS classes for land, interiors, and graticules.

Sep 23, 2019
Loading thumbnail…

Working with Time

This scatter plot visualizes temperature readings over a week from the Data Canvas Sense Your City Dataset. Each circle represents a temperature measurement at a specific time, with a tooltip showing the day of the week. The visualization uses React for rendering SVG elements and d3.scaleTime and d3.scaleLinear for mapping timestamps and temperatures to pixel coordinates. The code employs d3.extent, d3.max, d3.timeFormat, and the csv loading function from d3-fetch to process and display the data.

Sep 23, 2019
Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3, rendering a horizontal bar chart of the ten most populous countries using UN World Population Prospects 2019 data. The SVG visualization maps each country’s 2020 population to a bar width via `d3.scaleLinear` and uses `d3.scaleBand` for the categorical y-axis, with bars grouped inside a translated `<g>` element that respects the specified margin. The React component asynchronously loads CSV data with `d3.csv`, and the chart updates only after the data is fetched, displaying a loading message beforehand.

Sep 20, 2019
Loading thumbnail…

Harvard/MitX Engagement

A pie chart visualizes engagement by counting video view events per HarvardX/MITX course from the 2013 academic year. The chart encodes course ID on the y-axis and view counts on the x-axis, with color mapping to engagement categories and tooltips showing course identifiers. Built with the vega-lite-api library on d3.v5, it loads tabular data from a CSV file hosted on GitHub, with appearance adjusted via a custom config object for axis and label styling.

Sep 20, 2019
Loading thumbnail…

Harvard/MitX Video Views

This visualization shows the number of video view events for courses from HarvardX and MITX during the 2013 academic year. It uses a bar chart with courses sorted descending by view count and color-encodes whether the course was certified. The visualization is built using the vega-lite-api library on top of vega-lite and vega, with data loaded from a TSV file via d3.tsv. The appearance is customized through a configuration object that adjusts axis colors and font sizes for readability.

Sep 19, 2019
Loading thumbnail…

Loading Data with React & D3

This example shows a React component that loads a CSV file of CSS named colors using D3’s `d3.csv` utility, then displays summary statistics about the dataset within a `<pre>` element. The code relies on React hooks (`useState`, `useEffect`) to manage the asynchronous data loading and render a "Loading..." message until the data arrives. Once loaded, it uses `d3.csvFormat` to calculate the data size in kilobytes, along with row and column counts. The data comes from a gist hosted CSV file, and the interface is built with React 16.9 and D3 v5.

Sep 17, 2019
Loading thumbnail…

Rendering Data with React & D3 part 1

This example shows the first 57 CSS named colors as horizontal color swatches, each rendered as a div with a height of 4 pixels and a width of 960 pixels. The visualization uses React’s `useState` and `useEffect` hooks to asynchronously load the CSV data via `d3.csv`, displaying a "Loading..." message until the data arrives. Each row maps to a colored div using the `RGB hex value` field from the dataset, with React’s `style` prop controlling the background color. The code demonstrates a simple integration of React for DOM updates with D3 for data fetching.

Sep 17, 2019
Loading thumbnail…

Rendering Data with React & D3

This example shows a radial burst of CSS named colors, with each color rendered as a slice in a pie chart. It loads data from a CSV of CSS color names using D3’s `csv` utility, then uses React hooks (`useState`, `useEffect`) to fetch and store the data. The slices are computed with D3’s `pie` and `arc` generators, while React renders each as an SVG `<path>` filled with the corresponding hex value.

Sep 17, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It demonstrates customization of D3 axes, including removal of default domain lines, custom tick formatting with `format('.3s')`, and grid lines created via `tickSize`. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with SVG rendering. Labels for the title and axis are added as text elements.

Sep 17, 2019
Loading thumbnail…

Participants in Opiate Treatment Study

This example renders a plain-text summary of a dataset about participants in an opiate treatment study. It fetches a remote TSV file representing the study’s background table and uses `d3.tsv` to parse it, then displays the file size in kilobytes, row count, and column count inside a large `<pre>` element. The code also demonstrates alternative parsing approaches with `fetch` and `d3.csvParse`, though only the `d3.tsv` path is active. The visualization is minimal, focusing on data-loading mechanics rather than graphical representation.

Sep 13, 2019
Loading thumbnail…

The Low- to Moderate-Income (LMI) New York State (NYS) Census Population Analysis dataset

This example reads a CSV file of Low- to Moderate-Income New York State census population data from a GitHub gist and displays basic dataset statistics. Using `d3.tsv` to load the file and `d3.csvFormat` to calculate its size, the visualization reports the file’s kilobyte size, row count, and column count in large text. The code also includes commented alternatives using `fetch` with `async`/`await` and a nested promise chain, illustrating different methods for loading and parsing tabular data in D3 v5. The source dataset comes from the NYS open data portal.

Sep 10, 2019
Loading thumbnail…

HarvardX, MITX 2013-2014 Users

This visualization displays basic metadata about an anonymized dataset of 500 users from HarvardX and MITx courses on the EdX platform during the 2013–2014 academic year. It shows the file size in kilobytes, the number of rows, and the number of columns from a CSV file loaded via d3.csv. The code uses the d3.csv and d3.csvFormat APIs from D3 v5 to parse and measure the data, then displays the results in a large preformatted text element.

Sep 6, 2019
Loading thumbnail…

Smiley face pt1

This example renders a simple cartoon smiley face using React and D3 within an SVG container. The face consists of a yellow circle head, two green eyes, a blue hair-like rectangle, and a mouth drawn as an arc. The code uses D3’s `arc` generator to create the mouth path, with positions calculated from center coordinates and offsets. All shapes are positioned via a central `<g>` transform, relying on React for component structure and D3 v5 for geometric calculations.

Sep 4, 2019
Loading thumbnail…

Smiley face pt1

A simple yellow smiley face is drawn with three SVG circles, one large circle for the head and two smaller circles for the eyes, all rendered inside an SVG canvas. The example uses plain React 16.9 loaded from a CDN, though the code itself directly manipulates SVG elements with standard attributes like `cx`, `cy`, and `r` rather than relying on a charting library. The face lacks a mouth and other features, serving as a first step toward a complete facial visualization.

Sep 3, 2019