jmarcrum3

@jmarcrum3·5 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load raw CSV data in a browser using the standard Fetch API, bypassing any data-parsing library. It defines an asynchronous `fetchText` function that retrieves the file content and returns it as a plain text string. The code then fetches a named CSS colors dataset hosted on GitHub Gist and logs the resulting raw text to the browser console. The visualization is minimal, focusing solely on the network request and text output without any charting or rendering framework.

Jun 7, 2023

Loading thumbnail…

Making a Bar Chart

This example visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. A static SVG bar chart displays countries along the vertical axis and population values along the horizontal axis, with steelblue bars sized by `d3.scaleLinear` and `d3.scaleBand`. The code loads data from a CSV file via `d3.csv`, converts population figures, and renders axes with `d3.axisLeft` and `d3.axisBottom`.

Jan 19, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jan 18, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic geometric shapes—circles, rectangles, a line, and a path—drawn with SVG and styled through CSS. It shows how shape properties like fill color, stroke width, and stroke color can be set either as inline attributes or via classes in an external stylesheet. The code uses native SVG elements within an HTML file, with a CSS stylesheet defining the `.lines` class for styling. The rendering is purely static, with no JavaScript libraries, data sources, or interaction.

Jan 18, 2020

Loading thumbnail…

Cars Report

This example displays a list of cars priced under $2,000. The `generateReport` function filters the hard-coded car JSON data by price and formats each entry with the `formatCar` helper, producing lines like "2009 Ford F150: $1950". The resulting text is output into a `<pre>` element with a large font size using `document.getElementById` and `textContent`. The code uses JavaScript string manipulation and `JSON.parse` for data handling.

Jan 18, 2020