cliffng

@cliffng·4 public vizzes

Hello VizHub

This example demonstrates a browser-based word cloud visualization using the d3.js library. The code generates a set of words with randomized sizes and rotations, placing them within a canvas without overlap, and renders each word as an SVG text element. The visualization pairs this with a separate area chart that uses d3's stacked silhouette offset to display data from a raw CSV file, pulling yearly values for multiple categories from the GitHub-hosted dataset.

Nov 7, 2019

Loading thumbnail…

Hello VizHub

This example displays a streamgraph that visualizes numerical trends over time for multiple categorical groups, using a silhouette-style offset to show deviations from a central baseline. The chart is rendered as an SVG with D3 v4, where the data is loaded from a remote CSV file. The code uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.scaleOrdinal`, and `d3.stack` with the `stackOffsetSilhouette` method to create the layered area paths via `d3.area`. The page styling comes from an external stylesheet, and the visualization is embedded in a fixed-width SVG canvas.

Nov 7, 2019

Loading thumbnail…

Hello VizHub

A simple web page renders the text “Hello VizHub!” in large, centered white type against a dark navy background. It demonstrates VizHub’s ability to combine an HTML container, a CSS stylesheet with a Google Font, and an ES6 module that exports a string constant. Using D3.js’s `select` API, the JavaScript imports the message and sets the inner text of a `<div>` element. This example shows basic modular code organization and D3’s DOM manipulation in a minimal, single-purpose visualization.

Nov 7, 2019

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data in degrees Celsius across multiple global cities, sourced from Data Canvas - Sense Your City. The chart displays time on the x-axis and temperature on the y-axis, with each city represented by a distinct colored line using a categorical color scale. The visualization is rendered as an SVG using D3 v5, employing d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest for grouping data by city. A color legend is generated through a custom function that maps city names to their corresponding line colors.

Nov 7, 2019