james.haarbauer@dunya-analytics.com

@jhaarbauer·5 public vizzes

Fork of Smiley Face Part II

This example visualizes United Nations population data for 2020 using a bar chart, where each country is represented by a horizontal rectangle. The chart is rendered with SVG within a React application, leveraging D3’s `scaleBand` and `scaleLinear` to map country names and population values to pixel coordinates. Data is loaded asynchronously via D3’s `csv` parser from a remote gist URL. The code uses D3’s `max` utility to determine the scale domain.

Jun 18, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower across automobile models, with each point labeled by vehicle name via tooltips. It uses the Vega-Lite API to declaratively encode the scatterplot’s x- and y-axes with quantitative scales, while relying on D3’s CSV loader to fetch remote data. The visualization is rendered as SVG through Vega and Vega-Lite, with custom axis styling and a dark color scheme for readability. Vega Tooltip handles interactive hover details, and the chart auto-fits to the full browser window.

Jun 17, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data from the UCI Auto MPG data set, mapping fuel efficiency (mpg) against horsepower. Each circular mark is colored by country of origin and sized by vehicle weight, with tooltips revealing car model names. The chart demonstrates the Vega-Lite API (vl) for D3, where the programmatic specification defines encoding channels like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. The code registers Vega, Vega-Lite, and the Vega-Lite API, then reads CSV data via `d3.csv` to render interactive SVG output.

Jun 17, 2024

Loading thumbnail…

Fork of Hello HTML

This example demonstrates loading and parsing CSV data, displaying basic file statistics in a plain-text format. It fetches a remote CSV file containing CSS named colors and reports the data's size in kilobytes, the number of rows, and the number of columns. The program uses D3's `d3.csv` function to retrieve and parse the remote CSV file, alongside `d3.csvFormat` to calculate the data's length. The resulting output is rendered into an HTML `<pre>` element via JavaScript.

Jun 17, 2024

Loading thumbnail…

Fork of Hello HTML

This example displays a grid of eighteen identical smiley faces, each with a yellow circular background, black outline, eyes, and a mouth. The faces are rendered as SVG elements using React components, with D3’s `arc` generator defining the mouth path. Each face randomly varies its eye radius via `Math.random()` within the React render loop, while the layout is static and repeated through D3’s `range` function.

Jun 14, 2024