Skip to main content
Log in
A

Areum Jo

@areumjo·9 public vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, using data from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, with position determined by its horsepower (x-axis) and weight (y-axis). The code uses d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and d3.csv to load the external data. SVG circles are rendered semi-transparent red, with axis labels and a title added via D3 selections.

Oct 12, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It highlights axis customization, including formatted tick labels, removed domain lines, and custom text for the title and axis label. The code uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`. The SVG render pulls data from a CSV, scaling population values by 1,000 for display.

Oct 12, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiling face composed of SVG shapes demonstrates D3.js fundamentals by animating its eyebrows upward and downward in a looping sequence. The code builds the face using `d3.select`, `d3.arc`, and chained `transition` calls on SVG elements like circles, rectangles, and a path for the mouth. Eyebrow motion is achieved through attribute transformations applied over two-second durations, while the static face relies on hardcoded numeric values for positioning and sizing. The rendering is entirely SVG-based, with no external data source.

Oct 12, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiling face composed of SVG shapes demonstrates D3.js fundamentals by animating its eyebrows upward and downward in a looping sequence. The code builds the face using `d3.select`, `d3.arc`, and chained `transition` calls on SVG elements like circles, rectangles, and a path for the mouth. Eyebrow motion is achieved through attribute transformations applied over two-second durations, while the static face relies on hardcoded numeric values for positioning and sizing. The rendering is entirely SVG-based, with no external data source.

Oct 12, 2019
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that centers the text “Hello HTML!” using a large font size. The page relies on plain HTML and CSS, with a `.message` class applying a 13em font size and text alignment. It serves as a bare-bones starter template, contrasting with the React-based counterpart in the VizHub gallery. No JavaScript libraries are used; the rendering is handled entirely by the browser’s default HTML and CSS engine.

Oct 11, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates primitive SVG shapes—circles, rectangles, lines, and paths—styled via inline attributes and CSS classes. The code renders shapes with explicit fills and strokes, then applies grouped transformations and stroke properties through class selectors. It uses SVG elements inside an HTML page, with CSS controlling appearance through classes like `.lines`. The visualization shows basic geometric composition, scaling, and translation without external libraries, relying purely on SVG markup and linked stylesheet rules.

Oct 11, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG elements—circles, rectangles, lines, and paths—with CSS styling applied to control fill colors, stroke properties, and grouping transforms. The rendering approach uses raw SVG markup within an HTML page, with a separate stylesheet defining classes like `.lines` to set stroke color and width on grouped elements. The code leverages native SVG attributes and CSS selectors to organize shapes into visually distinct groups, including one group where all elements share a common fill and stroke via inheritance. This illustrates the interplay between SVG’s coordinate system and CSS styling rules for graphical output.

Oct 11, 2019
Loading thumbnail…

Hello VX

This example shows a gradient-background chart combining violin plots with overlaid box plots for five groups of generated statistical data. The visualization uses `@vx/stats` components (`ViolinPlot`, `BoxPlot`) with scales from `@vx/scale`, and renders as SVG. Hovering over box plot elements triggers tooltips via `@vx/tooltip`, revealing min, max, or full quartile statistics. Data comes from `@vx/mock-data`’s `genStats` function, styled with `@vx/gradient` and `PatternLines`.

Oct 11, 2019
Loading thumbnail…

Hello VizHub

This example displays a single, centered message, "Hello VizHub!", in large white text against a dark blue background. It demonstrates VizHub’s support for modular ES6 code and external styling. The visualization uses D3.js’s `select` method to target a `<div>` and set its text content from a separate imported module, while a linked stylesheet applies the Ubuntu font and color scheme.

Oct 11, 2019