henry8966

@henry8966·4 public vizzes

Bar chart of Port

This bar chart compares the total number of passengers entering and leaving various airports and harbors in Taiwan across different years. Users can switch between years, sort the bars by name or passenger count, and optionally remove Taoyuan Airport's data. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleBand and d3.scaleLinear for positioning. Data is loaded from a CSV file via d3.csv and processed with array methods.

Jan 13, 2021

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays the Iris dataset, showing how sepal and petal measurements differ across three iris species. Users select which measurements to plot on each axis via dropdown menus, and the chart redraws with semi-transparent colored circles representing each species. The visualization uses D3.js version 5 with SVG rendering, employing d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.csv to load the data from a local CSV file. A static HTML legend outside the SVG maps species names to red, green, and blue circles.

Jan 12, 2021

Loading thumbnail…

Force Directed Graph

This visualization pairs a force-directed graph with an adjacency matrix to explore network structure. Clicking a node in the graph or a cell in the matrix highlights the corresponding node and its edges in red. The graph uses `d3.forceSimulation` with link, charge, and center forces, supports dragging and zooming, and the matrix can be reordered by name, degree, or an optimal leaf ordering from the `reorder.js` library. Both views render to SVG, using data from the infect-dublin.edges file.

Nov 24, 2020

Loading thumbnail…

Iris Parallel Coordinate Plots

This interactive visualization uses parallel coordinate plots to display the classic Iris dataset, with each of the four measured attributes (sepal length, sepal width, petal length, petal width) mapped to a vertical axis. Each flower sample is drawn as a colored polyline path across the axes, using red, green, and blue strokes to distinguish the three iris species. Dropdown menus allow users to reorder the axes by swapping attribute positions. The visualization is built with D3 v5, using `d3.scalePoint` for axis positioning, `d3.scaleLinear` for value scaling, `d3.line` to generate the polylines, and `d3.axisLeft` for the y-axis ticks.

Oct 21, 2020