random-program

@random-program·10 public vizzes

Vega-Lite API Template

This example displays a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing the car model name. Built with the Vega-Lite API, the visualization loads data from a CSV using `d3.csv` and renders through the `vega` and `vega-lite` libraries. Point marks are configured with a fill, a fixed size, and reduced opacity, while axis styling is customized via a config object. The chart's dimensions adapt to the window size, and interactive tooltips are enabled using `vega-tooltip`.

Nov 24, 2020

Loading thumbnail…

Load and Parse CSV

This example demonstrates how to load and parse a CSV file from a remote URL, displaying basic metadata about the dataset in a plain HTML page. It fetches the raw text from a GitHub gist containing a list of CSS named colors, then uses D3 v6’s `d3.csvParse` to convert it into an array of objects. The page reports the file size in kilobytes, the row count, and the number of columns, writing these details to a `<pre>` element via `document.getElementByID`. The code relies on the Fetch API’s `fetch` and `response.text` method.

Nov 24, 2020

Loading thumbnail…

Smily Face

This example renders a smiling face using React and D3’s `arc` generator to create the mouth as a path. The SVG contains a yellow circle with a black stroke, two eyes as plain circles, and the curved mouth arc. React manages the component structure and JSX, while D3 computes the mouth’s path geometry with specified start and end angles. The face is centered via a translate transform, and hardcoded constants define dimensions and positions.

Nov 23, 2020

Loading thumbnail…

Hello HTML

This example displays a simple static scene of a yellow circle with two smaller black circles, creating a minimal smiley-like face. It shows how raw HTML and SVG can be used directly to draw shapes without any JavaScript or external libraries. The page uses a plain SVG element with `circle` tags, setting attributes like `cx`, `cy`, `r`, `fill`, and `stroke` to define position, size, and styling. The `body` has CSS that removes margins and hides overflow, ensuring the visualization fills the viewport.

Nov 22, 2020

Loading thumbnail…

Bar Chart!

This example shows a horizontal bar chart of deaths across Canadian provinces and territories, ordered from highest to lowest. The chart uses a linear scale for the x-axis and a band scale for the y-axis, with bars rendered as SVG rectangles. D3 v5 functions such as `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` load the data and generate the axes, while a custom tick formatter shortens large numbers. The visualization reads from an external CSV file and includes a title and axis label.

Nov 22, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart shows the top 10 most populous countries using 2017 United Nations population estimates. The SVG visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with custom tick formatting that converts billions to the ‘B’ suffix. Axes are styled via `d3.axisBottom` and `d3.axisLeft`, removing default domain lines and adding a centered axis label. Data is loaded with `d3.csv` and displayed as steelblue rectangles.

Nov 22, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can respond to browser window resizing. It draws two green diagonal lines forming an X that always spans the full width and height of the chart container, which fills the entire page via CSS. The code uses `d3.select` to append an SVG element, then extracts the container’s `clientWidth` and `clientHeight` inside a `redraw` function to dynamically set the SVG’s width and height attributes. A `window.addEventListener` for the `resize` event triggers `redraw`, updating the line coordinates using D3’s data join pattern.

Nov 22, 2020

Loading thumbnail…

Bar Chart!

This example draws a yellow circle with black facial features on an SVG canvas, creating a simple smiley face. It uses d3-selection to append and style the circle, eyes, and mouth, with the mouth path generated via the d3-shape `arc()` API. The layout is fixed relative to the SVG dimensions, and the rendering is entirely SVG-based with no external data loaded from data.csv.

Nov 22, 2020

Loading thumbnail…

Bar Chart!

This bar chart displays population figures for ten countries, using a static SVG canvas. The visualization reads data from a CSV file containing country names and population values. The code relies on the D3 v5 library, specifically the `select` and `csv` functions, within a React framework. The SVG element, sized at 960 by 500 pixels, serves as the rendering target, and the chart is generated client-side from the parsed data.

Nov 22, 2020

Loading thumbnail…

Customizing Axis

This horizontal bar chart shows the population of the top 10 most populous countries using 2018 estimates from World Population Prospects 2017. The chart uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the quantitative population axis. Population values are formatted with d3.format’s `.3s` shorthand, and rendered as SVG rectangles with steelblue fill. The data is loaded via d3.csv and parsed by multiplying raw values by 1000.

Nov 22, 2020