pengpenghub

@pengpenghub·9 public vizzes

Customizing Axes

This visualization displays the population of the top 10 most populous countries as a horizontal bar chart, using D3 v5 with an SVG rendering. It customizes both axes by removing default domain lines, applying a tick format that converts values to abbreviations like "B" for billions, and adding a custom axis label. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` and `d3.axisBottom` to render ticks. Data is loaded from a CSV file, with population values scaled by 1000.

Mar 9, 2020

Loading thumbnail…

Making a bar Chart

This example shows a horizontal bar chart of country populations, ranking ten nations from China to Mexico using data loaded from a CSV file. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to render axes as SVG. Population values are read as strings and multiplied by 1000 before being mapped to bar widths. Bars are appended as `rect` elements within a translated group, styled with steelblue fills via external CSS.

Mar 8, 2020

Loading thumbnail…

let's make a face with d3.js

A yellow face with two eyes, animated eyebrows, and a mouth is drawn in SVG using D3 v5. The face is centered within a fixed 960x500 canvas, with circles for the head and eyes, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrows animate vertically via chained `transition` calls over 2000ms each, using `attr` to update the transform. The code imports `select` and `arc` from D3 and builds the visual entirely with SVG elements.

Mar 8, 2020

Loading thumbnail…

let's make a face with d3.js

Mar 8, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and an external CSS stylesheet. It shows how fill, stroke, and stroke-width properties apply differently when set directly on elements versus via CSS classes. The code uses raw SVG markup within an HTML page, with a CSS rule targeting the `.lines` group to apply consistent styling, including a rounded line join for the path.

Mar 5, 2020

Loading thumbnail…

HTML Cars Report

This example renders a simple HTML-based cars report as a static list. It displays three used car entries with model, year, and price, using plain HTML elements and CSS for styling, with the first item highlighted in red. The page relies on standard HTML markup inside a single `index.html` file and a linked `style.css` stylesheet, both loaded directly in the browser without any JavaScript frameworks or data libraries. The content is hardcoded, not fetched from an external data source, and the rendering approach is purely document-based with no dynamic visualization or charting APIs.

Mar 5, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates how to create a minimal D3.js visualization within the VizHub environment. It renders the text “Hello VizHub!” to a web page by selecting a `div` element with `d3.select` and setting its text content. The code imports the `select` function directly from the D3 v5 library and also uses an ES6 module, `myMessage.js`, to supply the string. Styling comes from an external CSS file, with the message displayed in large, centered type.

Mar 5, 2020

Loading thumbnail…

cars reports

This example displays a single car make—Ford—as large text extracted from a small inline JSON dataset of five used cars. The data is loaded from `cars.js`, where the JSON string is parsed into an array and exported. `index.js` selects the third car object and assigns its `make` property to the text content of a `<pre>` element via `document.getElementById`. The page renders this result in a 3em font, demonstrating basic data binding and DOM manipulation without external libraries.

Mar 5, 2020

Loading thumbnail…

cars reports

This visualization displays the make of the first car in a static JSON dataset, rendering “Honda” in large text within a preformatted HTML element. It loads car records from an embedded array using ES module export and JSON parsing, then writes the value to the DOM via `getElementById`. The example uses no external libraries, relying solely on vanilla JavaScript with `document.getElementById` and `textContent` for output.

Mar 5, 2020