x900.cs11@nycu.edu.tw

@QQQQQuin·6 public vizzes

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 392 cars, with each vehicle represented as a red, semi-transparent circle. The visualization is built with D3 v5 and renders to SVG, using the `scaleLinear`, `axisBottom`, and `axisLeft` functions to construct the plot’s axes, complete with grid lines and rotated axis labels. Though the code is currently hardcoded to a single data point, the commented-out `csv` call indicates the intended source is the UCI Auto MPG dataset. The chart does not currently display the full dataset, only the one specified car model.

Sep 7, 2024

Loading thumbnail…

Fork of Simple Scatter Plot

This example demonstrates a scatter plot of the Penguins dataset, displaying bill length against flipper length for individual penguins. The visualization is rendered using D3.js primitives like `select` and `join` to create SVG elements, with scales and axes computed via `scaleLinear` and `axisLeft`. The plot includes labeled axes and a gray inner rectangle to frame the data points, which are drawn as semi-transparent circles. The code structure separates the rendering logic into a customizable `viz` function, making it easy to adapt the chart for other datasets.

Sep 7, 2024

Loading thumbnail…

Fork of Simple Bar Chart

This bar chart displays the top 10 most populous countries as of January 2024, using data from the @curran/un-population-estimates-2024 package. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with axis labels rendered via @curran/axis-labels. The code filters for country/area type entries, sorts by total population in descending order, and slices the top 10 records. Each bar’s height is computed using the y-scale, while the inner rectangle provides a light gray background for the plotting area.

Sep 7, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the foundational setup for VizHub V3, a runtime environment that supports continuous hot reloading through interactive widgets. It showcases basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline properties, serving as a minimal "Hello World" template. The code uses an exported `main` function from `index.js` that receives a container and options object, replacing the traditional `index.html` entry point. The visualization renders static SVG graphics with no dynamic data or interaction, highlighting the simple, blank-slate starting point for developers.

Sep 2, 2024

Loading thumbnail…

Fork of 1

This example demonstrates the VizHub V3 runtime environment using a static HTML report of used cars with a styled list and highlighted model. The `index.js` file contains commented-out code showing how to render dynamic content into a container using JavaScript string interpolation. The visible output is produced by `index.html` with styles from `style.css` that enlarge the font and apply red highlighting. The data consists of three hardcoded car listings, and the example showcases the simplest possible HTML/CSS rendering approach.

Sep 2, 2024

Loading thumbnail…

1

This example demonstrates the VizHub V3 Runtime Environment using a simple "Hello World" program. The code shows how the `main` function, exported from `index.js`, uses the `container` argument to render an HTML string with a configurable `fontSize` number, enabling interactive hot reloading via Alt-drag. It also includes a static HTML page displaying a "Cars Report" list with CSS styling. The example serves as a minimal starting point for developers exploring the platform's interactive widget capabilities.

Sep 2, 2024