X

xychen0612.cs09@nycu.edu.tw

@xxxxxinyu·20 public vizzes

Loading thumbnail…

Topojson World Map

A custom player control interface replicates Spotify’s playback bar, featuring skip-back, play/pause, and skip-forward buttons alongside a time display and a draggable slider. The slider is built with `d3.sliderBottom` and a linear scale over 186 one-second steps, while buttons reposition the playback state and an interval advances it automatically. The UI uses `d3.select` and `d3.append` to construct DOM elements, with styling from a linked stylesheet referencing Spotify’s spoticon font and color scheme.

Loading thumbnail…

Fork of Sankey Chart for Supplier-Country Distribution

This Sankey diagram visualizes the distribution of manufacturing materials from the top 10 Nike suppliers to destination countries, derived from Nike Global Manufacturing Data. Node rectangles represent suppliers and countries, with link thickness and color encoding factory counts. Users can drag nodes to rearrange the layout, and hovering over nodes or links displays tooltips with factory totals. The visualization uses d3.v4 with the d3.sankey plugin, d3.nest for data aggregation, and d3.drag for interactive node movement, rendering as SVG with a d3.scaleOrdinal color scheme.

Loading thumbnail…

Fork of PM 2.5 Particle Change in US

This interactive choropleth map shows the change in PM2.5 particulate matter concentrations across US counties from 2000 to 2018. A vertical slider and play button animate through years, with counties colored on a sequential YlGnBu scale where darker blue indicates higher pollution levels. The visualization uses D3 v5 geo projections via `d3.geoIdentity` and `d3.geoPath` to render TopoJSON county boundaries from the US Atlas, with React managing the state and year updates. County-level PM2.5 data comes from a CSV file, and hover tooltips display exact values.

Loading thumbnail…

Fork of Meaningless Graphs with D3

A stacked area chart visualizes changes in numerical values across categories over time, using a dataset with multiple numeric columns and a year field. D3 v6 loads the CSV from a GitHub-hosted example, then uses `d3.stack()` to aggregate the series and `d3.area()` with scaleTime and scaleLinear axes to render the SVG paths. Each category is filled with a distinct color from a custom palette, with axes labeled "Year" and "Points??".

Loading thumbnail…

Scatter Plot

This scatter plot depicts the populations of the ten most populous countries, arranged alphabetically along the vertical axis. The visualization encodes population counts as horizontal positions on a linear scale, with each country represented by a fixed-size circle. The chart is rendered as SVG using D3 version 7.8.5, with scales created via `scaleLinear` for the x-axis and `scalePoint` for the categorical y-axis. Axis ticks and labels are generated with `axisBottom` and `axisLeft`, and the data is loaded from a CSV file using `csv`.

Loading thumbnail…

Religions of Largest 20 Countries

This interactive visualization displays the religious composition of the 20 most populous countries using stacked horizontal bars, where each bar segment represents the population adhering to a particular faith. It renders with SVG and includes a color legend that, when hovered, filters and highlights bars from a single religion while dimming the rest. Built with D3.js (v3.5.5), the code uses `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend. Population values are formatted with a custom SI formatter that abbreviates billions as "B," and a tooltip shows the exact count on hover.

Loading thumbnail…

Fork of D3 Scatter Plot Matrix multiple colors

This scatter plot matrix compares all numeric fields in the iris dataset, with each cell showing a bivariate relationship and points colored by species using d3.scaleOrdinal and a custom color array. The four-by-four grid is built with D3 v6, rendering each plot as an SVG with axes from d3.axisLeft and d3.axisBottom, and labels placed on the diagonal. Data is loaded from a CSV via d3.csv, while d3.extent sets the scales.

Loading thumbnail…

Fork of Scatter Plot with Color Menu

This fork of a scatter plot expands the original by adding a color attribute selection menu alongside the existing X and Y column pickers. The visualization displays the classic auto-mpg dataset, with each point colored by its origin using a categorical color scale. The app uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.axisBottom and d3.axisLeft for tick marks. All three dropdown menus are rendered with a custom dropdownMenu function, and circles animate into position over two seconds using d3 transitions.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js as its rendering framework, building interactive marks with circles sized by weight and colored by country of origin. Data loads asynchronously from a CSV file fetched via D3's CSV parser. The chart automatically fits the browser window and includes a tooltip showing each car's name, powered by the Vega Tooltip handler.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in a row, and clicking one selects it by giving it a black outline. The visualization uses React to manage the `selectedFruit` state, and D3.js `scaleOrdinal` maps fruit type to both color and radius. The current static view shows apples only, but commented-out code indicates planned transitions for removing fruit or changing an apple to a lemon.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl, and a timed sequence demonstrates D3 data joins by eating, replacing, and filtering fruits. Each apple is a circle with a label, positioned via a transform attribute using index-based spacing. The code uses `d3.scaleOrdinal` for color and radius mapping, while `selection.enter` and `selection.exit` manage element updates. The fruit data is an array of objects, and the visualization updates through repeated calls to a `fruitBowl` render function.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates D3’s general update pattern with array modifications. Apples and lemons appear as colored circles with labels, shifting positions as fruits are removed, replaced, or eaten over timed intervals. The code uses D3 v5 selections, `scaleOrdinal` for color and radius, and `merge` to handle enter and update sets, while `exit().remove()` cleans up departing elements. SVG rendering occurs via a fixed bowl rectangle and groups translated by index.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the data, with gridlines and axis labels generated via the `tickSize` and `tickPadding` options. The code loads CSV data asynchronously, converts numeric fields, and renders the SVG circles with opacity to show density. Titles and axis annotations are added as SVG text elements, while the axes’ domain lines are removed for a cleaner presentation.

Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries using a horizontal bar chart, with population values displayed along the x-axis and country names on the y-axis. The chart customizes axes by removing domain lines, applying tick marks that span the full chart height, and formatting population labels using D3’s `format('.3s')` to replace 'G' with 'B' for billions. It reads data from a CSV file and renders SVG elements using D3 v7, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the visualization.

Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-like face drawn with SVG primitives, including eyes, eyebrows, and a mouth. The face’s eyebrows perform a continuous up-and-down animation using D3’s `transition` API, creating a simple, expressive motion. The code uses D3 v7’s `select`, `append`, and `arc` functions to construct the shapes, with a 960×500 SVG canvas. The mouth is generated via the `arc()` path geometry, while the eyebrows shift vertically over two-second intervals, showcasing basic SVG rendering and animation in D3.

Loading thumbnail…

Untitled

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition. It demonstrates how CSS classes and inline attributes style the shapes, including fill colors, strokes, stroke widths, and transforms for scaling and translation. The code uses React to render the SVG markup within an HTML page, with a linked stylesheet defining styles for groups and individual elements. No interactive behavior or data binding is present; the visualization serves purely as a styling and layout demonstration.

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It combines default black fill, explicit colors like red and green, and a grouped set with a light blue fill and black stroke. The rendering uses raw SVG elements within an HTML page, with CSS controlling stroke properties such as width, line join, and cap. The `<g>` elements apply transformations including scaling and translation, while the `.lines` class defines stroke behavior for line and path elements.

Loading thumbnail…

Untitled

This example presents a simple "Cars Report" listing three vehicles with model years and prices. It demonstrates foundational HTML structure and CSS styling, using a `<ul>` list and a `.highlighted` class to emphasize one car in red. The page is built with basic JavaScript and CSS, without any external libraries or data processing, relying on static markup for content. The rendering approach uses standard browser document flow, with `style.css` applying a monospace font and large text size to enhance readability.

Loading thumbnail…

HTML

This example demonstrates asynchronous data loading and text generation in a web page. It fetches a hardcoded car dataset using a Promise-based `getCars()` function, then filters and formats the results with `generateReport()` and `formatCar()` to display affordable vehicles (under $2,000) in the DOM. The visualization relies on ES6 module imports for local files (`formatCar.js`, `generateReport.js`, `getCars.js`) and renders plain text to a `<pre>` element. D3 is loaded via UNPKG, though the current code uses no D3-specific functions.

Loading thumbnail…

Promise

This example demonstrates asynchronous data loading and report generation in a browser. It shows a loading message that updates to a formatted text report after a two-second delay, simulating a network request. The code uses JavaScript ES6 modules with `import`/`export` syntax, a custom `Promise` wrapper around `setTimeout` to fetch car data, and dynamic string construction. It highlights how VizHub loads D3 via UNPKG, though the visible workflow relies on local module functions like `getCars`, `formatCar`, and `generateReport` to process and display car prices.