jkmingwen

@jkmingwen·7 public vizzes

Making a scatterplot

This example shows a scatterplot of the top 10 most populous countries, with population on the x-axis and country names on the y-axis as categorical points. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to load data from a CSV file and render SVG circles. The y-axis uses a point scale with padding, while the x-axis is linear and formatted to abbreviate large numbers, with gridlines extending across the chart. Population values are multiplied by 1000 to reflect actual counts, and the chart includes labeled axes and a title.

Mar 9, 2021

Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the ten most populous countries, using a linear scale for population and a band scale for country names. It customizes the axes by removing the default axis lines, styling tick marks with a light gray color, and adding a formatted "Population" label using a custom tick format that abbreviates large numbers with "B" for billions. The left axis displays country names without tick lines, while the title sits above the plot. The code relies on D3 v6's `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` functions, rendering to an SVG canvas.

Mar 9, 2021

Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for the ten most populous countries, with horizontal bars ordered by country name. The visualization uses D3 v6 with SVG rendering, scaling population values linearly and country names on a band scale. Data is loaded from a CSV file and converted from thousands to absolute numbers. Axes are generated using d3.axisLeft and d3.axisBottom, while bars are appended as SVG rectangles with a steelblue fill.

Mar 9, 2021

Loading thumbnail…

Let's make a face with D3

A yellow circle forms a face, with two black eyes and a wide arc-shaped mouth. The eyebrows, rendered as rectangular bars, animate upward and then back down in a looping motion. Built with D3 v6, the visualization uses SVG elements and D3’s `transition()` method to adjust the eyebrow group’s transform attribute over two-second intervals. The face is centered using a translation on a group element, with the mouth created via the `arc()` generator.

Mar 7, 2021

Loading thumbnail…

Cars Report

This example displays a static “Hello world!” message inside a large `<pre>` element, with text loaded from a local ES6 module and set via `document.getElementById` in JavaScript. It demonstrates VizHub’s support for importing D3 and local modules, using `index.js` and `myMessage.js` to inject content into `index.html`. The page relies on a bundled `bundle.js` script and includes a `styles.css` rule that centers and enlarges the message text, though no dynamic data or visualization is present.

Mar 2, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of SVG shapes—circles, rectangles, lines, and a path—styled and positioned using CSS and SVG attributes. It shows how presentation properties like fill, stroke, stroke-width, and transforms (scale, translate) can be applied either through inline attributes or CSS classes, with the `.lines` class controlling the polyline’s appearance. The code uses plain HTML and CSS, with no JavaScript libraries, and renders within an SVG element on a fixed 960×500 canvas.

Mar 2, 2021

Loading thumbnail…

HTML Cars Report

This example displays a static HTML car report listing three used vehicles with their model years and prices. A red highlight emphasizes the first entry, a 2012 Nissan Leaf, through a CSS class selector. The page uses plain HTML for document structure, linking to an external stylesheet that applies monospace typography and large font sizing via the `body` selector. No JavaScript or data-binding libraries are involved; the content is hardcoded directly in the markup.

Mar 2, 2021