radiohead-lgl

@radiohead-lgl·10 public vizzes

temperature of SF

This scatterplot visualizes the relationship between mpg and acceleration in a dataset of cars, with each red circle representing a vehicle. The x-axis maps mpg and the y-axis maps acceleration, both scaled linearly using `d3.scaleLinear` with `d3.extent` for domains. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, with gridlines and labels styled through CSS. Data is loaded from a CSV file using `d3.csv` and parsed with unary `+` operators. The SVG output uses D3 v7's selection and data-join methods to append circles and text elements.

Sep 13, 2021

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between miles per gallon and acceleration for a dataset of automobiles, with each car represented as a semi-transparent red circle. The visualization uses D3.js v7 to load the data via `d3.csv`, scale it with `scaleLinear`, and render axes using `axisLeft` and `axisBottom`. The SVG chart includes labeled axes and a title, with gridlines generated through tick size settings. Data comes from the World Population Prospects 2017 dataset, though the code actually loads an auto-mpg CSV from a VizHub URL.

Sep 13, 2021

Loading thumbnail…

Fork of Auto MPG Summary

This visualization displays a plain-text summary of the Auto MPG dataset from the UCI Machine Learning Repository. It shows the total row count, column count, and file size in kilobytes, followed by the first 10 rows as formatted JSON. Using D3 v5, the code loads data with `csv` from a remote URL and appends `<pre>` elements to the document body via `select`. The computation for file size uses `csvFormat` and the `Math.ceil` method, while styling is handled by a separate CSS file with black and green terminal-like colors.

Sep 12, 2021

Loading thumbnail…

Untitled

This bar chart displays the population of the top 10 most populous countries, sourced from the World Population Prospects 2017 dataset. The visualization uses d3.scaleLinear and d3.scaleBand to map population values and country names to SVG rectangles, with axes formatted via d3.axisLeft and d3.axisBottom. Population numbers are converted from thousands using the d3.format module, and the chart is rendered entirely with SVG elements.

Sep 12, 2021

Loading thumbnail…

Untitled

This bar chart displays the population of the top ten most populous countries, using data from the World Population Prospects 2017. It encodes population on a linear scale and country names on a band scale, rendering horizontal bars with SVG. The visualization is built with D3 v7, using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and draw axes. Rectangles are appended to a grouped SVG element, with the x-axis positioned at the chart’s inner height.

Sep 9, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal D3.js visualization using ES6 modules and external dependencies. It imports the `select` function from D3 via the `d3` namespace, which is loaded from UNPKG in the HTML file. The code also shows how to import local modules, though the message export remains unused. The page includes a placeholder `#message` div and a stylesheet, but the visualization itself does not render any visible output, as the selection and text assignment are commented out.

Sep 9, 2021

Loading thumbnail…

make a face with D3.js!

A pink smiley face rendered with D3.js animates by moving its eyebrows up and down. The example shows fundamental DOM manipulation, drawing a circle for the head, arcs for the mouth, and rectangles for the brows, all positioned with translation transforms. It uses `d3.select` and `d3.arc` from d3.v7, with chained `transition().duration()` calls to create the eyebrow animation.

Sep 8, 2021

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates primitive SVG shapes—circles, rectangles, lines, and paths—styled with CSS and grouped using SVG’s `<g>` element. It shows how fill, stroke, and stroke-width attributes are applied directly on elements or inherited collectively from a group, with transform operations like scale and translate adjusting their placement. The code loads no external data but renders entirely in SVG, using only D3 conventions for module imports without invoking D3 functions. The stylesheet controls body margins, hidden overflow, and class-based stroke styling for the line group.

Sep 8, 2021

Loading thumbnail…

HTML Cars Reports

This example presents a static inventory of three used cars with model years, names, and prices. The page renders a straightforward HTML list of car listings, with the first entry visually emphasized. It uses plain HTML with inline list items and a linked CSS stylesheet for styling. The styling sets a monospace font at a large size and applies a red color to the highlighted listing via a custom class. No JavaScript or D3 libraries are loaded, making this a pure HTML/CSS demonstration.

Aug 1, 2021

Loading thumbnail…

Hello World

This example demonstrates asynchronous data loading and report generation. It fetches car data via a simulated delay and filters the list to show only vehicles under a price threshold. The code imports D3-related modules indirectly, using JavaScript promises and ES6 module imports. The final output is rendered as plain text in an HTML pre-element.

Aug 1, 2021