lubin-liu

@lubin-liu·9 public vizzes

Final Project V1

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare two selected attributes on the x and y axes via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` for axes, `extent` for domains, and SVG circles for marks. Each point includes a native `<title>` tooltip. The chart supports dynamic axis relabeling as selections change.

Dec 11, 2020

Loading thumbnail…

Final Project V1

This interactive scatter plot visualizes the Human Development Index dataset, allowing users to compare inequality-adjusted income against inequality in education percentages. The visualization uses React with D3 v5 scales and rendering via SVG, featuring dropdown menus to switch between different data attributes. Data loads asynchronously from a CSV file using d3.csv, with axes rendered through custom React components and tooltips provided by SVG circle titles.

Dec 7, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the x and y axes via dropdown menus. The visualization uses React with hooks to manage state, D3 v5 for scales and axes, and React Dropdown for the menu interface. Points are rendered as SVG circles with native tooltips, while axis labels update dynamically to reflect the currently selected attributes, with axis formatting handled by d3.scaleLinear and d3.format.

Dec 7, 2020

Loading thumbnail…

Iris Parallel Coordinate Plots

This interactive visualization displays the classic Iris dataset as parallel coordinate plots, with each flower’s measurements across sepal length, sepal width, petal length, and petal width shown as connected polylines. The species (setosa, versicolor, virginica) are encoded by color, with gray background lines for context and a legend in the corner. Users can drag any axis to reorder dimensions, triggering smooth transitions that recompute the paths and update axis positions. Built with D3 v3 within a React framework, it uses SVG rendering, `d3.svg.axis`, ordinal and linear scales, and `d3.behavior.drag` for interactive manipulation.

Dec 7, 2020

Loading thumbnail…

Parallel Coordinates

This interactive parallel coordinates chart displays survey data on happiness and organizational membership across countries. Each vertical axis represents a dimension like Happiness or Religious group participation, with polylines connecting values for each country. Users can brush along axes to filter the data, and drag dimension labels to reorder them, with smooth animations during transitions. Built with D3 v3, the visualization uses SVG paths for the lines and backgrounds, plus the `d3.svg.brush` API for the brushing interaction and `d3.behavior.drag` for axis reordering. The data comes from a CSV file with null values handled gracefully.

Dec 7, 2020

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each of the 150 flowers drawn as a semi-transparent polyline across four axes representing sepal length, sepal width, petal length, and petal width. The lines are colored by species, and users can drag the vertical axes to reorder them, animating the paths via D3 transitions. A dropdown menu toggles the y-axis scale between a fixed union range and per-axis self-scaling, recomputing the scales from the data. The visualization uses D3 v5 with SVG rendering and implements drag behavior through `d3.drag`.

Dec 7, 2020

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting viewers assign any data column to the X or Y axes. The visualization uses d3.csv for loading, d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft for scales and axes, while d3.transition animates circles over two seconds when columns change. The code builds menus from data.columns and updates the SVG scatter plot dynamically.

Dec 7, 2020

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create a scatterplot of automobile data from a CSV file, mapping acceleration and horsepower on the axes with tooltips for car names. The visualization is rendered as an SVG via the vega and vega-lite libraries, with vega-lite-api constructing the mark specification programmatically. The code loads data asynchronously using d3.csv, applies custom axis and label styling from a config object, and fits the chart to the viewport with a tooltip handler from vega-tooltip.

Dec 7, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to explore relationships between numeric columns. Two dropdown menus let viewers dynamically select which columns map to the x and y axes. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while circles animate their positions over two seconds with a staggered delay when data changes. SVG rendering displays red, semi-transparent points, and the code demonstrates reusable modules for the scatter plot and dropdown menu logic.

Dec 7, 2020