JIAHAO LAI

@Jiahao-B-Lai·6 public vizzes

Long Trip Data (LGA-Airport as the destination, 2022 JUN)

This interactive scatter plot shows the distribution of long-distance trips (15–50 miles) to LaGuardia Airport during June 2022, plotting trip distance against pickup hour. Hovering over a weekday in the color legend dims other points, highlighting trips from that specific day. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles with a `d3.csv` data source from a GitHub-hosted file.

Dec 15, 2022

Loading thumbnail…

Long Trip Data (LGA-Airport as the destination)

A scatter plot visualizes long trip data from LGA Airport, plotting trip distance on the x-axis against pickup hour on the y-axis, with points colored by weekday. Built with React and D3 v5, it uses `scaleLinear` for both axes, `scaleOrdinal` for color encoding, and SVG circles for marks. Hovering a legend item filters and highlights matching points while fading others, implemented through `useState` and conditional opacity.

Dec 15, 2022

Loading thumbnail…

Fork of Tips Scatter Plot

This scatter plot visualizes the relationship between total bills and tips in restaurant data from the tips.csv file. The d3.scaleLinear and d3.axisBottom/axisLeft APIs map the data to SVG circles, with color distinguishing male (blue) and female (magenta) customers. Axis labels and a title are added using d3-selection methods, while the styling from styles.css applies opacity and typography. The data originates from the UCI Machine Learning Repository’s Auto MPG set, though the actual plotted variables come from a tips dataset.

Dec 15, 2022

Loading thumbnail…

making a barchart

This visualization displays the total number of bike rides for various New York City zones as horizontal bars, ranking locations from JFK Airport to TriBeCa/Civic Center. The data is loaded from a CSV file using the `csv` method from d3, with numeric ride counts parsed for scaling. The chart uses `scaleLinear` for the x-axis width and `scaleBand` for the y-axis categorical zone positions, rendering rectangles as SVG elements. The example relies on d3 v5 APIs including `select`, `max`, and the scale functions.

Dec 14, 2022

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart emphasizes customized axes: the y-axis labels have no ticks or domain line, while the x-axis uses a tick format that abbreviates numbers (e.g., "1.42B") and extends grid lines across the plot. Built with D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Styling is applied via CSS classes, with data loaded from a CSV file.

Dec 14, 2022

Loading thumbnail…

Hello D3

This example showcases the classic "Hello, World!" of data visualization, displaying the text "Hello GG" prominently in the center of the viewport using a 13-em CSS class. The implementation is minimal, consisting of an HTML page that loads the D3.js version 6 library from a CDN and uses its `d3.select` API to target the body element and inject the text string. The page integrates raw CSS for styling and relies on D3's direct DOM manipulation rather than any data-driven chart, making it a starter template for D3 projects.

Dec 14, 2022