Mike Wolfgram

@Mike191·11 public vizzes

Earthquake Stats

This visualization shows worldwide earthquake statistics from 2000 to 2015, charting the number of earthquakes per year across four magnitude ranges (5-5.9, 6-6.9, 7-7.9, and 8.0+). The chart uses a logarithmic y-axis scale to accommodate the wide range of values, and each magnitude range is represented by a distinct colored line with overlaid data points. The size of each data point encodes the estimated number of deaths for that earthquake event. The visualization is built using D3.v5, leveraging several of its core APIs including `d3.scaleLog()` for the logarithmic y-axis, `d3.scaleTime()` for the chronological x-axis, `d3.axisBottom()` and `d3.axisLeft()` for axes, and `d3.line()` with `d3.curveMonotoneX()` for smooth line rendering. The code defines a color scale with `d3.scaleOrdinal()` and a linear scale for determining circle radii, reflecting estimated deaths.

Oct 6, 2019

Loading thumbnail…

Temperature In SanFrancisco : LineChart

This example visualizes earthquake counts across U.S. states from 2010 to 2015, broken down by magnitude category. A dropdown menu lets users switch between categories, updating a heatmap of colored rectangles. The visualization uses d3.csv to load data, d3.scaleBand for axes, d3.scaleQuantize for the color scale, and d3.axisLeft and d3.axisBottom for chart axes. Hovering over a cell reveals its exact count via a tooltip, and a legend shows the color-to-value mapping.

Oct 5, 2019

Loading thumbnail…

Force Directed Graph

This interactive force-directed graph visualizes relationships among programming languages, with nodes representing languages and curved links showing connections. The simulation uses `d3.forceSimulation` with link, charge, center, and positional forces to arrange nodes, while SVG paths render edges with dashed or solid strokes distinguishing link values. Node size and color intensity reflect connection counts, with labels positioned beside each node. Drag behavior is implemented via `d3.drag`, allowing users to reposition nodes interactively within the 1200x700 viewport.

Oct 5, 2019

Loading thumbnail…

Untitled

A force-directed graph renders three nodes connected by three links, with the nodes positioned via a physics simulation and drawn as gray circles with white strokes. The code uses the `d3.layout.force` API and SVG `<line>` and `<circle>` elements, with the node and link positions updated on each `tick` event. Node names are parsed from a hardcoded `links` array.

Oct 5, 2019

Loading thumbnail…

Earthquake Choropleth Map

A choropleth map of the United States visualizes the logarithm of total earthquake counts per state, using a sequential orange-red color scale to show frequency. The map is rendered as an SVG using d3.geoPath with a geoAlbersUsa projection and TopoJSON boundaries. A custom color legend maps threshold domains to d3.schemeOrRd[9], and mouseover interactions trigger tooltips displaying state details. The data is loaded via Promise.all from a CSV file and the states-10m TopoJSON dataset.

Oct 5, 2019

Loading thumbnail…

Earthquake Choropleth Map

This choropleth map displays the total number of earthquakes recorded in each U.S. state, using a logarithmic color scale to differentiate seismic activity. State boundaries are drawn as SVG paths via `d3.geoPath` with a `d3.geoAlbersUsa` projection, and each state's fill is determined by a `d3.scaleThreshold` color scale using the `schemeOrRd` palette. The tooltip is implemented with `d3.tip`, though it is not active in the current interaction. The data comes from a CSV file of state earthquake counts and a TopoJSON file of U.S. state boundaries.

Oct 4, 2019

Loading thumbnail…

Earthquake Choropleth Map

This choropleth map visualizes the total number of earthquakes for each U.S. state, using a logarithmic color scale to differentiate magnitudes. The map renders state boundaries from a TopoJSON file, and the color of each state is determined by its earthquake count, with a threshold-based color scale (`d3.scaleThreshold`) and a sequential color scheme (`d3.schemeOrRd`). The visualization uses D3 v5's geographic projection (`d3.geoAlbersUsa`) and `d3.geoPath` for drawing, while an interactive tooltip (`d3.tip`) displays the state name, region, and exact earthquake count on hover, with data sourced from a CSV file.

Oct 4, 2019

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations using a CSV data file with population values scaled by 1,000. The visualization builds the chart with D3 v5, employing `d3.csv` for data loading, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for axes. Rectangles are appended to an SVG group and styled with steelblue fills. The rendering relies on SVG elements, with margins calculated from the chart’s dimensions to place the visualization properly.

Sep 9, 2019

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js to construct a simple animated face from SVG shapes. It shows a yellow circle as the head, two eyes, and eyebrows that move up and down via chained `.transition()` calls over two seconds each, plus a mouth drawn as an arc. The code relies on D3's selection API (`d3.select`) and the `d3.arc` generator to define the mouth's path, with all elements grouped and translated to center the face.

Sep 9, 2019

Loading thumbnail…

Shapes with SVG and CSS

This SVG and CSS example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be composed and styled to create a simple graphic. The SVG markup positions shapes within a 960×500 viewport and applies a 1.5 scale transformation. CSS classes control stroke and fill properties, such as the black stroke and rounded line joins on the path. The example shows how inline SVG attributes and external stylesheets work together to render and customize vector graphics.

Sep 9, 2019

Loading thumbnail…

HTML Cars Report

This example shows a basic inventory report of three used cars, listing each model year, name, and price with the first entry emphasized in red. It demonstrates a minimal HTML document paired with an external stylesheet that sets the body font to 14-point Courier and applies a red color class to the highlighted list item. The visualization relies on plain HTML list elements and CSS class selectors, with no JavaScript libraries or data-binding frameworks involved.

Sep 8, 2019