M

MTClass

@MTClass·117 public vizzes

Loading thumbnail…

Gist 9b046ace330f16e0c7dfd93c5e979e10

This example shows a numeric comparison game where the user inputs an integer, and the script prints whether it is less than, greater than, or equal to the fixed value 10. It then demonstrates a loop that either adds or subtracts based on the input’s relationship to 10. The code uses Python’s `raw_input` for interactive console input, a `while` loop with a `try`/`except` block to handle invalid entries, and `range()` with `print` statements to output series of numbers. The logic is entirely text-based, with no visualization or graphical rendering libraries involved.

Loading thumbnail…

Gist b3f71219523700ec540c3470631f24c2

This example demonstrates a simple interactive number-guessing game in Python, comparing user input against a fixed value of 10 and printing relational outcomes. The code uses `raw_input` to read an integer, `try`/`except ValueError` to handle invalid input, and conditional branches with `if`, `elif`, and `else` to test equality and inequality. It also includes loops using `range` to print arithmetic sequences based on the comparison results. No external visualization libraries are used; the program relies solely on standard Python console I/O and control flow.

Loading thumbnail…

MD Counties 4

An interactive choropleth map of Maryland counties displays population density using a sequential color scale, with hover effects revealing county details. A donut chart in the corner dynamically updates to show population, land area, and density proportions for the selected county. Built with D3 v4, the visualization uses `d3.geoConicConformal` for projection, `d3.geoPath` for rendering shapes, and `d3.pie`/`d3.arc` for the chart. Population data is sourced from JSON files, while county boundaries come from TopoJSON.

Loading thumbnail…

Final Project Map

This interactive map visualizes population density across Maryland census tracts and counties, with a draggable circle marker highlighting Rockville. Using D3 v4 and TopoJSON, the code employs a conic conformal projection (`d3.geoConicConformal`) and `d3.geoPath` to render tract boundaries colored via `d3.scaleThreshold` and the `d3.schemeOrRd` color scheme. County outlines are merged from tract geometries, while mouse position is converted to geographic coordinates using `projection.invert`. The map includes a tooltip div and an info readout for cursor location.

Loading thumbnail…

MD Counties

A choropleth map of Maryland counties colors each county by population density using a threshold scale and the d3.schemeOrRd color scheme, with county boundaries derived from a TopoJSON file. Hovering over a county highlights it with a thicker stroke, displays its name, population, land area, and density in an info box, and renders a small pie chart using d3.pie and d3.arc showing the county's population, land area, and density. The map uses a d3.geoConicConformal projection, along with topojson-client to parse geographic data and d3-scale-chromatic for colors.

Loading thumbnail…

NY Counties 4

A choropleth map of New York State counties shows population density using a threshold scale with a sequential color scheme. Hovering over a county displays a small pie chart breaking down population, land area, and density, alongside detailed statistics in an overlay. Built with D3 v4, the visualization uses `d3.geoPath` and a Transverse Mercator projection to render GeoJSON from a TopoJSON source, with `d3.scaleThreshold` and `d3.schemeOrRd` for the color encoding. A blurred drop-shadow effect is applied via SVG filters.

Loading thumbnail…

California Earthquakes

This visualization maps California earthquakes from the USGS live GeoJSON feed onto a state map. Red dots mark earthquake epicenters, sized by magnitude, with hover interactions showing details in a corner panel. The map uses a conic conformal projection for California state plane coordinates, rendered with D3 v4 and default SVG paths via the `d3.geoPath` API. County and state boundaries come from a TopoJSON source, processed using the TopoJSON client library, while the earthquake layer is drawn after the map is projected.

Loading thumbnail…

NY Counties

This example visualizes earthquake epicenters overlaid on California county boundaries. Red points mark quake locations; a tooltip shows each event's magnitude and place name, while a yellow highlight appears on hover. The visualization uses a conic conformal projection and plots California counties from a TopoJSON file, with earthquake data pulled from the USGS GeoJSON feed. The code employs d3.geoPath for map rendering, d3.json for loading both datasets, and mouseover/mouseout events for interactivity.

Loading thumbnail…

NY Counties

This visualization displays California counties using a conic conformal projection, with population data shown interactively on mouseover. The map initially outlines the entire United States, then focuses on California counties filled in white. The example uses d3.geoConicConformal for projection, d3.geoPath for rendering, and topojson-client to process county boundaries from a GitHub-hosted TopoJSON file. Population values come from a separate JSON dataset matched by FIPS code, displayed with d3.format. Hovering highlights counties in yellow and shows the county name with its population.

Loading thumbnail…

California Counties

This example visualizes California counties with a map rendered using SVG and the D3.js v4 library. It loads county boundaries from a TopoJSON file and an earthquake feed from USGS, though only the county boundaries are drawn. The map uses a conic conformal projection via `d3.geoConicConformal` and `d3.geoPath`, with the projection fit to the state’s extent. Hovering over a county highlights it in crimson and displays its name and population in an overlay, using a mouseover event and the `d3.format` API.

Loading thumbnail…

LA quakes

A world map of Los Angeles and its surroundings displays earthquake epicenters as crimson paths, with the view centered on coordinates -117, 34 and zoomable via d3.zoom. The d3-tile library loads OpenStreetMap vector tiles from Mapzen, rendering roads and rails as SVG paths styled by property kind. Earthquake data comes from the USGS GeoJSON feed, plotted using d3.geoPath with a d3.geoMercator projection, and their positions update dynamically on zoom transforms.

Loading thumbnail…

Final Project Map

This choropleth map displays population density for Maryland census tracts, with county boundaries overlaid in white. A pie chart in the corner visualizes additional data, while a tooltip shows geographic coordinates as the mouse moves. The visualization uses D3 v4 with `d3.geoConicConformal` projection, `d3.geoPath`, `d3.scaleThreshold` with the `d3.schemeOrRd` color scale, and `d3.pie` for the chart. Data comes from TopoJSON tract geometries, CSV population files, and a FIPS county list loaded via `d3.queue`.

Loading thumbnail…

NY Counties

This example visualizes population density across New York counties using a choropleth map with a threshold scale and the OrRd color scheme. Hovering over a county highlights it and displays a small pie chart comparing population, land area, and density. The visualization is rendered with SVG and uses d3.geoPath with a Transverse Mercator projection, along with topojson-client to process county boundaries and d3.queue to load population data from JSON files.

Loading thumbnail…

NY Counties

A choropleth map of New York State counties colors each county by population density using a threshold scale and the d3.schemeOrRd sequential color scheme. The map uses d3.geoPath with a transverse Mercator projection, and topojson-client to convert county boundaries from TopoJSON. Hovering highlights a county and displays its name and density in a tooltip, while a legend with a power scale explains the color ranges. Data comes from a provided GeoJSON/TopoJSON and population CSV, inspired by a Mike Bostock example.

Loading thumbnail…

US Counties

This example shows a map of all US counties and state boundaries, rendered with a drop-shadow effect for visual depth. It displays the nation’s outline, state lines, and individual county borders using SVG paths. The code uses D3 v4’s `d3.geoAlbersUsa()` projection and `d3.geoPath` to draw the geography, while TopoJSON’s `topojson.feature`, `topojson.merge`, and `topojson.mesh` convert the county data from the provided JSON. A blurred filter and layered `use` elements create the shadow effect.

Loading thumbnail…

US Counties

This map of US counties displays all county boundaries with a subtle drop-shadow effect. The code uses D3 v4’s `d3.geoAlbersUsa` projection and `d3.geoPath` to render geographic features. It loads TopoJSON from a local `counties.json` file and converts it to GeoJSON via `topojson.feature` and `topojson.mesh`. The visualization plots state borders as a separate mesh, overlays white and blurred nation outlines for depth, and draws each county as an outlined SVG path with thin gray strokes.

Loading thumbnail…

US Counties

This visualization displays the boundaries of every county in the United States, along with state lines and a stylized national outline with a drop-shadow effect. The map uses an Albers equal-area conic projection via `d3.geoAlbersUsa()` and renders GeoJSON paths with `d3.geoPath()`. It employs the TopoJSON client to convert TopoJSON data from a GitHub-hosted file into features, and uses SVG elements with blur filters for the shadow.

Loading thumbnail…

Final Project Map

This map visualizes population density across Maryland’s census tracts and counties, using a color scale from d3-scale-chromatic to show density values. The map also includes a draggable yellow circle marking Rockville, MD, whose position can be moved via d3.drag. The visualization loads TopoJSON tract boundaries and a separate population JSON, merges tracts into county outlines with topojson.merge, and projects the geometry using d3.geoConicConformal with fitSize. A tooltip shows coordinates on mousemove, while the SVG rendering relies on d3.geoPath and d3.queue.

Loading thumbnail…

May 11 Maryland

This interactive map of Maryland highlights population density by census tract, with a draggable marker for Rockville and a small pie chart overlay. The map uses a conic conformal projection and color-coded tracts via a threshold scale, transitioning from light to dark oranges. Census tract boundaries are drawn, while county outlines are merged from tract geometries. The visualization is built with D3 v4, TopoJSON, and d3-scale-chromatic, and displays tooltip and pop-up information on demand.

Loading thumbnail…

Final Project Map

This choropleth map displays population density for Maryland census tracts, with counties outlined in white and Rockville marked by a yellow circle. Built with D3 v4, it uses `d3.geoConicConformal` projection, `d3.geoPath`, and TopoJSON to render tract boundaries and county merges. A `d3.scaleThreshold` with the `d3.schemeOrRd` color ramp encodes density, while a tooltip shows county names and an interactive circle supports dragging. Population data comes from a JSON file, with tract areas calculated from `ALAND` in square miles.

Loading thumbnail…

Class 5 v2

This map shows the United States with earthquakes from the USGS all-week feed marked as crimson points. A legend categorizes earthquake magnitudes into six bins, with each point’s color assigned by its magnitude. The visualization uses d3.geoAlbersUsa and d3.geoPath to project and draw state and quake paths, while a custom d3.legend plugin renders the color scale. State boundaries and quake locations are plotted via topojson.v2 and d3.json, with a mouse-tracking coordinate readout using projection.invert.

Loading thumbnail…

Class 5 v2

This map shows the United States with earthquakes from the USGS all-week feed marked as crimson points. A legend categorizes earthquake magnitudes into six bins, with each point’s color assigned by its magnitude. The visualization uses d3.geoAlbersUsa and d3.geoPath to project and draw state and quake paths, while a custom d3.legend plugin renders the color scale. State boundaries and quake locations are plotted via topojson.v2 and d3.json, with a mouse-tracking coordinate readout using projection.invert.

Loading thumbnail…

NY Counties

A map of New York counties displays population density and includes an interactive pie chart in the corner. Hovering over a county highlights it in crimson and shows its name and total population in an overlay. The visualization uses D3 v4 with `d3.geoTransverseMercator` and `d3.geoPath` to render TopoJSON county boundaries, while `d3.scaleThreshold` and `d3.schemeOrRd` color the map by density. Population data comes from a JSON file, and the pie chart is drawn with `d3.pie` and `d3.arc`.

Loading thumbnail…

NY Counties

This visualization displays New York’s counties on a map, colored white with gray borders, and highlights each county in crimson on mouseover while showing its name and population in an info box. It uses d3.geoPath with a transverse Mercator projection, d3.queue to load TopoJSON county boundaries and population data, and topojson-client to convert geometries. The map also includes a blurred drop shadow and white overlay for a layered effect, with state boundaries drawn as a mesh.

Loading thumbnail…

NY Counties

This example presents a map of New York State counties, colored white with gray borders, against a backdrop of the broader U.S. boundary with a subtle drop-shadow effect. Hovering over a county highlights it in crimson and displays its name and population in an overlay. The visualization uses D3 v4 with `d3.geoPath` and a transverse Mercator projection, loading TopoJSON county geometries and population data from a GitHub repository. The map renders as SVG, leveraging a blur filter and `topojson-client` for feature conversion and state boundary meshing.

Loading thumbnail…

Class 1

This example shows a simple horizontal bar chart built with D3.js v4. The chart maps an array of nine numeric values to bar widths using a linear scale, with each bar rendered as a green div element and labeled with its corresponding value. The code uses `d3.scaleLinear` to create the scale and `d3.select` to target the chart container, then appends divs via `enter()` and sets their width style based on the scaled data. The data is hard-coded in the script, and the chart is styled with inline CSS.

Loading thumbnail…

MD Counties Radial Stacked Bar

A radial stacked bar chart displays the population of Maryland counties partitioned by age group. Each county occupies one annular sector, with the length of each colored segment representing the population count for a specific age bracket. The chart uses D3 v4 APIs including `d3.scaleBand` for angular positioning, a custom `d3.scaleRadial` for radial scaling, `d3.arc` for path geometry, and `d3.stack` to build stacked segments. Data is loaded from a CSV file containing county-level population figures, rendered as SVG, with a legend identifying the age categories.

Loading thumbnail…

Pie Chart

This pie chart displays the racial composition of Maryland's population, sourced from ACS 2011-2015 data. The visualization uses d3.pie and d3.arc to generate and render the arcs, with d3.scaleOrdinal providing the categorical color scheme. A legend maps each race to its corresponding color, while labels show the population values. The data is loaded via d3.csv, and the chart is drawn as SVG elements within a 960x500 viewport.

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart shows population totals for each state, broken down by seven age groups, with each bar sorted by overall population and segments colored by age category. It loads data from a remote CSV file using d3.csv, then builds the visualization with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. The stacked positions are computed using d3.stack, while d3.axisBottom and d3.axisLeft render the axes. The chart includes a legend and uses an SVG rendering approach with conventional margins.

Loading thumbnail…

Bar Maryland Counties

A bar chart displays the population of Maryland’s counties, sorted by name, with hover effects turning bars brown. The chart uses an SVG rendered with D3 v4, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, which is formatted as percentages. County population data comes from a CSV file pulled from a GitHub repository, with axis labels rotated for readability. The visualization includes a title and a source note.

Loading thumbnail…

MD Counties Race Radial Chart

This radial chart visualizes the racial composition of counties in Maryland, with each county represented as a segment ring spanning 360 degrees. The height of each stacked ring segment reflects the population count for each racial category, using color-coded layers. The visualization is built with D3 v4, leveraging `d3.scaleBand` for angular positioning, `d3.scaleRadial` for radial distances, and `d3.stack` for the stacked data series. Data comes from a CSV file hosted on GitHub, and the chart includes labeled county names, radial gridlines, population ticks, and a legend.

Loading thumbnail…

Radial Stacked Bar

A radial stacked bar chart displays population distribution across U.S. counties by age bracket, arranged around a circular axis to emphasize potential cyclical patterns, though the data is not cyclical. The visualization uses D3 v4 with a custom `d3-scale-radial.js` plugin implementing a square-root scale for the radial variable, while `d3.arc()` generates the annular segments with `d3.stack()` for layered series. State labels rotate around the perimeter, and circle gridlines with tick marks indicate population totals. Data loads from a CSV file, rendered as SVG in a 960×960 viewport.

Loading thumbnail…

name counties May 6

This map of Maryland shows population density per census tract using a color scale from light to dark red, overlaid with white county boundaries and a draggable yellow circle representing Rockville. Users can drag the circle, which reveals a tooltip displaying the county name beneath the pointer. The visualization uses d3.geoPath with a conic conformal projection, d3.scaleThreshold and d3.schemeOrRd for coloring, topojson for tract boundaries, and d3.drag for the interactive circle. Population data comes from a JSON file, and county FIPS codes from a CSV.

Loading thumbnail…

May 8 test

This choropleth map of Maryland census tracts visualizes population density using a color scale based on D3’s `d3.scaleThreshold` and `d3.schemeOrRd`. Tract boundaries are drawn with `d3.geoPath` and a conic conformal projection, while county outlines are generated via `topojson.merge`. A yellow draggable circle, positioned over Rockville, uses D3’s drag behavior to update a tooltip that displays the county name under the cursor. Population data comes from a JSON file joined to tract features by FIPS codes.

Loading thumbnail…

Simple bar graph in v4

This example presents a simple bar graph built with d3.js v4, displaying county populations from a CSV file fetched via a remote URL. The chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Bars are rendered as SVG rectangles with a steelblue fill that turns brown on hover, and the data is loaded asynchronously with `d3.csv`. The layout is fixed to the viewport with margins and explicit SVG dimensions.

Loading thumbnail…

Population Bar Graph

This population bar graph displays county population data using a vertical bar chart. The chart encodes each county’s population with the height of a steelblue bar, which turns brown on hover. Built with D3 v4, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and SVG `rect` elements for the bars. The data is loaded from a remote CSV file via `d3.csv`.

Loading thumbnail…

Simple bar graph in v4

A simple bar graph displays population values for California counties, loaded from an external CSV file and rendered as SVG rectangles. The chart uses d3.scaleBand for the x-axis categories and d3.scaleLinear for the y-axis, with axes generated by d3.axisBottom and d3.axisLeft. Data is parsed via d3.csv, and bars change fill color on hover through CSS. The example demonstrates core d3 v4 data binding and SVG rendering in a fixed-width layout.

Loading thumbnail…

MD Counties Stacked Bar Chart

This stacked bar chart displays the population of each Maryland county, broken down by age group. The chart sorts counties by total population and uses a color-coded legend to distinguish seven age cohorts. Built with D3 v4, it loads CSV data from a GitHub repository and renders the visualization as SVG. The code implements d3.stack(), d3.scaleBand(), d3.scaleLinear(), and d3.scaleOrdinal() to generate the stacked bars, axes, and legend.

Loading thumbnail…

May 6

A choropleth map of Maryland census tracts colors each area by population density using a red-orange sequential scale, with white county boundary lines overlaid. A yellow draggable circle marks Rockville, and moving it updates a tooltip displaying its current location. Built with D3 v4, it uses `d3.geoConicConformal` projection, `d3.geoPath`, `d3.scaleThreshold`, `d3.schemeOrRd`, and `d3.drag` for interaction. Population and tract data are loaded as JSON files, and the SVG rendering uses a steel-blue background.

Loading thumbnail…

May 6

A choropleth map of Maryland census tracts colors each area by population density using a red-orange sequential scale, with white county boundary lines overlaid. A yellow draggable circle marks Rockville, and moving it updates a tooltip displaying its current location. Built with D3 v4, it uses `d3.geoConicConformal` projection, `d3.geoPath`, `d3.scaleThreshold`, `d3.schemeOrRd`, and `d3.drag` for interaction. Population and tract data are loaded as JSON files, and the SVG rendering uses a steel-blue background.

Loading thumbnail…

county names May 5

This example displays a choropleth map of Maryland census tracts colored by population density using a threshold scale with the d3.schemeOrRd color scheme. It uses d3.geoConicConformal projection, d3.geoPath, and topojson to render tract and county boundaries. A yellow draggable circle initially positioned at Rockville, MD, uses d3.drag to update its position and reveal the containing county name in a tooltip via d3.geoContains and projection.invert. The population data is loaded from external JSON files.

Loading thumbnail…

May 5

This visualization displays population density across Maryland census tracts using a choropleth map, with color thresholds from d3.scaleThreshold and d3.schemeOrRd. It renders SVG paths via d3.geoPath with a geoConicConformal projection, loading TopoJSON census tract boundaries and a population dataset through d3.queue. County outlines are drawn from merged geometries. A draggable yellow circle marks Rockville, repositioning via d3.drag, while hovering shows the county name in a tooltip using d3.geoContains to test point-in-polygon.

Loading thumbnail…

May 4 in class

This choropleth map of Maryland census tracts displays population density using a threshold scale with the sequential color scheme d3.schemeOrRd, with county boundaries outlined in red. It includes a draggable yellow circle representing Rockville, MD, whose movement is handled by d3.drag, and an HTML tooltip div is appended to the body. The map is rendered as SVG using d3.geoPath with a conic conformal projection, while population data comes from a separate JSON file joined to TopoJSON tracts. A color legend is built with d3.axisBottom and a power scale.

Loading thumbnail…

Anne Arundel County

This map shows the population density of census tracts in Anne Arundel County, Maryland, using a color scale from the d3-scale-chromatic library. Each tract is colored based on its calculated density, derived from population data matched by county FIPS and tract codes. The visualization uses d3.geoConicConformal for a projected map of tract boundaries rendered as SVG paths, and includes a draggable circle that can be repositioned to display the name of the tract under the cursor via a tooltip.

Loading thumbnail…

Make a map with MD Counties

This map of Maryland shows census tracts colored by population density using a threshold scale and the d3.schemeOrRd color scheme, with the boundary of Allegany County outlined. A draggable yellow circle, positioned initially at Rockville, displays a tooltip naming the tract under the cursor. Built with D3 v4, it uses d3.geoConicConformal projection, d3.geoPath for rendering, and d3.drag for interaction, loading TopoJSON tract boundaries and population data from a gist.

Loading thumbnail…

Class #13 demo

This example displays earthquake data from the USGS live feed on a map of the United States, using d3.geoPath with a d3.geoAlbersUsa projection to render state boundaries and quake locations as SVG paths. It includes a draggable circle representing Washington DC, with tooltip and mouse-move coordinate readout, plus a magnitude-based legend with counts. Colors are assigned via a d3.scaleOrdinal and d3.schemeCategory10, while the map data comes from TopoJSON.

Loading thumbnail…

Montgomery County

This choropleth map of Montgomery County, Maryland uses D3.js (v4) to display population density per square mile across census tracts. It loads GeoJSON tract boundaries and population data via d3.queue, then colors each tract using d3.scaleThreshold with a sequential OrRd color scheme. The map applies a d3.geoConicConformal projection fitted to the county shape, with tract polygons rendered as SVG paths. A legend built with d3.axisBottom and d3.scalePow shows the density thresholds. The code also includes stubbed tooltip and array variables that are not fully functional.

Loading thumbnail…

MD Counties Map_Step 1

This choropleth map displays population density for census tracts in Montgomery County, Maryland, using a threshold color scale from light to dark red. It renders SVG paths via `d3.geoPath` with a conic conformal projection, merging TopoJSON tract boundaries from a local dataset. The code loads tract geometries and population data with `d3.queue`, calculates density by dividing population by land area, and applies `d3.scaleThreshold` with `d3.schemeOrRd`. A legend built with `d3.axisBottom` and a power scale explains the color ranges.

Loading thumbnail…

MD Counties Map

This choropleth map displays the population density of Maryland census tracts using a sequential color scale. The visualization loads GeoJSON and population data from external URLs, then uses the `topojson` library to convert the data before rendering it as SVG paths projected with `d3.geoConicConformal` and `d3.geoPath`. A draggable circle allows hovering to query tract attributes, and a legend with thresholds is generated using `d3.scaleThreshold`, `d3.scalePow`, and `d3.axisBottom`.

Loading thumbnail…

testing dragging and combining of tracts

This example presents an interactive choropleth map of census tracts in the Rockville, Maryland area, colored by population density using a `d3.scaleThreshold` and the `d3.schemeOrRd` color ramp. A draggable yellow circle, implemented with `d3.drag`, allows the user to move it across the map; as it moves, a tooltip displays the name of the tract currently under the cursor, determined via `d3.geoContains`. The map is rendered as SVG paths projected with `d3.geoConicConformal` and `d3.geoPath`, using GeoJSON converted from TopoJSON, with population data joined from a separate JSON file.

Loading thumbnail…

MD Counties with US Atlas

This choropleth map of Maryland counties visualizes population density using a conic conformal projection fitted to GeoJSON county boundaries. The code loads topojson and population data, calculates density as population divided by land area, and fills each county with colors from the d3.schemeOrRd sequential color scheme via d3.scaleThreshold. Hover interactions highlight counties in red. A legend built with d3.axisBottom and d3.scalePow shows the density thresholds. The visualization uses d3.v4, topojson.v2, and renders SVG paths with d3.geoPath, sourced from UMBC VIS class data.

Loading thumbnail…

From US Atlas, drawing MD Counties

This example displays a choropleth map of Maryland counties from the US Atlas TopoJSON data, with hover highlighting that turns each county red and logs its FIPS ID to the console. It uses d3.geoPath to render SVG paths of county boundaries, while a threshold color scale applies a sequential OrRd scheme. The county borders are drawn as a separate white mesh for contrast. The code loads the topojson feature collection and removes non-Maryland tracts, though the data lacks population values, so the color encoding remains visually uniform.

Loading thumbnail…

md-geometry

This visualization shows population density across Maryland census tracts using a choropleth map. The color scale maps density values to an orange-red sequential palette, with darker shades indicating higher population per square mile. Built with D3 v4, it loads TopoJSON tract boundaries and CSV population data, joins them by county and tract FIPS codes, and calculates density by dividing population by land area in square miles. The `d3.geoConicConformal` projection fits the state geometry using `projection.fitSize`, and `d3.geoPath` renders the SVG paths with `d3.scaleThreshold` for coloring.

Loading thumbnail…

Class 5

This visualization displays earthquakes from the past week across a map of the United States, with points colored by magnitude and a legend showing the number of quakes in each magnitude range. It uses d3.geoPath with a d3.geoAlbersUsa projection to render TopoJSON state boundaries, while earthquake data arrives as GeoJSON from the USGS feed. The map includes a draggable orange circle, and mouse movement updates a readout of geographic coordinates using the inverse projection.

Loading thumbnail…

MD Counties Age Cohort Population Chart

This radial bar chart displays the population of Maryland counties, segmented by age cohorts. The visualization uses a circular layout where each county occupies a radial band, with the length of each segment representing that cohort’s population contribution. Built with D3 v4, it employs `d3.scaleBand` for angular positioning, `d3.scaleRadial` for radial distances, and `d3.arc` to render the stacked segments. The data is loaded from a GitHub-hosted CSV file, and the chart includes circular gridlines, county labels, a population axis, and a color-coded legend for the age groups.

Loading thumbnail…

Histogram II

This histogram shows the number of homicides in Chicago for each week in 2015, based on data from the City of Chicago. The visualization uses d3.histogram to bin the data by week and d3.scaleTime for the x-axis, with bars rendered as SVG rectangles. An axis is drawn using d3.axisBottom, and bar heights are scaled linearly with d3.scaleLinear. Data is loaded from a CSV file containing incident dates.

Loading thumbnail…

Population Pyramid

This population pyramid visualizes the distribution of U.S. male and female populations across five-year age brackets from 1850 to 2000. Overlapping translucent bars show both sexes simultaneously, with blue for males and pink for females, while arrow keys animate the displayed year. The D3 v3 code builds an SVG with sliding birthyear groups, using `d3.nest` to structure data from the Minnesota Population Center and `transition` to smoothly update bar heights and positions.

Loading thumbnail…

Choropleth with Animated Stripes

This choropleth visualizes the poverty rate for families with children in Maryland counties, with animated striped overlays expressing the margin of error. The map uses D3 v4’s `d3.geoPath`, `d3.geoMercator`, and `topojson` to render county shapes, while a stripe pattern and mask animate fill colors between the upper and lower confidence bounds using chained transitions. Users toggle between one-year and five-year ACS estimates. Data comes from the 2014 American Community Survey.

Loading thumbnail…

population graph

This visualization presents United Nations population projections for countries with over one million people, using stacked areas to show the changing composition of global population from 2010 to 2100 under the medium fertility variant. The chart displays several projection scenarios as colored layers, with buttons that reorder the stack using different `d3.stack` order functions (ascending, descending, inside-out, reverse) and offset methods (wiggle, silhouette, expand). Built with D3 v4, the visualization loads CSV data and renders animated transitions between stacking arrangements.

Loading thumbnail…

counties

This example presents an empty SVG canvas created with d3.select, sized at 960 by 500 pixels. It renders a single text element using the append method, displaying the prompt “Edit the code below to change me!”. The text is positioned at coordinates (120, 200) and styled with a 36-pixel monospace font. The code relies on the d3.v4 library and draws directly to an SVG element, providing a minimal starting point for further visualization development.

Loading thumbnail…

fresh block

A choropleth map of Maryland counties shows poverty rates for families with children, with an animated striped overlay indicating margin of error. Users toggle between ACS five-year and one-year estimates. The SVG map uses d3.geoPath, d3.geoMercator, and topojson, while stripe patterns animate via d3 transitions to represent uncertainty bounds.

Loading thumbnail…

Custom Force Manipulation

This example demonstrates a custom force-directed simulation where 250 nodes, grouped into five color-coded types, repel each other and are pulled toward the center while colliding and settling into a stable clustered layout. Using d3.forceSimulation with configurable forces for charge, x/y centering, and collision, the nodes animate in SVG as the simulation ticks. The rendering includes touch interaction support, allowing users to place temporary circular touch zones on the canvas that subtly pull nearby nodes toward them through the tick handler’s custom logic.

Loading thumbnail…

Arbitrary Visualization

Clicking on the canvas generates a cluster of blue-tinted, gradient-filled SVG shapes that grow, fade, and dissolve over time. Each click creates a new group of nodes connected by closed basis curves, which are then simulated through a force-directed layout using `d3.forceSimulation` with charge, collision, and Y-position forces. The nodes and links are drawn as SVG `path` elements, with a radial gradient fill and animated opacity transitions that remove each shape after a 60-second delay. The code uses d3 v4 and a custom `d3.line` with `curveBasisClosed` to define the bubble edges.

Loading thumbnail…

Link Constraint

Clicking on the canvas spawns small clusters of steelblue circles connected by grey lines, with each cluster forming a ring-like link structure. The visualization uses D3 v4’s force-directed simulation (`d3.forceSimulation`) with many-body repulsion, collision detection, and link forces to position the nodes, while SVG circles and lines are rendered and animated on click. New nodes fade in and out over a 10-second cycle, and users can drag individual circles to perturb the layout.

Loading thumbnail…

Pie Chart

A donut chart displays six data points as animated arcs, with each segment labeled by its data ID. Built with D3 v4, the visualization uses the `d3.pie` layout, `d3.arc` geometry, and a `transition.attrTween` to smoothly interpolate between random values on each update. The SVG is rendered dynamically, with slices colored via `d3.scaleOrdinal` and labels positioned at arc centroids.

Loading thumbnail…

Bar Chart

This animated bar chart displays 31 random data points across a linear x-scale and a 0-to-10 y-scale, updating with new values on each button click. Built with D3 v4, it renders SVG axes and bars, using a clip path to contain the body and a merge pattern with transitions to smoothly animate bar positions and heights as data refreshes. The chart is constructed via a reusable `barChart` function that configures margins, scales, and ordinal colors for potential customization.

Loading thumbnail…

Scatter Plot Chart

A scatter plot chart displays data points as symbols across an X and Y axis, with grid lines and categorical symbol types (circles, crosses, diamonds, squares, stars, triangles, and wyes) assigned via `d3.scaleOrdinal`. The D3.v4 code builds an SVG with axis ticks and a clipped body area, then animates symbol positioning using `transition` and `d3.symbol` for shape rendering. Data is sourced from a gist by MTClass, using the `d3.axisBottom` and `d3.axisLeft` APIs for axes.

Loading thumbnail…

Basic Axes

Four interactive buttons let a user select one of D3 v4’s four axis orientations—bottom, top, left, or right—to re-render a 500-by-500 SVG. The example displays three axes simultaneously, each built from a different scale: a linear scale from 0 to 1000, a power scale with exponent 2, and a time scale spanning one year. Each axis is drawn with `d3.axisBottom`, `d3.axisTop`, `d3.axisLeft`, or `d3.axisRight`, called on a grouped `<g>` element. The code uses `d3.scaleLinear`, `d3.scalePow`, and `d3.scaleTime` to set the domain and range.

Loading thumbnail…

LA quakes

The map displays earthquakes around Los Angeles as crimson paths, projected using the Mercator projection, over a zoomable, tile-based street map. It relies on `d3.geoMercator`, `d3.geoPath`, and `d3.tile` to render vector tiles from OpenStreetMap, while quake data is fetched from the USGS GeoJSON feed. Zooming updates the projection and repositions earthquake paths accordingly.

Loading thumbnail…

Pan & Zoom III

This example shows a dense spiral of 2,000 circles generated by a phyllotaxis pattern, which users can pan and zoom. The d3-zoom behavior is attached to an invisible overlay rectangle that covers the entire SVG, ensuring it captures all pointer input. On each zoom event, the code applies the current zoom transform to the group element containing the circles via `d3.event.transform` in the `zoomed` callback. This uses SVG transforms and d3.v4’s zoom API, with scale limits set between 0.5 and 4.

Loading thumbnail…

Assignment 9

This interactive map displays earthquake locations from the USGS weekly feed overlaid on OpenStreetMap raster tiles and U.S. state boundaries from TopoJSON. Users can pan and zoom via d3.zoom, with d3-tile loading map tiles and d3.geoPath reprojecting the vector geometry on each interaction. The map also shows the geographic coordinates of the mouse cursor in real time.

Loading thumbnail…

April 6 class

This interactive map shows earthquake locations across the United States, plotted as crimson paths atop a zoomable OpenStreetMap tile layer. Using d3.geoMercator projection and d3.geoPath, it renders geographic features from TopoJSON state boundaries and GeoJSON earthquake data from the USGS weekly feed. The d3.zoom and d3.tile APIs enable pan and zoom, updating both vector paths and raster tiles in sync. A status readout displays latitude and longitude coordinates using projection.invert as the mouse moves.

Loading thumbnail…

Raster & Vector II=Assignment Class 10

This interactive map displays world earthquake data from a live USGS feed overlaid with vector boundaries of U.S. states, drawn in red on a pan-and-zoomable OpenStreetMap raster tile background. The visualization uses `d3.geoMercator` for projection, `d3.geoPath` to render GeoJSON features, and `d3.tile` with `d3.zoom` to dynamically reproject the geometry during interaction. Earthquake epicenters are plotted as crimson paths, while state outlines are generated from TopoJSON using `topojson.feature`. Pointer movement reveals geographic coordinates in a label.

Loading thumbnail…

March 30 class

This map shows the state of Oklahoma with a street overlay, rendered atop OpenStreetMap tiles. Red dots mark earthquake epicenters from the USGS all-week feed that fall within the state’s boundaries. The visualization uses a D3 Mercator projection fitted to the Oklahoma geometry, and fetches tile images and GeoJSON data via `d3.json`. The code employs `d3.geoPath`, `d3.geoContains`, and `topojson.mesh` to draw the state boundary and filter earthquakes.

Loading thumbnail…

class-07 demo

This visualization displays a week of earthquake data overlaid on a map of Oklahoma, using a tile-based OpenStreetMap basemap for geographic context. It plots earthquake epicenters as crimson paths, filtering out events below a 2.5 magnitude threshold. The map uses a Web Mercator projection via `d3.geoMercator` and renders geographic features with `d3.geoPath`, including state and county boundaries from TopoJSON files. The basemap is composed of image tiles fetched from the OpenStreetMap tile server using the `d3.tile` API. Earthquake data is sourced from a local GeoJSON file rather than the live USGS feed.

Loading thumbnail…

class-07 demo

This visualization combines OpenStreetMap raster tiles with vector data for Oklahoma using d3-tile and d3.geoPath with a Mercator projection. It overlays county boundaries from a TopoJSON file, drawn as black lines, alongside earthquake points from a USGS GeoJSON feed, rendered as semi-transparent crimson circles. The quakes are filtered by magnitude threshold, and the tile layer uses the d3.tile layout to compute visible tiles. Both the raster images and vector shapes are rendered as SVG elements.

Loading thumbnail…

Oklahoma Counties

This example displays a map of Oklahoma’s counties, drawn as individual gray paths with darker borders between counties and a thicker outline around the state. Hovering over any county turns it orange. The map loads county geometries from a TopoJSON file and renders them as SVG using `d3.geo.path` with a null projection, meaning coordinates are used directly. The code relies on `topojson.feature` to convert the Topology into GeoJSON and `topojson.mesh` to draw the county and state boundary lines.

Loading thumbnail…

California Population Density

This choropleth map of California visualizes population density per square mile at the census tract level, using a sequential color scale to encode density intervals. The map renders as SVG, with tract boundaries colored via a threshold scale and county outlines overlaid. The visualization relies on D3 v4’s `d3.geoPath`, `d3.scaleThreshold`, and `d3.scaleSqrt`, and uses `topojson` to handle the TopoJSON data. Population data comes from the 2014 American Community Survey 5-Year Estimate, joined with Census Bureau shapefiles.

Loading thumbnail…

Raster & Vector I

This example overlays OpenStreetMap raster tiles with vector map data for Oklahoma counties. It uses d3-tile to fetch and position the image tiles, while d3.geoPath projects and draws the TopoJSON county boundaries. The map is rendered as SVG, with the vector geometries styled in gray and the tile images providing geographic context. The code also includes an unused quake styling class.

Loading thumbnail…

Class 5

This visualization shows recent earthquake activity in Oklahoma, with each quake plotted as a crimson circle sized and colored by magnitude against a map of the state and its counties. The map uses a tile-less D3 v4 approach with `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON boundaries. Earthquake data comes from the USGS live feed, filtered to visible points, with a categorical color scale for magnitude ranges and a legend showing counts per magnitude bin. A mouse-move handler displays geographic coordinates.

Loading thumbnail…

in class scatterplot March 16 long/mag

This scatterplot maps earthquake longitude against magnitude, with each circle representing a single seismic event from the USGS GeoJSON feed. The chart clearly shows the distribution of earthquake strengths across global longitudes, using a linear scale for both axes. Built with D3 v3, the visualization employs `d3.scale.linear` for coordinates, `d3.svg.axis` for tick marks, and `d3.scale.category10` to color the dots. The SVG rendering includes axis labels, and a legend is attempted, though the color domain contains no actual categories.

Loading thumbnail…

histogram

A bar chart displays earthquake depths over time from the USGS weekly feed. The SVG rendering uses d3.scaleBand for the time axis and d3.scaleLinear for the depth axis, mapping each record's time string to a categorical bar position. The code fetches CSV data with d3.csv, parses timestamps via d3.utcParse, and applies the d3.axisBottom and d3.axisLeft APIs to annotate the chart. Red bars represent the depth values for each earthquake event.

Loading thumbnail…

Class 6-MT

This example plots earthquake magnitude against time over the past week, combining a red line through the data points with a blue scatterplot of individual events. The visualization uses D3 v4's `d3.csv` to load data from the USGS earthquake feed, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the trend line. Circle elements mark each quake’s magnitude, with gridlines added via custom axis functions, all rendered as SVG.

Loading thumbnail…

Class 5

A United States map rendered as gray SVG paths displays earthquakes from the last week, sized and colored by magnitude on a categorical scale. Each quake is drawn as a crimson path using `d3.geoPath` with a `d3.geoAlbersUsa` projection, while a legend counts quakes per magnitude bin. The map fills the viewport, and moving the mouse updates a coordinate readout via `projection.invert` and `d3.mouse`. Data comes from USGS GeoJSON and state boundaries from TopoJSON.

Loading thumbnail…

Class 5

This map of the United States displays earthquake locations from the USGS live feed for the past week, with each quake represented as a circle colored by magnitude using a D3 ordinal color scale. The visualization uses `d3.geoAlbersUsa` for the map projection, `d3.geoPath` to render state boundaries, and `topojson.v2` for GeoJSON conversion. A legend at the right shows magnitude ranges with quake counts, while mouseover coordinates are displayed via a D3 text element.

Loading thumbnail…

Class 4

This example displays a map of the United States using D3 v4 and topojson, with a second layer of earthquake points from the USGS live feed. The map is rendered as SVG paths via the `d3.geoPath` and `d3.geoAlbersUsa` projections, while quake locations are drawn as crimson paths. A mouseover function uses `projection.invert` and `d3.mouse` to display the geographic coordinates of the cursor. Two separate `<g>` elements separate the state and earthquake layers.

Loading thumbnail…

class-02 demo

This example shows a map of Oklahoma with earthquake locations plotted as semi-transparent crimson points, sized by their position on the map. The visualization filters earthquake data to only include events with a magnitude of 2.5 or greater. It uses d3 v4's `d3.geoAlbersUsa` projection and `d3.geoPath` to render SVG paths for state and county boundaries, sourced from TopoJSON data, while earthquake data comes from the USGS feed.

Loading thumbnail…

Class 5

This visualization shows earthquake locations and magnitudes across the United States over the past week, using a color scale to group magnitudes into ordinal bins. A legend on the right lists magnitude ranges with counts of quakes per bin, and mousing over the map displays geographic coordinates. The code uses d3.geoAlbersUsa and d3.geoPath for the map projection, loads state boundaries from TopoJSON and earthquake data from USGS GeoJSON, and employs d3.scaleOrdinal with d3.schemeCategory10 for magnitude-dependent fill colors.

Loading thumbnail…

Class 5

This visualization displays earthquake locations across the United States from the USGS live feed, with each quake colored by magnitude using a d3.scaleOrdinal color scale. State boundaries render as gray paths via TopoJSON and d3.geoPath with an AlbersUSA projection. A legend with circles shows magnitude ranges and counts, while hovering reveals coordinates through d3.mouse and projection.invert. The map filters quakes to viewport-visible coordinates and removes legend entries exceeding the largest observed magnitude.

Loading thumbnail…

fresh block

This example shows a bar chart of earthquake magnitudes over time, using data fetched from the USGS earthquake feed. A bar is drawn for each recorded earthquake, with its height corresponding to the magnitude value. The visualization is built with D3 v4, using `d3.scaleBand` for the x-axis time categories, `d3.scaleLinear` for the y-axis magnitude range, and SVG rectangles styled with a steelblue fill. The axes are rendered via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

simple chart not working

This example attempts to draw a time-series line chart of earthquake magnitudes using D3 v4, plotting time against magnitude for data loaded from the USGS earthquake feed. The code defines a line generator with d3.line, uses d3.scaleTime and d3.scaleLinear for axes, and renders an SVG path with a steelblue stroke. However, the visualization fails because the CSV URL is mistakenly passed as the literal string "url" to d3.csv, so no data loads and the chart remains empty.

Loading thumbnail…

Scatter Plot Mag Depth

This interactive scatter plot displays earthquake magnitude against depth using live USGS GeoJSON data for all earthquakes from the past day. Each circle represents a quake, positioned by its depth on the x-axis and magnitude on the y-axis, with hover tooltips revealing the exact values. Built with D3 v4, it uses `d3.json` for data loading, `d3.scaleLinear` for axis ranges, and SVG circle elements with `mouseover` and `mouseout` events to trigger the tooltip’s opacity transitions. The chart includes labeled axes with tick marks to facilitate comparison of seismic activity patterns.

Loading thumbnail…

Class 6 ScatterPlot

This visualization plots earthquake magnitudes against time over a week, using a scatterplot with circles positioned by time on the x-axis and magnitude on the y-axis. The code overlays a line path connecting the data points via d3.line, though the primary focus is the scatter of events. It loads live data from the USGS earthquake feed as CSV, parses timestamps with d3.utcParse, and applies d3.scaleTime and d3.scaleLinear for axes. The SVG is rendered with D3 v4, and hovering over a dot turns it red. The visualization also attempts to add a legend, but the referenced color scale is undefined, so no legend appears.

Loading thumbnail…

class 4 - states

This visualization shows earthquake activity across the United States over the past week, with points colored by magnitude using a green-to-red ordinal scale. The map displays state boundaries as gray paths, while earthquakes are layered as colored circles. It uses D3 v4, TopoJSON for state geometries via `d3.geoPath` with an Albers USA projection, and the USGS real-time earthquake feed. A d3-legend legend indicates magnitude ranges, and earthquakes are filtered into four classes.

Loading thumbnail…

Bar Chart 3

This bar chart displays the relative frequency of each letter in the English language, based on a tab-separated dataset loaded via `d3.tsv`. The visualization uses an SVG rendering with axes generated by `d3.axisBottom` and `d3.axisLeft`, with the y-axis formatted as percentages. Hovering over a steelblue bar turns it brown. The chart employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with margins applied through a `g` element transform.

Loading thumbnail…

class 3 - states

This example shows a map of the United States with earthquakes from the past week overlaid as colored points. The map uses an Albers USA projection with state boundaries rendered via `d3.geoPath` and TopoJSON data from the UMBC visualization course. Earthquake locations come from the USGS GeoJSON feed, with points colored by magnitude using a scale from green to red. A legend in the corner explains the magnitude ranges, while a mousemove event displays latitude and longitude coordinates using `projection.invert`.

Loading thumbnail…

fresh block

This example shows a horizontal bar chart of six static numeric values, with each bar’s length proportional to its labeled count. The chart uses plain HTML `div` elements styled by a CSS class, where each bar’s width is set directly via an inline `style` attribute (for example, `width: 420px;` for the value 42). The code relies on no JavaScript libraries or data-fetching APIs; instead, it hardcodes all values and dimensions in the markup, with CSS controlling font, background color, padding, and text alignment.

Loading thumbnail…

class 5 - states

A map of the United States displays earthquake locations from the USGS all-week feed, with each state rendered as a gray SVG path via `d3.geoPath` and a `d3.geoAlbersUsa` projection. Crimson circles mark earthquake epicenters, and a legend categorizes magnitudes by color, though the current legend implementation uses static orange swatches. The visualization uses TopoJSON for state boundaries and includes mouse-position coordinate tracking that updates an on-screen info panel.

Loading thumbnail…

class 5 - states

This example displays a map of United States state boundaries rendered in SVG using d3.geoPath with the d3.geoAlbersUsa projection. It overlays earthquake locations from the USGS live GeoJSON feed, with earthquakes plotted as crimson paths on the map. The code uses topojson to convert state topology data and d3.json to load both the state boundaries and earthquake data. A legend is included, and the visualization also shows a coordinate readout that updates on mousemove events, revealing the current latitude and longitude under the cursor.

Loading thumbnail…

class 5 - states

This example displays a map of United States state boundaries rendered in SVG using d3.geoPath with the d3.geoAlbersUsa projection. It overlays earthquake locations from the USGS live GeoJSON feed, with earthquakes plotted as crimson paths on the map. The code uses topojson to convert state topology data and d3.json to load both the state boundaries and earthquake data. A legend is included, and the visualization also shows a coordinate readout that updates on mousemove events, revealing the current latitude and longitude under the cursor.

Loading thumbnail…

class 3 - states

A U.S. map displays all 50 states in gray with a blue background, overlaid with red circles marking earthquake locations from the USGS live feed. The visualization plots both state boundaries and seismic events using d3.geoPath with the d3.geoAlbersUsa projection, filtering earthquake data by magnitude into four color-coded legend categories. The code loads TopoJSON state data and GeoJSON earthquake data via d3.json, with a legend showing magnitude ranges from 1.0 to 4.0+.

Loading thumbnail…

class 4 - states

This example displays a map of the contiguous United States with earthquake locations overlaid as crimson points. The map is rendered using `d3.geoPath` with the `d3.geoAlbersUsa()` projection, while earthquake data is pulled from the USGS live GeoJSON feed. State boundaries come from a local US GeoJSON file processed with `topojson.feature`. The visualization also includes a static legend and interactive coordinate display, which updates as the mouse moves across the map. All drawing is performed with SVG elements.

Loading thumbnail…

class 3 - states

This example displays a map of US states rendered in gray with an Albers USA projection, overlaid with crimson points marking earthquake locations from the USGS live GeoJSON feed. It uses d3.geoPath for both state boundaries and earthquake points, with topojson to convert US state geometries. As the mouse moves over the map, a text display updates to show the geographic longitude and latitude in degrees, computed via projection.invert and d3.mouse. The visualization layers states and earthquakes in separate SVG groups, with a fixed SVG canvas sized 960 by 500 pixels.

Loading thumbnail…

class 4 - states

This visualization shows earthquake activity across the United States over the past week, with points colored by magnitude using a green-to-red ordinal scale. The map displays state boundaries as gray paths, while earthquakes are layered as colored circles. It uses D3 v4, TopoJSON for state geometries via `d3.geoPath` with an Albers USA projection, and the USGS real-time earthquake feed. A d3-legend legend indicates magnitude ranges, and earthquakes are filtered into four classes.

Loading thumbnail…

class 4 - states

This D3 visualization displays a map of US states generated from a GeoJSON TopoJSON source, overlaid with earthquake locations from the USGS all-week feed. It shows the geographic distribution of recent seismic activity across the country, with each quake rendered as a crimson point. The map uses the `d3.geoAlbersUsa` projection and `d3.geoPath` for both state boundaries and earthquake points. As the mouse moves, the page displays the cursor’s geographic coordinates, computed via `projection.invert` and formatted with `d3.format`.

Loading thumbnail…

legend

This example displays a four-category ordinal legend for values from “Insignificant” to “High,” rendered as colored squares with adjacent text labels inside an SVG. It uses a custom `d3.legend()` function built with `d3.scaleOrdinal` to map domain values to color ranges, and appends the legend to a blank SVG canvas via a D3 selection. The legend’s position and colors are configurable through `.translate()` and `.colors()`, and a callback logs “Done!” after rendering. The code includes a separate `d3.legend.js` file and relies on D3 v4.

Loading thumbnail…

class 4 - states

This visualization displays earthquakes recorded in the United States over the past week, color-coded by magnitude on a dark basemap of state boundaries. It uses D3.js v4 with the `d3.geoAlbersUsa` projection and `d3.geoPath` to render both the TopoJSON state outlines and GeoJSON earthquake points from the USGS real-time feed. The points are filtered into four magnitude bins and drawn with distinct colors, while a legend built with d3-legend explains the scale.

Loading thumbnail…

// source http://jsbin.com/bobulik

This example displays a static Albers equal-area conic projection map of the United Kingdom, with its constituent subunits (England, Scotland, Wales, and Northern Ireland) filled in distinct colors. It renders the geographic boundaries and labels place names from the TopoJSON dataset. Using the d3.geoAlbers projection and d3.geoPath, the SVG paths are generated from the topojson feature collection. The code loads the UK map data via d3.json and applies CSS to hide Ireland.

Loading thumbnail…

// source http://jsbin.com/sivozey

This example demonstrates a time-series chart with an accompanying legend, built using D3.js v4 and rendered as SVG. It sets up a time-scaled x-axis, a linear y-axis, and an ordinal color scale using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The code attaches a legend group to the SVG, positioning it with a translation and calling a `d3.legend` function, though the underlying data and full legend implementation are not visible. The chart uses margins and a nested group to structure the plot area.

Loading thumbnail…

class 3 - states

This visualization shows a map of the United States with earthquake locations overlaid, using a dark gray state outline on a blue background. It loads US state boundaries from a remote TopoJSON file and renders them with `d3.geoPath` using the `d3.geoAlbersUsa` projection. Earthquake data is fetched from the USGS GeoJSON feed and plotted as crimson circles. A mouse-move handler displays the current latitude and longitude in a separate text layer.

Loading thumbnail…

class 3 - states

This visualization shows a map of the United States with earthquake locations overlaid, using a dark gray state outline on a blue background. It loads US state boundaries from a remote TopoJSON file and renders them with `d3.geoPath` using the `d3.geoAlbersUsa` projection. Earthquake data is fetched from the USGS GeoJSON feed and plotted as crimson circles. A mouse-move handler displays the current latitude and longitude in a separate text layer.

Loading thumbnail…

class 3 - states

This example displays a map of the United States with earthquake locations overlaid as crimson points. The map is rendered using SVG paths created with `d3.geoPath` and a `d3.geoAlbersUsa` projection, while earthquake data is loaded from the USGS GeoJSON feed and plotted with the same path generator. The visualization also shows the latitude and longitude of the mouse cursor in a separate text element, using the projection’s `invert` method to translate screen coordinates to geographic coordinates.

Loading thumbnail…

JS Bin

The example shows a two-column web layout with an interactive map on the left and a scrollable data panel on the right. The interface uses Bootstrap’s grid system for a responsive 50/50 split, with the map container filling the full viewport height. The JavaScript initializes a `metro` object and logs “hello world” to the console on document ready, though no map rendering or data visualization is yet implemented. The code relies on jQuery for document-ready handling and defines CSS for the map and data sections but does not demonstrate any actual charting or geographic rendering.

Loading thumbnail…

Bar Chart I

A basic bar chart visualizes a small fixed dataset of six numeric values, with each bar’s length and label representing its value. The chart uses green horizontal bars with white text, positioned through inline styles. This example, from the “Let’s Make a Bar Chart” tutorial, is built with D3 v3 and an HTML `<div>` per bar instead of SVG. The code employs the `d3.scale.linear` API to map data values to pixel widths, and uses D3’s selection and data-joining methods to create the bars.

Loading thumbnail…

class-02 demo

A map of Oklahoma displays earthquake epicenters as red points on a blank state background, with county borders outlined in gray. The visualization filters earthquake records by a magnitude threshold and projects them using `d3.geoAlbersUsa`. The code loads GeoJSON and TopoJSON data via `d3.json` and renders the geographic features with `d3.geoPath`.

Loading thumbnail…

class-02 demo

This example plots earthquake data from the USGS feed as filled paths on a map of Oklahoma, using county and state boundary shapes from a TopoJSON file. The visualization uses an Albers USA projection via `d3.geoPath` to render both the geographic outlines and the quake features, with a threshold magnitude of 2.5 filtering the displayed events. Earthquakes appear as crimson semi-transparent shapes, while the map layer is drawn separately in a background group. The code also logs earthquake counts for California and the earliest event time to the console.

Loading thumbnail…

Population Pyramid

This visualization shows the changing distribution of age groups in the United States from 1850 to 2000 as an animated population pyramid. Overlapping blue and pink bars represent male and female populations for five-year age brackets, with transparency revealing sex differences. Using d3.v3, the code builds the chart with SVG elements and transitions, while arrow keys trigger updates that slide the birthyear axis and resize bars. Data comes from the Minnesota Population Center via a CSV file.