jmmoser7

@jmmoser7·11 public vizzes

lets make a face

This example presents the world’s top 10 most populous countries as a simple, axis-free bar chart. It uses React with D3 v7 to render SVG bars, scaling the data from the United Nations World Population Prospects 2019. The code employs `scaleBand` for bar positioning, `scaleLinear` for heights, and `max` for domain calculation.

Feb 13, 2022

Loading thumbnail…

Cars scatterplot

This scatterplot displays automobile data from the auto-mpg dataset, plotting each car's horsepower against its weight. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the y-axis. The chart includes custom axis formatting, with tick labels styled via CSS and D3's `axisBottom` and `axisLeft` functions. The data is loaded as a CSV and parsed into numeric values for the scatter points.

Feb 13, 2022

Loading thumbnail…

scaterplot

This scatterplot-style bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for categorical country placement. Custom axes with `axisBottom` and `axisLeft` include tick formatting that converts values to billions, while circles mark each country’s population. The code loads data from `data.csv` and multiplies populations by 1000 to reflect actual numbers.

Feb 13, 2022

Loading thumbnail…

Making A Scatter Plot

This scatter plot uses a bar chart layout to compare the populations of ten countries, with each country’s population displayed along a linear scale. Built with D3 v5, the visualization loads data from a CSV file and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles. The bars are styled with `fill: steelBlue`, and population values are multiplied by 1,000 during data loading.

Feb 13, 2022

Loading thumbnail…

Fork of making a bar chart

This fork of a D3.js bar chart visualizes the total gross floor area (TotalGFA) for different access types from a CSV dataset. The chart uses a linear scale for the x-axis and a band scale for the y-axis, rendering steel-blue rectangles within an SVG. It employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5 to construct the axes and bars, with data loaded via the `csv` function.

Feb 11, 2022

Loading thumbnail…

making a bar chart

A horizontal bar chart displays population estimates for eleven countries, sorted by descending value, using steel-blue bars against a light background. The visualization is built with D3.js v5, utilizing `scaleLinear` for the population axis, `scaleBand` for country categories, and axis generators `axisLeft` and `axisBottom`. Data from `data.csv` is loaded via D3's `csv` method, with population figures multiplied by 1,000, then rendered as SVG rectangles within a 960x500 canvas.

Feb 11, 2022

Loading thumbnail…

Fork of Sine Wave Circles

A D3.js animation renders a field of 100 white circles that oscillate vertically in a sine wave pattern across a black SVG canvas. Each circle's vertical position is calculated using the sine of its horizontal index divided by five, plus a time-based increment from the `d3.timer` callback, producing a smooth, continuous wave motion. The circles are evenly distributed horizontally based on the SVG width and sized proportionally. The example, a port of the P5.js Math Sine Wave, demonstrates D3's core selection and attribute-updating APIs, leveraging SVG circles as the primary rendering primitive for the animated visualization.

Feb 11, 2022

Loading thumbnail…

Cars Report

This example displays a report of used cars, filtering a small dataset to show only vehicles priced under $2000 and formatting each as a line of text. The code uses a React-free approach with plain JavaScript, parsing inline JSON data from `cars.js` and applying a `formatCar` function that constructs strings like “2012 Nissan Leaf: $1800.” The report is rendered into a `<pre>` element in the HTML page, with styling set via an inline `font-size` property. The visualization relies on standard array methods (`filter`, `map`, `join`) and DOM manipulation via `getElementById`.

Feb 10, 2022

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This visualization displays the estimated 2010 religious composition of the 20 most populous countries as a stacked horizontal bar chart, with each bar segment colored by religion. Hovering over a bar reveals a tooltip with the exact figures, while hovering over the legend highlights that religion across all countries. The chart uses D3.js 3.5.5 for rendering, with the `d3.layout.stack` API for stacking, `d3.legend.color` for the interactive legend, and `d3.tip` for tooltips. Data is sourced from Pew Research’s 2012 Global Religious Landscape report.

Feb 10, 2022

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, where each arc segment represents a node and its angular width encodes the node's value. Clicking a segment zooms in to show that node as the new root, with smooth animated transitions updating arcs and labels. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout, while `transition.attrTween` animates the changing arc paths during zoom. Color is assigned per top-level category using a rainbow scale.

Feb 8, 2022

Loading thumbnail…

Untitled

This example demonstrates the simplest possible React starter visualization, displaying the text “Hello World” in a predefined HTML element. The code leverages vanilla JavaScript to select the DOM node via `getElementById` and assign the message as its text content. Although it imports no React-specific libraries, the project is structured as a React starter, using a minimal HTML page with embedded CSS and JavaScript. The rendering approach relies entirely on the browser’s native DOM manipulation, with no data source or graphical output beyond static text.

Feb 8, 2022