H

hugomell

@hugomell·27 public vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how color and size can encode categorical differences in data, using a simple fruit bowl visualization. It shows apples and lemons as circles, where color distinguishes fruit type and radius encodes size, with legends implied through the shapes themselves. The code uses d3.scaleOrdinal for both color and radius mappings, and builds the SVG scene with d3-selection methods. The visualization is rendered using D3 v5, with fruit data drawn as circles and text labels inside a rounded rect bowl.

Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion. The tree layout renders the data as a branching diagram, with each node labeled by its geographic name. The visualization uses D3 v5's `tree` and `hierarchy` functions to compute the layout, and `linkHorizontal` to draw the connecting paths. Users can pan and zoom the SVG canvas using D3's `zoom` behavior. The data describes countries grouped under regions like Asia, which is further divided into subregions such as Southern and Western Asia.

Loading thumbnail…

Blank canvas

A blank, full-viewport SVG rectangle with rounded corners fills the browser window. The visualization demonstrates the minimal setup for a Vizhub project using D3 v5, with the page dimensions retrieved from `document.body.clientWidth` and `document.body.clientHeight`. The code selects the SVG element via `d3.select`, sets its width and height attributes, and appends a single `rect` element with a 40-pixel corner radius. Styling is handled with fixed positioning and hidden overflow in the page’s CSS.

Loading thumbnail…

Cheap Tricks for interaction

This example shows an interactive world map visualization that renders countries as light green polygons on a blue sphere. Hovering over any country changes its fill color to red and displays the nation’s name via a tooltip. The map is built using D3 (d3.v5) with d3.geoPath and a d3.geoNaturalEarth1 projection, combining TopoJSON and TSV data from the world-atlas package. User interaction is enhanced by d3.zoom, enabling pan and zoom transformations on the SVG group.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a map of the world’s countries drawn as a blue sphere with light green landmasses and subtle black borders. It uses D3.js’s `geoNaturalEarth1` projection and `geoPath` to render the globe, with country boundaries from the world-atlas TopoJSON dataset. The page loads topographic data via `topojson.feature`, appends a path for the sphere, then binds country features to SVG paths. The visualization demonstrates the minimal structure of a Vizhub project with D3 v5 and SVG rendering.

Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles representing fruit transition and scale into place in a bowl, with apples and lemons distinguished by color and radius. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouse-out. The visualization uses D3 v5’s selection merge, transition, and scaleOrdinal APIs to animate enter, update, and exit states as fruits are removed or replaced.

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing apples and lemons transition in size as the data updates, with click selection highlighting the chosen fruit with a black stroke. The D3.js v5 code uses a data join with enter, update, and exit selections, applying ordinal scales for color and radius. A one-second transition animates circle radius and x-position changes, while a timer updates the array by removing and modifying fruit types.

Loading thumbnail…

Bowl of fruit - Nested Elements

A bowl of fruit demonstrates nested SVG elements with a dynamic data join, showing apples and lemons arranged in a row. The visualization uses a D3 ordinal scale to map fruit types to colors and radii, while enter, update, and exit selections manage the transitions as fruits are eaten or replaced over time. Circles and text labels are appended within each group element, and the bowl is drawn as a rounded rectangle behind the fruit.

Loading thumbnail…

Bowl of fruit - General Update Pattern

A bowl of fruit demonstrates the general update pattern for data joins in D3. Five apples render as circles, then transition through a series of timed changes: one apple is removed, a second is replaced by a lemon, and another is eaten. The example uses `selection.data`, `merge`, and `exit().remove()` to handle entering, updating, and exiting elements. Color and size are mapped through ordinal scales, with SVG circles positioned by an index-based function.

Loading thumbnail…

Bowl of fruit - General Update Pattern with transitions

A dynamic bowl of fruit demonstrates the General Update Pattern, showing circles appearing as apples, changing type to lemons, and disappearing over time. The visualization uses D3 v5's data join with object constancy via the `id` key, merging enter and update selections. Smooth transitions animate circle radii and x-positions over one second, while exit selections shrink to zero before removal. The `scaleOrdinal` scales map fruit types to colors and sizes for the SVG rendering.

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth over time, mapping yearly population counts to a filled curve with a smooth basis interpolation. The SVG rendering uses D3 v5 scales—`scaleTime` for the temporal x-axis and `scaleLinear` for population values—with axes generated via `axisBottom` and `axisLeft`. Data loads from a CSV file using `d3.csv`, and the `area` generator with `curveBasis` creates the shaded region. The chart includes formatted tick labels (e.g., abbreviating billions) and styled axis annotations.

Loading thumbnail…

Temperature in San Francisco Area Chart

This example shows a week of temperature readings in San Francisco as a smooth area chart, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `area` generator with a `curveBasis` interpolation to create the filled, curved shape, while `scaleTime` and `scaleLinear` map the data. Axes are rendered with `axisBottom` and `axisLeft`, and the data is loaded from a CSV using `d3.csv`.

Loading thumbnail…

Temperature in San Francisco Line Chart

This example shows a line chart of temperature readings over a week in San Francisco, rendered as an SVG using D3 v5. The chart plots timestamps on the x-axis and temperature on the y-axis, with a smooth basis-curve line and labeled axes. It loads CSV data from a remote URL, parses the timestamp strings into Date objects, and applies a time scale for the x-axis and a linear scale for the y-axis. The visualization uses `d3.select`, `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` with a basis curve to draw the smooth path, styled with a steelblue stroke.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Circles represent individual data points, plotted using `d3.scaleTime` and `d3.scaleLinear`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a CSV file via `d3.csv` and rendered as SVG. The chart includes labeled axes, a title, and grid lines created by tick sizes.

Loading thumbnail…

Cars Data Set

This scatterplot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The chart uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and gridlines. Data is loaded via `csv` from a remote URL, and the code explicitly parses numeric fields before rendering. Points are plotted using `selectAll` and `enter().append('circle')`, with semi-transparent steelblue fills to show overlapping density.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the population of the world's most populous countries, using a logarithmic scale for the x-axis and a categorical y-axis for country names. The visualization is rendered using D3 version 5 and builds a scatter plot with circles positioned by population values, which are read from a local CSV file. The chart includes axis labels, a title, and gridlines, with the code utilizing D3's `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` APIs to construct the scales and axes, all rendered as SVG elements.

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the world’s ten most populous countries, with a customized axis layout. It uses d3.csv to load population data, then applies d3.scaleBand and d3.scaleLinear to map countries and values, and d3.axisLeft plus d3.axisBottom to render the axes. The x-axis ticks are formatted with d3.format and custom labels, while grid lines extend across the chart.

Loading thumbnail…

Making a bar chart

This bar chart displays the populations of nine countries, with horizontal bars ranked from China to Russia. The visualization uses D3 v5 to load CSV data and render SVG elements. It applies `scaleLinear` for the x-axis population values and `scaleBand` for the categorical y-axis, with margins and axes created via `axisLeft` and `axisBottom`. The bars are appended as `rect` elements with a steelblue fill, and the data is parsed by converting population strings to numbers and multiplying by 1000.

Loading thumbnail…

Make a bar chart

This example presents a minimal bar chart scaffold in a blank SVG canvas. It demonstrates the foundational structure of a Vizhub visualization, using d3.select to access the SVG element and dynamically retrieving its width and height attributes. The code sets up the basic HTML document with a linked stylesheet and loads D3 v5 from a CDN, while the JavaScript initializes the chart dimensions for future rendering.

Loading thumbnail…

Exo let's make a face

A yellow circle face with black eyes, eyebrows, and a curved mouth is centered on an SVG canvas. The eyebrows animate upward and back downward in a repeated two-second transition using d3’s `transition().duration()`. The code constructs the face with d3 selections, an `arc()` generator for the mouth, and SVG elements like `circle` and `rect`, all grouped and transformed based on configurable constants for eye spacing and offsets.

Loading thumbnail…

Let's make a face with D3.js!

This example draws a simple, animated face entirely with D3.js v5 and SVG primitives. A yellow circle forms the head, with black circles for eyes and a path created using `d3.arc` for the mouth. The eyebrows are rectangles that animate up and down using chained `transition` calls, each with a 2000-millisecond duration, demonstrating basic declarative animation. The code uses `d3.select` and `d3.append` to build the SVG structure, and the rendering is fully vector-based.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG and style them with CSS. Circles and rectangles are drawn with varying fill colors and stroke properties, while a group of lines and a path illustrate coordinate-based drawing. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, with CSS rules in `styles.css` controlling stroke width, color, and line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `transform` attribute.

Loading thumbnail…

HTML Cars Report

This example displays a simple car report as a static HTML list, showing three vehicle entries with their years, makes, models, and prices. The first item, a 2012 Nissan Leaf, is highlighted in red to draw attention. The page uses plain HTML with an unordered list, styled by a separate CSS stylesheet that sets a large monospace font and applies the red highlight through a `.highlighted` class. No JavaScript or data libraries are involved; the content is hardcoded directly in the HTML.

Loading thumbnail…

Cars Report with Promises

This example demonstrates asynchronous data handling by displaying a filtered list of cars below a price threshold. A loading message appears first, then after a two-second delay, the report renders in large text. The code uses JavaScript Promises with `getCars` and `setTimeout` to simulate a delayed API response, while `generateReport` chains `filter`, `map`, and `join` operations to format car details from a hardcoded JSON array. The `formatCar` module constructs each line.

Loading thumbnail…

Dataviz Course - Cars Report

This example demonstrates a simple text-based data report that filters and formats car listings by price. It initially displays “Loading...” before fetching car data asynchronously, then outputs a formatted list of vehicles under a $2,000 price threshold. The code uses JavaScript modules with ES6 import/export syntax, a Promise-based `getCars` function with a simulated 2-second delay, and array methods like `filter`, `map`, and `join` to generate the final report. The data source is a hardcoded JSON array of five car objects, rendered directly into the page’s `<pre>` element via the DOM API.

Loading thumbnail…

Cars Report

This example shows a filtered list of used cars, displaying each car’s year, make, model, and price. It uses JavaScript’s array methods `filter()`, `map()`, and `join()` in a custom `generateReport` function to select cars under a price threshold and format them via `formatCar`. The car data is stored as a JSON string, parsed with `JSON.parse`, and the resulting report is rendered into an HTML `<pre>` element using `document.getElementById().textContent`. The tutorial demonstrates modular ES6 exports and imports across separate files.

Loading thumbnail…

Minimal Vizhub Example

This minimal example demonstrates the simplest possible Vizhub visualization, displaying the text “Hello world!” in a preformatted element. It uses a static string variable defined in JavaScript and updates the page by targeting the `message-element` ID with `document.getElementById`. The project renders through a basic HTML structure with a linked `bundle.js` script, showing how a raw JavaScript file can drive DOM manipulation without external libraries.