Skip to main content
Log in
M

moowaffles

@moowaffles·12 public vizzes

Loading thumbnail…

bowl of FROOT

A bowl of fruit appears as four circles in an SVG, initially all apples. The visualization uses D3 v5 within a React framework, with `scaleOrdinal` mapping fruit types to colors and radii. Over time, the array of fruit is modified, removing an apple and changing another to a lemon, demonstrating incremental updates through D3's enter, merge, and exit selections in `fruitBowl.js`.

Feb 15, 2021
Loading thumbnail…

Fork of AREA GRAPH BABYYYYYY but now its world population

This visualization shows world population growth over time as a maroon area graph, with a title, axis labels, and gridlines. The code loads population data from a CSV file and uses D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `area`, `axisLeft`, `axisBottom`, and `format` to render the SVG. The graph animates implicitly through its construction, though no explicit transitions are present. The data is mapped from year to population, with axis ticks formatted to abbreviate large numbers, and the rendering approach uses an SVG path generated by the `area` generator.

Feb 14, 2021
Loading thumbnail…

AREA GRAPH BABYYYYYY

This area graph shows daily temperature variations in San Francisco over time, with the filled region rendered in maroon against a light grid. The visualization loads CSV data from a remote dataset, converts timestamps to JavaScript Date objects, and uses d3.scaleTime and d3.scaleLinear to map dates and temperatures to SVG coordinates. A d3.area generator creates the filled path, while d3.axisLeft and d3.axisBottom produce labeled axes with tick marks. The animation-capable SVG uses transitions that are included in the bundle but not explicitly triggered in this rendering.

Feb 14, 2021
Loading thumbnail…

REAL LINEGRAPH

This visualization displays the temperature in San Francisco over time as a single black line graph, plotted against date and temperature axes with gridlines. The code uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, and a `line` generator to draw the path from CSV data loaded via `csv`. Axis labels and a title are added using `axisLeft` and `axisBottom`. Though scale functions for year and weight are defined, the rendered output shows only the temperature line and axes without those additional encodings.

Feb 14, 2021
Loading thumbnail…

linegraph scatterplot soemthingsomething

This visualization plots San Francisco temperature data over time, using a scatterplot of individual data points with an animated transition. The chart includes time and linear scales for the axes, with circles colored blue and sized by additional data attributes. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as SVG elements, with axis labels and a title included.

Feb 14, 2021
Loading thumbnail…

CARS SCUPUBOPD

This example visualizes the relationship between horsepower, acceleration, weight, and model year for a dataset of automobiles. The scatterplot positions each car by its acceleration on the x-axis and horsepower on the y-axis, with the radius of each point encoding the vehicle’s model year and the opacity and color reflecting weight. The visualization uses D3 v5 to load the CSV data, apply linear scales, and render the SVG circles. It also includes axis labels and tick marks, with the color of each circle computed using a d3 color constructor.

Feb 14, 2021
Loading thumbnail…

this is gonan be a scatter plot

A scatter plot displays the populations of thirteen countries, with each circle animating horizontally from zero to its population value along a linear scale. A point scale positions the country labels on the vertical axis, while gridlines extend from the axes. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `transition.attr` to animate the circles. Population data is loaded from a CSV file using `csv`, then converted to numbers before rendering as SVG circles.

Feb 14, 2021
Loading thumbnail…

formatting axes

This example visualizes the top 13 most populous countries using a horizontal bar chart, with animated bars that grow from zero to their final population values over two seconds. It demonstrates axis formatting techniques by using a `d3.scaleLinear` for the x-axis with a custom tick formatter that converts large numbers to abbreviated units (e.g., "B" for billions). The chart applies `d3.axisBottom` and `d3.axisLeft` to render grid lines and labels, while removing default domain paths for a cleaner look. Population data is loaded from a CSV file and scaled by a factor of 1,000.

Feb 14, 2021
Loading thumbnail…

making a barchart

This example shows a horizontal bar chart of country populations, comparing 12 nations from a CSV dataset. The bars are rendered as SVG rectangles, with country names on the y-axis and population values on the x-axis. Using d3’s `csv` loader, the data is parsed and scaled with `scaleLinear` and `scaleBand`, while axes are generated via `axisLeft` and `axisBottom`. Rectangles are appended to the SVG group with attributes mapped from the scales, and the chart is styled with a steelblue fill.

Feb 14, 2021
Loading thumbnail…

lets make a face with d3.js

A simple cartoon face built with D3.js animates its eyebrows and smile on a yellow circular head. The SVG rendering uses D3 selections, circles, rectangles, and an arc path, with `d3.arc()` generating the smile shape. Transitions via `transition().duration()` move the eyebrows upward and adjust the smile’s inner radius over two seconds. The code leverages D3 v5, React, and explicit coordinate transforms centered on the SVG canvas.

Feb 13, 2021
Loading thumbnail…

svg and CSS stuff

This example demonstrates how SVG graphics can be styled and transformed using CSS. It creates a simple composition of circles, rectangles, lines, and a path within an SVG canvas, using CSS classes to control stroke colors, widths, and line join styles. The example uses React and rendering via SVG, with CSS applied through a linked stylesheet. Explicit SVG transform attributes are used to scale and translate elements, while CSS handles visual styling.

Feb 13, 2021
Loading thumbnail…

HTML Cars Report

This example is a minimal HTML page titled “Cars Report,” displaying a static list of three identical list items, with the first item highlighted in red. It demonstrates basic document structure and styling using raw HTML and CSS, with no JavaScript or data-driven behavior. The page relies on a CSS class (`.highlighted`) applied to a `<li>` element, and global styles set a large monospace font for the body. The code uses no external libraries or visualization APIs, focusing purely on semantic markup and presentational CSS.

Feb 13, 2021