Skip to main content
Log in
L

LM2020

@LM2020·11 public vizzes

Loading thumbnail…

Custermizing Axis

This example presents a horizontal bar chart of 2018 country populations, sourced from Wikipedia statistics, with values scaled in thousands. It demonstrates axis customization by removing tick lines and domain paths from both the left and bottom axes. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisLeft` and `d3.axisBottom` for axes, and formats tick labels with `d3.format('.3s')` to abbreviate large numbers. Rectangles are appended to an SVG group, with text drawn on screen.

Sep 4, 2019
Loading thumbnail…

Auto MPG Summary

This example displays a text-based summary of the Auto MPG dataset, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows as pretty-printed JSON. The page uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data from a VizHub-hosted CSV file, while `select` and `append` build the `<pre>` elements. The black background and green monospace text create a terminal-like aesthetic for the output.

Sep 4, 2019
Loading thumbnail…

A Bar Chart

This visualization displays the populations of the ten most populous countries as horizontal bars, sorted by rank with China leading and Germany last. The bars are rendered in steel blue within an SVG canvas using D3.js version 5. The code employs `d3.csv` to load the data, `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. Population values are converted from thousands to full numbers via multiplication by 1000.

Sep 4, 2019
Loading thumbnail…

A Bar Chart

The bar chart displays population estimates for ten countries, using horizontal bars to compare values from China down to Mexico. The visualization encodes population on the x-axis and country names on the y-axis, with steelblue rectangles sized proportionally to each nation’s population. It uses D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes, while the data is loaded from a CSV file and rendered as SVG. The chart’s width and height are read directly from the SVG element’s attributes.

Sep 4, 2019
Loading thumbnail…

Lets make a face

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

Sep 3, 2019
Loading thumbnail…

Lets make a face

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

Sep 3, 2019
Loading thumbnail…

Lets make a face

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

Sep 3, 2019
Loading thumbnail…

Shapes with SVG and CSS

A small SVG canvas displays primitive shapes—circles, rectangles, a line, and a path—arranged in groups. The first two shapes use default black styling, while the next pair applies explicit fill colors (red and a green RGB value). A translated group demonstrates inherited fill and stroke attributes, and a classed group with thick black strokes contains a light-blue path with rounded line joins. The example shows how SVG presentation attributes and CSS rules (via the `.lines` class and element selectors) control appearance, with an SVG transform scaling the entire composition.

Sep 3, 2019
Loading thumbnail…

HTML Cars Report

This example presents a simple HTML cars report listing three used vehicles with their prices. The page uses static HTML and CSS, with no JavaScript or external charting libraries. The styling displays the list in a large monospace font and highlights the first car—the 2012 Nissan Leaf—in red through the `.highlighted` class. The rendering relies entirely on the browser’s native HTML structure, with no interactive or dynamic data-binding features.

Sep 3, 2019
Loading thumbnail…

Cars Report

This example demonstrates a static text display featuring the message "Hello VizHub!" rendered on a dark blue background with Ubuntu font styling. The visualization loads car data asynchronously from a hardcoded JSON array via a Promise with a simulated two-second delay, though the data is not currently visualized. The code uses ES6 modules, including `getCars` from `cars.js` and `message` from `myMessage.js`, with `index.js` importing the message and setting it into a `<pre>` element. Styling is handled through CSS, and the page structure is defined in `index.html`. The example highlights asynchronous data fetching and modular JavaScript organization.

Sep 3, 2019
Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” prominently in the center of a dark blue page, styled with the Ubuntu font. The visualization demonstrates a minimal D3.js setup, using the `select` API to target an HTML element and set its text content. The message itself is defined in a separate ES6 module, which is imported into the main script, showcasing modular code organization. The page relies on a CSS file for visual styling and pulls D3 version 5.9.1 from a CDN.

Sep 3, 2019