JasonYeong0821

@JasonYeong0821·9 public vizzes

Fork of 108 (2019-2020) 學年度大專校院僑生人數

This radial partition visualization displays the number of overseas Chinese students at Taiwanese universities for the 2019-2020 academic year, broken down by country of origin, institution, degree level, and gender. The hierarchy uses nested ring arcs, with color encoding based on parent nodes and arc lengths proportional to student counts. Built with d3.v4, it employs `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout, while `transition.attrTween` animates zooming into any slice on click. Text labels appear along middle arcs when they fit, and the data comes from a JSON file structured with `size` values for each gender category.

Jan 29, 2021

Loading thumbnail…

108 (2019-2020) 學年度大專校院僑生人數

An interactive sunburst chart displays the number of overseas Chinese students enrolled in Taiwanese universities during the 2019–2020 academic year, broken down by university, country of origin, degree level, and gender. Built with D3.js v4, it uses `svg` elements and animated transitions via `transition.attrTween` to zoom into hierarchical slices on click. The data hierarchy is loaded from a JSON file, with each segment sized proportionally to student counts, and the visualization supports resetting the view by clicking the canvas.

Jan 29, 2021

Loading thumbnail…

Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to show the connections and community structure in a social network. The node-link diagram uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, which can be dragged and zoomed. Clicking a node or a matrix cell highlights the corresponding row and column in the matrix and the connected links in the graph. The adjacency matrix uses custom `rect` elements to represent edge weights, with colors mapping to node groups.

Jan 15, 2021

Loading thumbnail…

Interactive Map.js!

This interactive map displays world countries colored in blue, with hover highlighting in orange and a tooltip revealing happiness rank, happiness score, suicide mortality rate, and universal healthcare status from a 2016 happiness dataset. The visualization merges TopoJSON country boundaries with JSON happiness data using d3.json, d3.tsv, d3.geoPath, and d3.geoMercator projections, rendered as SVG paths. Zooming is supported through d3.zoom, and the map is drawn on a light gray sphere background. Countries without matching data show "Unknown" values in the tooltip.

Dec 3, 2020

Loading thumbnail…

Force Directed Graph

This example pairs a force-directed graph with an interactive adjacency matrix. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to layout nodes, and supports dragging. Clicking a matrix cell highlights the corresponding graph link, while the matrix also shows the dataset’s structure from the infect-dublin.edges file. The code uses d3.csv, d3.select, and reorder.js utilities for matrix permutation.

Nov 25, 2020

Loading thumbnail…

Leaflet + D3 Map

This example combines Leaflet and D3 to render an interactive map of the Worli neighborhood in Mumbai, India. It displays hand-drawn lane polygons and street lines as SVG paths overlaid on an OpenStreetMap tile layer. D3’s `geoTransform` and `geoPath` project geographic coordinates into Leaflet’s coordinate system, with paths updating on map zoom events. Users can hover over area polygons, which change color to highlight individual regions, while the underlying geometric data is loaded from JavaScript objects.

Nov 25, 2020

Loading thumbnail…

Choropleth map with interaction

This choropleth map displays world economies using a color scale mapped to each country, with dimming and highlighting applied when a legend category is selected. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection and rendering, and `d3.zoom` for panning and zooming. A clickable legend, rendered via custom D3 selections, filters the map by economy type, while data is loaded from TopoJSON and TSV files using `d3.json` and `d3.tsv`. The map renders as SVG with hover effects and interactive focus.

Nov 23, 2020

Loading thumbnail…

Parallel Coordinate Plot

This parallel coordinate plot visualizes the Iris dataset, showing how measurements of sepal and petal length and width vary across three flower species. Each polyline represents a single iris, colored by its class, with axes for each attribute arranged horizontally. The visualization uses D3.js v5, employing `d3.scalePoint`, `d3.scaleLinear`, and `d3.axisLeft` to construct axes and SVG paths for the data lines. The dataset is loaded via `d3.csv`, and a legend maps class names to specific color values.

Oct 18, 2020

Loading thumbnail…

Scatter Plots

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two of four flower measurements (sepal length/width, petal length/width) via dropdown menus. Points are colored by species using a predefined scale. The visualization uses D3 v5 scales (scaleLinear), axes (axisBottom, axisLeft), and data joins to update circles, while React dropdown components handle axis selection.

Oct 6, 2020