Narong

@narongchongthom·5 public vizzes

Hello VizHub

This example demonstrates asynchronous data loading and text generation. It fetches a hardcoded JSON array of car objects using a custom Promise-based `getCars` function, then filters and formats entries under a price threshold with `generateReport` and `formatCar`, displaying the result in a `<pre>` element. The page initializes with a “Loading….” message, then updates to the report. It uses ES6 modules, template literals, and D3 v5 from a CDN, though no D3-specific visualization APIs are invoked.

Dec 12, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a simple line chart rendered as an SVG path, using D3.js v5 to map a small dataset of three coordinate pairs. The visualization focuses on the basic pipeline of D3's `line` generator and `select` API to draw the polyline directly onto a dark, styled background. Data is hardcoded in the JavaScript source, with the SVG output embedded in the page and the D3 library loaded from a CDN. The sketch exemplifies minimal setup for generating vector graphics with D3.

Dec 12, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js v5 for simple data processing and display. It presents a hardcoded list of ten athletes with their sport, nation, and earnings, then computes the mean earnings using D3’s `mean` function while logging the result to the console. The page itself displays the static message “Hello VizHub!” inside a div, styled with a large Ubuntu font and dark blue background from an external stylesheet. The code imports `select`, `group`, and `mean` from D3, and a custom message from a local module.

Dec 9, 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, with values derived from the data.csv file. The visualization emphasizes customized D3 v5 axes: the y-axis strips its domain and tick lines for a cleaner look, while the x-axis formats tick labels (converting G to B) and extends tick lines across the chart. The implementation uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`.

Nov 26, 2019

Loading thumbnail…

Hello VizHub

This example displays a simple bar chart of four numeric values rendered as SVG rectangles with red value labels. The visualization demonstrates basic D3 data joins using `selectAll`, `data`, and `enter` to bind an array of numbers to shapes. It also illustrates the use of ES6 modules through an imported `message` constant that sets the page heading, while the chart itself uses D3’s selection and attribute methods to position and size elements dynamically. The styling comes from the included CSS file with the Ubuntu font.

Nov 21, 2019