Skip to main content
Log in
H

HelenaShu

@HelenaShu·30 public vizzes

Loading thumbnail…

World Countries Tree

A hierarchical tree visualization displays the world's countries organized by continent and subregion using a JSON dataset. The layout uses the `d3.tree` API to compute node positions across the full SVG canvas, with a rounded background rectangle. D3 v5 handles data loading via `json` and selection/appending of SVG elements. The interactive structure is static, showing only the initial tree layout without zoom or collapse functionality.

Oct 9, 2019
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of five apples is rendered as SVG circles, and hovering over a fruit highlights it with a black stroke while clearing the selection on mouseout. The visualization animates state changes over time as apples are removed or replaced with lemons, using smooth transitions to shrink exiting circles and resize new ones. Built with D3 v5, it employs `scaleOrdinal` for color and radius mapping, data joins with key functions, and transition methods to update circle positions and sizes across a 960 by 500 canvas.

Oct 9, 2019
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

Oct 9, 2019
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport as the sole visual element. The piece demonstrates a minimalist SVG canvas setup using D3 v5, where the `d3.select` method targets the empty `<svg>` element and sets its dimensions to match the viewport's client width and height. A single `rect` is appended with a 40-pixel corner radius, creating a simple framed shape against the white background. The fixed-position CSS ensures the canvas remains stable within the browser window.

Sep 6, 2019
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where hovering highlights countries in red against a light green base, with zoom and pan enabled for exploration. The visualization uses D3 v5 with a Natural Earth projection (d3.geoNaturalEarth1) and d3.geoPath to render country boundaries from TopoJSON world atlas data, linked to country names via TSV metadata. Interactions rely on d3.zoom for panning and zooming, while CSS :hover rules change country fill colors. The SVG-based map includes a blue sphere background, and the code loads data using Promise.all with d3.json and d3.tsv.

Sep 6, 2019
Loading thumbnail…

Lets make a map with D3.js

This example demonstrates an interactive world map where each country is a clickable path element, with country names available as tooltips on hover. The visualization uses D3.js v5 with the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from the world-atlas TopoJSON and TSV datasets, which supply the country shapes and names. The map supports zooming and panning via the `d3.zoom` module, which updates the SVG group's transform attribute. Country hover states change fill color to red, highlighting the selected nation.

Sep 6, 2019
Loading thumbnail…

Lets make a face with D3.js

This example builds a smiling face entirely from basic SVG shapes—circles for the head, eyes, and mouth, and rectangles for the eyebrows—using D3.js v5 selections and attribute setters. The code appends each element to an SVG canvas sized 960 by 500, positioning them relative to the viewport center. A transition on the right eyebrow animates it upward and back down over four seconds, demonstrating D3’s `transition().duration()` method for simple motion.

Sep 4, 2019
Loading thumbnail…

Bowl of Fruit - General Update Pattern .js

Five apples render as circles in an SVG bowl, then transition through a sequence of state changes: an apple is removed, another apple transforms into a lemon, and a third apple disappears. The example demonstrates D3’s general update pattern using `selection.data()`, `enter`, `merge`, and `exit` selections, with `transition().duration()` animating circle radii and positions. Ordinal scales map fruit type to fill color and radius, while each fruit’s unique `id` keys the data join. Random IDs from `Math.random()` generate the dataset.

Sep 4, 2019
Loading thumbnail…

Bowl of Fruit - General Update Pattern .js

This example demonstrates D3's general update pattern by showing a bowl of fruit that changes over time. Apples and lemons render as SVG circles with distinct colors and radii via `scaleOrdinal` color and radius scales. The `fruitBowl` function binds fruit data to circle and text elements, using `enter`, `merge`, and `exit` selections to handle additions, updates, and removals. Timed `setTimeout` callbacks trigger transitions by eating apples, replacing one with a lemon, and filtering data.

Sep 4, 2019
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population trends over time, with time on the x-axis and population on the y-axis, rendered as a maroon-filled SVG path. The chart uses a time scale, linear scale, and the `area` generator with `curveBasis` to create the smooth shape, while `axisBottom` and `axisLeft` provide labeled ticks. Population values are formatted with abbreviations, and the data comes from a CSV file listing population by year.

Sep 1, 2019
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City initiative. The chart plots temperature values against time, with a smooth curve through the data points. The visualization uses the D3.js library (v5) with an SVG rendering approach, employing the `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` APIs to construct the chart, axes, and filled area under the curve. The data is loaded from a CSV file and transformed before rendering.

Sep 1, 2019
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature readings in San Francisco, displaying each data point as a circle positioned by time on the x-axis and temperature on the y-axis. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, with `axisBottom` and `axisLeft` for ticks, and renders via SVG. Data is loaded from a CSV file hosted at vizhub.com, featuring a steelblue circle fill and custom tick styling from the accompanying stylesheet.

Sep 1, 2019
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays one week of temperature data from San Francisco, using data from Data Canvas - Sense Your City. The visualization plots temperature against time, with a smooth curve filled in maroon, using D3 v5’s `area` and `curveBasis` APIs. It renders as SVG, with axes, tick marks, and labels styled via CSS. The chart’s title and axis labels are generated dynamically, while the timestamp and temperature values are parsed from a CSV dataset.

Aug 31, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. It uses time on the x-axis and temperature on the y-axis, with a smooth curved line drawn using d3.line and curveBasis. The chart is rendered as SVG, with axes created via d3.axisBottom and d3.axisLeft. Data is loaded from a CSV file, parsed, and scaled using d3.scaleTime and d3.scaleLinear.

Aug 31, 2019
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization displays circles positioned by timestamp and temperature values, using a time scale and linear scale respectively. The code imports specific d3 functions including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `csv` from d3.v5. The data is loaded from a remote CSV file and rendered as an SVG with axes, tick marks, and axis labels.

Aug 31, 2019
Loading thumbnail…

Scatter Plot

This scatter plot displays population figures for African regions, with countries on the y-axis and population values on the x-axis. The chart uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis, and d3.axisBottom and d3.axisLeft to render grid lines. Circles are appended to an SVG with a fixed radius of 20 and fill color from CSS. Axis labels and a title are added manually via appended text elements.

Aug 31, 2019
Loading thumbnail…

Scatter Plot

This scatter plot displays country populations across Africa, using a point scale for countries on the y-axis and a linear scale for population on the x-axis. The code loads data from a CSV file using `d3.csv`, then renders circles with `d3.scaleLinear` and `d3.scalePoint`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, including gridlines and custom labels, while the SVG output is styled via CSS.

Aug 30, 2019
Loading thumbnail…

Making a bar chart

This horizontal bar chart displays population figures for African regions, using bars scaled by population size. Built with D3 v5, it employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisBottom` and `axisLeft` to render axes. Data is loaded from a CSV file via `csv`, and the SVG output is styled with steelblue bars and custom tick labels. The chart includes axis labels and a title, with margins calculated from the SVG’s width and height.

Aug 30, 2019
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population figures for regions in Africa. It uses D3 v5 to load the CSV data and render SVG rectangles, with a linear scale for population values and a band scale for country names. Axes are generated using `axisLeft` and `axisBottom`, and a margin-based layout positions the chart within the SVG canvas. The bars are styled with a steelblue fill via CSS.

Aug 27, 2019
Loading thumbnail…

Lets make a face with D3.js

This example generates a simple face using D3.js, beginning with a single circle element created via `svg.append('circle')` and positioned using the SVG attributes `cx` and `cy`. The circle is centered on the canvas by dividing the SVG’s `height` and `width` attributes in half, styled with a radius of 200. The visualization demonstrates basic D3.js DOM manipulation and SVG rendering within a 960 by 500 pixel space, with a minimal stylesheet that removes margins and hides overflow.

Aug 25, 2019
Loading thumbnail…

Lets make a face with D3.js

This example draws a static face using D3.js version 5 within an SVG canvas. The code selects the SVG element and appends a single circle, setting its radius to 200 pixels and centering it based on the SVG’s height and width attributes. The rendering relies on D3’s selection and attribute methods, with a simple stylesheet providing a full-bleed layout. The visualization demonstrates basic SVG shape creation through D3’s imperative API, using no external data sources.

Aug 25, 2019
Loading thumbnail…

Lets make a face with D3.js

This example generates a simple face using D3.js, beginning with a single circle element created via `svg.append('circle')` and positioned using the SVG attributes `cx` and `cy`. The circle is centered on the canvas by dividing the SVG’s `height` and `width` attributes in half, styled with a radius of 200. The visualization demonstrates basic D3.js DOM manipulation and SVG rendering within a 960 by 500 pixel space, with a minimal stylesheet that removes margins and hides overflow.

Aug 24, 2019
Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js v5 to draw a simple face on an SVG canvas. The sketch places a single large circle at the center of a 960 by 500 pixel viewport using the `svg.append` and `circle.attr` methods, setting its radius to 200 pixels. The visualization demonstrates basic SVG shape creation and attribute manipulation with D3, though only the foundational head element is rendered in the provided code.

Aug 23, 2019
Loading thumbnail…

Shapes with SVG and CCS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS properties like fill and stroke. It uses static SVG markup within an HTML file, with a third set of shapes grouped under a transformation and stroke styles. The code also builds a text report by filtering car data with `generateReport` and formatting entries via `formatCar`, though the resulting message is not visibly rendered on the page.

Aug 23, 2019
Loading thumbnail…

Hello VizHub

A minimal D3.js example demonstrates how to render text inside an HTML page using the `select` API. The code imports a message from a local ES6 module and sets it as the content of a `div` element. The page uses a dark blue background with large, centered Ubuntu font from Google Fonts. This simple template shows standard VizHub project structure with separate files for JavaScript, markup, styles, and reusable modules.

Aug 23, 2019
Loading thumbnail…

Shapes with SVG and CCS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS properties like fill and stroke. It uses static SVG markup within an HTML file, with a third set of shapes grouped under a transformation and stroke styles. The code also builds a text report by filtering car data with `generateReport` and formatting entries via `formatCar`, though the resulting message is not visibly rendered on the page.

Aug 21, 2019
Loading thumbnail…

Car Report

This example demonstrates a simple report generator for used cars, showing a filtered list of vehicles priced below a threshold. Using the D3 data-join pattern (though no D3 is imported), it parses hardcoded JSON car data via `JSON.parse` and applies a custom `generateReport` function that filters by price and formats each entry with the `formatCar` helper. The resulting text is injected into the page through `document.getElementById`, while basic CSS styles handle font size and color for static list items.

Aug 21, 2019
Loading thumbnail…

Cars Report

This example displays a loading message and then presents a text-based car report listing vehicle years, makes, models, and prices, with the year 2000 highlighted in red. It uses a JavaScript Promise (`getCars`) with a simulated two-second delay to asynchronously fetch hardcoded JSON data, then renders the report via DOM text manipulation (`textContent`). The styling relies on CSS classes (`highlighted`) and a monospace font for a terminal-like aesthetic.

Aug 20, 2019
Loading thumbnail…

hello zerkhi

This example demonstrates how to import and display a text message from an external JavaScript module. The `index.js` file imports `bikejson` from `bikes.js`, which exports a string variable, and injects it into the `#me-po` element using the DOM API `document.getElementById` and the `textContent` property. The message is rendered in large, 7em font size via inline styling. The visualization shows a simple text output where data flows from a module export to the page, highlighting basic module import and DOM manipulation without any additional libraries or data processing.

Aug 19, 2019
Loading thumbnail…

hello zerkhi

This example demonstrates how to import and display a text message from an external JavaScript module. The `index.js` file imports `bikejson` from `bikes.js`, which exports a string variable, and injects it into the `#me-po` element using the DOM API `document.getElementById` and the `textContent` property. The message is rendered in large, 7em font size via inline styling. The visualization shows a simple text output where data flows from a module export to the page, highlighting basic module import and DOM manipulation without any additional libraries or data processing.

Aug 18, 2019