FAN CHI YU(范紀予)

sas

A bar chart displays the monthly sum of total dead and missing migrants, with time on the x-axis and death counts on the y-axis. Using React and D3 v5, the visualization applies `d3.bin` with monthly time thresholds to group the data, then `d3.sum` to aggregate the values per bin. SVG rectangles render the bars, with axes built from reusable components and interactivity via `<title>` tooltips. Data comes from the Missing Migrants Dataset, and the chart demonstrates time-based histogram creation.

Oct 21, 2022

EdX Viewer Data

This scatterplot visualizes the number of plays per person against their active days on the EdX platform for the 2013 academic year, with a color legend identifying courses by viewer name. Built with React and D3 v5, it renders SVG circles positioned by `scaleLinear` scales for the x and y axes, while a sequential `scaleOrdinal` color scale encodes the categorical player names. The chart includes interactive hover highlighting that fades non-selected marks to 20% opacity, and it loads CSV data from a GitHub gist derived from the MITx-HarvardX Dataverse.

Oct 20, 2022

Visualization (Brush) -NBA

This interactive visualization presents earthquake data through three coordinated views: a bar plot of regional death tolls, a world map showing earthquake locations with circle radii encoding Richter magnitude, and a scatter plot relating year, magnitude, and fatalities. The map uses d3.geoPath with a Mercator projection, includes a legend for magnitude values, and displays country names via a custom tooltip. The bar plot employs d3.scaleBand with axes, while the map’s tooltip and the legend are built using D3 selections. The example also demonstrates d3.json for loading GeoJSON data and integrates d3.v7.

Oct 20, 2022

VizHub NBA

This interactive dashboard visualizes U.S. influenza-like illness (ILI) data across multiple coordinated views: a line chart of national trends by year, a choropleth map of state-level averages, a bar chart of top states, and a curve chart for selected states. Users can hover over or select elements to filter the map and bar chart, with a reset button to clear selections. The visualization is built with React and D3 v5, using `d3.format` for axis ticks, `d3.zoom` for the map, and custom ES6 modules for data aggregation and attribute definitions, rendering all marks as SVG.

Oct 20, 2022

Fork of USA NBA_2

This visualization combines a geographic map of U.S. NBA team locations with a time-series histogram and a scatter plot. The map uses d3.geoAlbers and d3.geoPath to render state boundaries and team markers, while the histogram aggregates reported deaths over time using d3.histogram. A separate scatter plot encodes team attributes with d3.scaleOrdinal coloring. The React-based interface loads CSV and TopoJSON data, rendering all views as SVG elements.

US side Suicide Map Multi-views

This visualization combines a U.S. map with a scatterplot to explore NBA player statistics. The map uses `d3.geoPath` with a `geoAlbers` projection to plot team locations, while the accompanying bubble chart displays player data points colored by team abbreviation. Built with React and D3 v5, the scatterplot includes interactive hover filtering that highlights selected teams. Data is loaded from a CSV containing player coordinates and stats, with the map rendered using TopoJSON state boundaries from the us-atlas dataset.

USA AIRPORT

A map of USA airports displays each location as a gray circle with a two-letter abbreviation label, overlaid on a geographic projection of US states. The visualization uses D3 v5 with geoAlbers and geoPath for map rendering, while React components manage the SVG structure. Airport coordinates are loaded from a CSV file, and state boundaries come from a TopoJSON atlas. The map is complemented by a separate time-series histogram showing monthly totals of dead and missing individuals, built with D3's scaleTime, bin, and sum functions.

data2

A scatterplot shows the number of video plays versus days active for HarvardX and MITx students, with each point colored by course and a legend that filters points on hover. An inset US bubble map marks the location of each course’s team. The visualization uses D3 v5 scales and axes, React for components, and D3’s `geoAlbers` and `geoPath` for the map. Data comes from the MITx-HarvardX Dataverse and the US Atlas TopoJSON.

Nba map

This map shows the geographic locations of NBA teams across the United States, using semi-transparent teal circles for each city and a text label for each team abbreviation. Built with React and D3, it applies the Albers equal-area projection to transform coordinates from a CSV of team locations. The base map renders US state boundaries and graticules from the US Atlas TopoJSON via `d3.geoPath` and `d3.geoAlbers`, with state interiors highlighted by `d3.mesh`.

Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes the NBA dataset from a GitHub Gist, with each point representing a player. It shows the relationship between two selected attributes—initially petal width and sepal length—while coloring the points by team abbreviation. The plot’s axes and circles are rendered as SVG, with an animation cycling through four different attribute combinations every two seconds. The implementation uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs to construct the chart dynamically.

Fork of NBA_TEAM

This map of NBA team locations uses D3 v5 projections with `geoAlbers` to render U.S. state boundaries and team positions. The code plots each team as a large gray circle at its latitude and longitude, with the team abbreviation as text labels. It retrieves data from a CSV URL and TopoJSON from the us-atlas package, combining React state hooks with D3's `geoPath` and `geoGraticule` APIs. The visualization also includes state interiors and graticule lines for geographic context, using SVG rendering within a React component.

Migrants Multiple Views

This example combines a world map and a time-series histogram to visualize migrant deaths and missing persons. The map uses a natural Earth projection with graticules and country boundaries from TopoJSON, plotting circles scaled by `d3.scaleSqrt` to represent the total dead and missing per location. The histogram below aggregates the same data by month using `d3.histogram` and `d3.timeMonths`, with bar heights reflecting cumulative deaths. Both views are rendered as SVG within a React app, using `d3.csv` to load the Missing Migrants dataset and `topojson` for geographic features.

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis using D3.js v5 scales. React components render SVG circles for each data point, with tooltips showing formatted values via the `title` element. The chart includes custom axes using `d3.scaleLinear` and `d3.extent`, styled with Poppins typography and teal-colored marks. Data loads asynchronously from a CSV URL using `d3.csv` within a custom `useData` hook.

Scatter Plot with Color

A scatter plot visualizes NBA player statistics with points colored by rebounds, showing the relationship between points and assists across players. The visualization uses React components with D3 v5 scales, including `scaleLinear` for both axes and `scaleOrdinal` for categorical color mapping. Data loads asynchronously from a CSV file via `useEffect` and `d3.csv`, rendering circles in an SVG with positioned axes.

Scatter Plot with

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users select variables for the X and Y axes from dropdown menus, which dynamically update the scales and axis labels. The visualization uses D3 v5 for scaling, axis rendering, and data mapping, with React managing state and composing SVG elements. Each data point is rendered as an SVG circle with a tooltip showing its value. The code leverages `d3.scaleLinear`, `d3.extent`, and `d3.format` for axis tick formatting, while `AxisBottom` and `AxisLeft` components generate the axes.

Oct 16, 2022

NBA_TEAM

This visualization maps the locations of NBA teams across the United States using an Albers equal-area projection. Each team appears as a gray circular marker with its abbreviation labeled above, plotted atop state boundaries and graticules. The code leverages React with D3 v5, using geoAlbers and geoPath for geographic rendering, topojson for US state outlines, and CSV data loaded via d3.csv for team coordinates. The SVG output emphasizes spatial distribution of franchises rather than quantitative attributes.

Multiple Views NBA team

This visualization presents a map of NBA team locations across the United States, with team abbreviations plotted as text labels. The map uses D3's `geoAlbers` projection and `geoPath` to render state boundaries and graticules, while team positions are calculated via the projection function and displayed as SVG text elements. The data originates from a CSV file containing team latitude and longitude coordinates. The visualization is built with React and D3 v5, rendering entirely as SVG within a single view.

nba_data_vis

A geo-visualization of NBA team locations plotted as circles atop a map of US states, using a geographic region projection. The map renders state boundaries and interiors via SVG paths from `d3.geoPath` and `topojson.feature`, while team coordinates are projected and displayed as semi-transparent dots. Data is loaded from CSV files using `d3.csv`, and the static Albers USA territories projection comes from the `geo-albers-usa-territories` library. The visualization is built with React components and uses `d3` v5 for data handling and map generation.

Fork of Geo Albers with Territories Demo

This example visualizes US state boundaries and team member locations using the geo-albers-usa-territories projection, which extends the Albers projection to include Alaska, Hawaii, and Puerto Rico. The map renders land features and state borders from the US Atlas TopoJSON dataset, with team member positions plotted as semi-transparent circles based on longitude and latitude coordinates from a CSV file. The visualization uses React for component structure, D3’s `geoPath` and `geoGraticule` for geographic rendering, and topojson’s `feature` and `mesh` to process the topology data into SVG paths.