Skip to main content
Log in
G

Glenn Henshaw

@GlennHenshaw·19 public vizzes

Loading thumbnail…

Hello VizHub

This example visualizes the daily closing price of a financial asset over time as a smooth line chart. The visualization uses D3 v5 with a basisspline curve, rendered as an SVG path. It employs D3's `scaleLinear` and `scaleTime` for the axes, with an `axisBottom` and `axisLeft` that include gridlines. The chart also applies a custom color scheme for the line. The data is loaded from a local CSV file using D3's `csv` function and parsed for date and numeric values.

Sep 27, 2019
Loading thumbnail…

Fruit bowl

A fruit bowl demonstrates incremental updates to SVG circles using D3.js v5. Five apples first render as a row of red circles, then one apple is removed, and a later change turns one remaining fruit yellow. The code uses D3's `select`, `range`, and `scaleOrdinal` APIs, with explicit enter, merge, and exit selections to manage the changing dataset.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

This example renders a time series line chart of stock closing prices from a CSV file, with dates on the x-axis and price on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to draw the path within an SVG. Grid lines are added via tick sizing, and the chart includes axis labels. The data is loaded asynchronously with `csv` and parsed before rendering.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

This example uses the D3 v5 library to render a static scatter plot comparing IQ and internet speed (MB/sec) across 53 countries. The chart displays each country as a red circle, with IQ on the y-axis and MB/sec on the x-axis, using D3’s `select`, `scaleLinear`, `axisBottom`, and `axisLeft` modules. The data is loaded from a CSV file using D3’s `csv` function, parsed into numeric values, and rendered as an SVG. Grid lines are added via the tick marks, and axis labels are included for clarity.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

This scatterplot displays the relationship between IQ scores and internet speed in megabytes per second across 53 countries, with each country represented as a red circle at 50% opacity. The visualization uses D3 v5 to load data from a CSV file and render an SVG chart with linear scales for both axes. Grid lines created through `axisBottom` and `axisLeft` with negative tick sizes provide reference points, while axis labels clarify the variables being compared.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

A scatterplot maps IQ against internet speed (MB/sec) for 53 countries, with each point colored red and semi-transparent. The chart uses SVG rendered through D3 v5, with linear scales for both axes and D3's `axisBottom` and `axisLeft` for ticks. Data loads from a CSV file via `d3.csv`, and numeric parsing precedes the rendering call.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

A data visualization renders a simple scatter plot of student grades from a CSV file, displaying each name and grade as a point on a chart. The visualization uses D3.js version 5, specifically the `select`, `csv`, `scaleLinear`, and `axisBottom` APIs to read the data, map values to coordinates, and draw the x-axis. The SVG-based chart is 500 by 500 pixels, with a single large circle overlaid as a decorative element. The grade data is parsed as numbers before being mapped to the horizontal axis.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js workflow in VizHub, loading a small CSV dataset that maps student names to exam grades. It uses `d3.csv` to fetch the data and logs the parsed array to the browser console within a `render` function, while the page itself remains visually empty aside from an empty `#chart` container. The code styles the body with an Ubuntu font and large text, but performs no chart rendering or DOM manipulation beyond data loading.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

This example uses D3.js version 5 to display a single centered text message. The code imports the `select` function from D3 and a custom message from a local module, then applies that text to an HTML div. The page’s styling comes from an external stylesheet that sets a dark blue background, white text, and the Ubuntu font. The visualization demonstrates basic DOM manipulation with D3, importing local modules, and combining external CSS with library-driven updates.

Sep 27, 2019
Loading thumbnail…

bar chart

This bar chart visualizes the VALUE column (counts of facilities) for nine U.S. states from a CSV data file, with states on the y-axis and values on the x-axis. Using D3 v5, the code employs `d3.scaleLinear` and `d3.scaleBand` to map data, and renders the chart as SVG rectangles. A bottom axis is generated via `d3.axisBottom`, and the chart uses the first color from a predefined color array. The data is loaded asynchronously with `d3.csv` and parsed to numeric values.

Sep 27, 2019
Loading thumbnail…

bar chart

This example shows a horizontal bar chart comparing the VALUE of an unspecified indicator across several US states, with each bar labeled by state name. It loads data from a CSV file and uses D3 v5’s `scaleLinear` and `scaleBand` to map values and state categories to SVG rectangles. The chart renders with green bars, and an axis is generated using `d3.axisBottom`. The SVG output is driven by D3 selections and a simple data-join pattern.

Sep 27, 2019
Loading thumbnail…

bar chart

This example displays a horizontal bar chart comparing state values from a CSV dataset. The chart uses D3 v5 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, and `axisBottom` to map state abbreviations to proportional bar widths along an x-axis. Bars are rendered as SVG rectangles with fixed color fills, while the axis label appears at the bottom. The data source is a local CSV file containing state statistical indicators for 2004.

Sep 27, 2019
Loading thumbnail…

Hello VizHub

This example displays a static, full-screen message reading “Hello VizHub” in large Ubuntu type against a dark blue background. It demonstrates the basic structure of a VizHub project, separating HTML structure, CSS styling, and JavaScript logic into distinct files. The visualization uses the D3.js library (version 5.9.1) loaded via a CDN script tag, with the main message stored and rendered through a dedicated module. The code does not include interactive or animated behavior, focusing instead on a clean, minimal setup for displaying text content.

Sep 26, 2019
Loading thumbnail…

bar chart

This bar chart example demonstrates how to visualize state-level healthcare data from a CSV file, showing the raw facility counts for each state. Using D3 v5 with SVG rendering, the code loads the data via `d3.csv` and prepares it for display, though the full bar chart rendering is not yet implemented. The example also includes sample city population data and utility modules for colors, showcasing the structure of a VizHub project with ES6 module imports.

Sep 26, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how to import and manipulate JSON data within a D3.js module-based visualization, sorting city populations in ascending order and formatting a text list. It showcases ES6 module imports for local data files and a color array, alongside global D3.js v5 usage. The SVG element is populated via D3, while styles apply the Ubuntu font and large text. The code references `d3.min.js` from unpkg and exports parsed JSON objects like `cities2` and `p`.

Sep 26, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a simple text-based data visualization where city population data is sorted, formatted, and displayed as a list. It uses D3.js and ES6 modules to import and process data from a JSON array. The cities are sorted in ascending order by population using the sort method, then mapped to a readable string format. The formatted output is inserted into a pre element using the DOM API, with styling applied via an Ubuntu font from Google Fonts.

Sep 26, 2019
Loading thumbnail…

Hello VizHub

This example displays a formatted list of five US cities sorted by population, rendered as text on a dark background using D3 v5 and custom ES6 modules. It imports and parses JSON data from `cities.js` and `person.js`, sorts the city objects by population with JavaScript’s `sort()` method, and maps them to a readable string using template literals. The page uses the Ubuntu font from Google Fonts, and the text content is injected into a `<pre>` element via `document.getElementById`. The code demonstrates loading data, sorting, and basic DOM manipulation within a VizHub project.

Sep 26, 2019
Loading thumbnail…

Glenn Henshaw

This example is a minimal demonstration of ES6 module imports and DOM text insertion within a VizHub project. It displays a single, hardcoded string, "test," in a large white font against a dark blue background. The code defines and exports variables from separate modules, including `cities.js` and `nexttest.js`, though it does not use them for display. It relies on native JavaScript module syntax and the d3.v5 library for its CDN link, while styling is handled with CSS from Google Fonts.

Sep 26, 2019
Loading thumbnail…

Glenn Henshaw

This example displays the text “Hello VizHub!” centered on a dark blue background, demonstrating the basic structure of a VizHub project. The visualization uses D3.js v5 and ES6 modules to separate the message string from the main logic. The `index.js` file imports the message from `myMessage.js` and writes it into a `<pre>` element with `textContent`. Styling relies on custom CSS that imports the Ubuntu font from Google Fonts and sets a large font size for dramatic presentation.

Sep 26, 2019