JMason88

@JMason88·11 public vizzes

MIT Technicolor Campus Map

This map visualizes MIT campus buildings as colorful, zoomable SVG paths, with each building colored by its OpenStreetMap tags. It uses D3 v4’s `d3.geoMercator` projection with `d3.geoPath` to render TopoJSON data, and `d3.zoom` to enable panning and scaling. Building colors come from `d3.scaleOrdinal` with `d3.schemeCategory10`, and the map adjusts to window size on resize. Data originates from an OpenStreetMap export simplified via Mapshaper.

Jun 5, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via D3’s `csv` function. It renders circles with red fill and opacity, using `scaleLinear` for both axes, with `axisBottom` and `axisLeft` for ticks and custom axis labels. The code formats tick labels with `format` and adds a title, demonstrating D3 v5’s SVG-based data binding and margin-driven chart layout.

Jun 4, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations estimates, with circles sized by population and custom axis styling. It demonstrates D3 v5 axis customization, including tick formatting that converts values like 'G' to 'B' for billions, rotated tick labels, and gridlines extending across the plot. The code uses `d3.csv`, `scaleLinear`, `scalePoint`, `axisBottom`, `axisLeft`, and `format` to render an SVG, with margins and labels styled via CSS.

Jun 4, 2019

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of the ten most populous countries, with bars representing each nation’s total population. It uses D3 v5’s `scaleLinear` and `scaleBand` to map population values to bar widths and country names to vertical positions, while `axisLeft` and `axisBottom` render the axes. The chart reads from a CSV file, reformats tick labels using `format`, and renders as SVG with steel-blue bars and custom margin-based layout.

Jun 4, 2019

Loading thumbnail…

Iris Summary

This visualization presents a plain-text summary of the classic Iris flower dataset, displaying the total row count, column count, and data size in kilobytes. It also prints the first ten rows of the data as a formatted JSON object. The program uses d3.csv to load the remote CSV file and d3.csvFormat to calculate its size. Rendered with black-and-green terminal styling, the example demonstrates a minimal, code-driven approach to data overview rather than a graphical chart.

Jun 4, 2019

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the populations of the world’s ten most populous countries, with China and India leading by a wide margin. The visualization uses D3 v5 to load data from a CSV file, scaling population values linearly along the x-axis and country names along a band scale on the y-axis. SVG rectangles are appended and sized using D3’s scaleLinear and scaleBand, while axisLeft and axisBottom generate the labeled axes. The chart is styled with a steelblue fill for the bars.

Jun 4, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten countries, using horizontal bars sorted by country name. The visualization is built with D3.js v5, rendering to an SVG canvas. The code imports `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, map population values to bar widths, and draw the axes. The chart demonstrates fundamental DOM manipulation by appending rectangles to the SVG group, with each bar's height set by the band scale's bandwidth.

Jun 4, 2019

Loading thumbnail…

Lets Make a Face with D3.js!

A cheerful cartoon face rendered in SVG uses D3.js v5 to draw a yellow circle as the head, with circles for eyes and an arc-generated mouth. The example demonstrates D3's `arc()` generator and SVG shape creation. Eyebrows animate up and down through chained `transition().duration(2000)` calls, showing how D3 timers and attribute interpolation work. The code selects an existing SVG element, applies transforms to group elements, and centers the face via width and height calculations. This interactive-looking yet purely animated composition highlights basic D3 selections, scales, and SVG coordinate systems.

Jun 4, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental SVG shapes—circle, rectangle, line, and path—as rendered through a combination of inline SVG markup and CSS styling. The code showcases how to apply fills, strokes, and stroke widths directly on elements, as well as how to group shapes for shared visual attributes using the `transform` and `g` elements. The CSS stylesheet defines classes (`.lines`) to control stroke properties and `stroke-linejoin`, while also setting a global body margin. The page uses a 960x500 SVG canvas with a scale transformation to enlarge the displayed shapes.

Jun 4, 2019

Loading thumbnail…

HTML Cars Report

This example demonstrates a static HTML page presenting a simple car inventory report, listing three vehicles with model years and prices. It shows how basic styling and semantic markup can create a readable document. The page structure uses raw HTML elements and headings, while visual emphasis relies on a CSS class selector. The code directly links a `styles.css` file and applies a monospace font with large text, highlighting the first list item in red. No JavaScript libraries or data APIs are involved; the content is hardcoded directly in the markup.

Jun 4, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a simple text display using D3.js, showing the phrase “Hello VizHub!” in large, styled typography against a dark blue background. The visualization uses the `select` API from D3 v5 to target the `#message` div and set its content from an imported ES6 module. A Google Fonts stylesheet and custom CSS define the visual styling, while the code structure highlights modular JavaScript imports and basic DOM manipulation.

Jun 4, 2019