T

Tony Mai

@mngbao·23 public vizzes

Loading thumbnail…

Fork of test

This workbench visualizes Fitbit user activity and sleep data, showing how daily metrics like step count, active minutes, and sleep efficiency cluster together. Users can toggle between different metrics and clusters to explore relationships in daily behavioral patterns. The interface uses D3.js v7 to render interactive SVG charts, including scatter plots and bar charts, alongside summary cards for key statistics. Data is parsed from a CSV file containing daily activity logs for multiple users, with filtering options for individual participants.

Loading thumbnail…

Assignment 3 - Scatter on SingleAxis

This visualization shows the step counts for a single user across seven days of the week, using a series of scatter plots arranged on separate horizontal axes. Each point represents an hourly interval, with the x-axis showing the hour of the day and the size of the point scaled to the square root of the step count for that hour. The chart is built using the ECharts library, with each day’s data placed on its own `singleAxis` and rendered as a scatter series. The data is loaded from a local CSV file containing hourly step totals and intensity values.

Loading thumbnail…

Assignment 3 - Race Line Chart

This visualization displays the total minutes asleep per day for the top five users with the highest overall sleep totals from the `sleepDay_merged.csv` dataset. Each user is represented by a distinct line, with end labels identifying the user ID at the right edge of the chart. The code uses the ECharts library, loading data via `fetch` and processing it to compute aggregate totals, filter the top five users, and configure line series with dataset filters and transforms. The chart includes a tooltip ordered by value and a title indicating the metric shown.

Loading thumbnail…

Fork of Fork of Fork of ECharts 2

A single-axis scatterplot shows one user's hourly step counts and total intensity across Tuesday hours for one week, using ECharts 5.3.2. Each point’s x-position is the hour, and the symbol size encodes step total. The chart filters a CSV dataset of Fitbit activity to a hard-coded user ID and date range, then maps intensity values to point size. Data is loaded via `fetch` and parsed manually, with chart configuration built from `title`, `singleAxis`, and `series` arrays.

Loading thumbnail…

Assignment 3 - Interactive Stacked Bar Chart

This interactive stacked bar chart visualizes daily activity intensity for multiple users, sourced from Fitbit data in `dailyIntensities_merged.csv`. A dropdown menu switches between users, displaying four stacked segments—inactive, light, moderate, and intense activity—as proportions of a 1440-minute day. Built with ECharts 5.3.2, it uses the `bar` series with `stack: 'total'` for the bars, and adds translucent connecting polygons between adjacent bars via the `type: 'polygon'` element to highlight temporal transitions.

Loading thumbnail…

Assignment 3 - Scatter Plot with Linear Regression

This interactive visualization uses ECharts and the ecStat regression API to plot hourly step counts against calories burned for individual users from a Fitbit dataset. A dropdown menu switches between 33 users, each rendering a scatter plot with a linear regression line overlaid. The regression transform is applied via `ecStat.transform.regression`, while the chart itself loads data from a CSV file and updates dynamically through a change event listener.

Loading thumbnail…

Fork of Fork of ECharts

This example visualizes cumulative minutes asleep for the top 23 users from a Fitbit sleep dataset, shown as multiple line series over time. Each line represents a user’s running total of sleep minutes, with end labels displaying user IDs and emphasis focusing on individual series on hover. Built with ECharts 5.3.2, the code loads a local CSV via `fetch`, parses rows to aggregate daily sleep records by user, and uses `myChart.setOption` to configure line charts, tooltips, legends, and an animated rendering with a 10-second duration.

Loading thumbnail…

Assignment2.2 - Line Graph

A multi-line chart displays telehealth device usage trends across patient age groups, comparing the frequency of desktop, tablet, and smartphone appointments. The code processes a CSV file, grouping patient ages by decade and counting device types. Three distinct SVG line paths, colored steelblue, green, and orange, represent each device category. The visualization uses d3.csv for data loading, d3.scaleLinear for x and y axes, d3.line for path generation, and d3.axisBottom and d3.axisLeft for the chart's axes.

Loading thumbnail…

Assignment2.2 - Bar Chart

This bar chart displays the total number of telehealth appointments per medical specialty, with each bar’s height representing the case count. The visualization loads data from a CSV file using D3 v7, employs `d3.scaleBand` and `d3.scaleLinear` to position bars, and renders the SVG`rect` elements with value labels. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while the chart includes labeled axes for specialty and total cases.

Loading thumbnail…

Assignment2.2 - Scatter Plot

This scatter plot shows the relationship between patient age and symptom severity for mental health telehealth appointments, with each circle representing an individual patient. The chart filters the source CSV data to include only records where the specialty is `mental_health`, then plots age on the x-axis and symptom severity on the y-axis using D3 v7’s `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` APIs. Points are rendered as green SVG circles with 60% opacity, and the visualization includes labeled axes for “Patient Age” and “Symptom Severity.”

Loading thumbnail…

Fork of Scatter Plot - Industry

This scatter plot displays the relationship between industrial activity and energy consumption in Germany from 2020 to 2024, with the x-axis showing the industrial index (0–100) and the y-axis measuring consumption in TWh. The visualization samples every 100th row from the CSV dataset, plotting each point as a green semi-transparent circle. The chart is built using D3 v7, employing `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to generate the scales and ticks.

Loading thumbnail…

Fork of ICE6 SDV

This fork of ICE6 SDV displays a scatter plot of iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis. The visualization uses D3’s `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs within a React component to render circles from the iris.csv dataset, with a title and axis labels. Points are positioned via D3 scales and drawn as semi-transparent steelblue circles.

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a multi-series line chart using a dataset of 150 samples, plotting three quantitative variables—Sales, Profit, and Expenses—against a sequential Sample number. It builds the visualization with React and D3 v7, using `d3.csv` to fetch remote data and `d3.scaleLinear` for axes. The SVG rendering uses `d3.line` generators to create three separate polylines, each with a distinct stroke color, and includes y-axis gridlines, axis labels, a title, and a legend. The React integration is minimal, relying on `d3.select('#root').append('svg')` to attach the chart directly to the DOM root.

Loading thumbnail…

Fork of Average Energy Price by Country

This example visualizes the average energy price by country, computed from a CSV file of daily energy records. The code aggregates energy prices per country, calculates each country’s mean, and renders a bar chart using SVG. It employs D3 v7’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, along with `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` for the axes.

Loading thumbnail…

Assignment2.2_BarGraph

This bar chart shows the distribution of Brooklyn Public Library branches by their accessibility status, with counts labeled above each bar. The SVG visualization is built using D3 v7, reading branch and access data from BPL_Locations.csv. It uses scaleBand and scaleLinear axes to plot the data, and bars change color from steelblue to orange on hover. The chart groups branches into two categories: fully accessible and partially accessible.

Loading thumbnail…

Assignment2.2 - Box Plot

This visualization presents a box plot chart showing the distribution of patient ages across various medical specialties. It is rendered as an SVG graphic using D3.js v7, with interactive data grouping performed by the script. The box plots display quartiles (q1, median, q3) and whiskers (min, max) derived from the patient age data in the telehealth_appointments.csv file. The x-axis lists specialties, while the y-axis shows patient age, with median lines highlighted in white for clarity.

Loading thumbnail…

Assignment2.2_PieChart

A choropleth-style map of Brooklyn library branches uses orange points over a green base map. Each point is plotted by longitude and latitude from BPL_Locations.csv, projected with `d3.geoMercator()` and drawn as SVG circles. Hovering a point displays a tooltip with the branch name, phone number, and accessibility tags. The underlying neighborhood boundaries come from Brooklyn GeoJSON, rendered through `d3.geoPath()`.

Loading thumbnail…

Assignment2.2_PieChart

This map of Brooklyn libraries plots each branch as a circle over a geographic map. The visualization uses a Mercator projection via `d3.geoPath` to render the borough’s shape, then positions the library points by parsing latitude and longitude from the CSV. Each point is colored orange and includes a hover tooltip that displays the library’s name, phone number, and accessibility features. The map is built with D3.v7, with map GeoJSON from a public GitHub repository and location data from the Brooklyn Public Library’s CSV.

Loading thumbnail…

DTSC630_Assignment1

This interactive portfolio website showcases the professional profile, experience, projects, and skills of Bao Mai, a data scientist and analyst. The Vue.js-based site features a hero section with a typewriter effect cycling through job titles, floating sticker images with drop-shadow effects, and a rotating animation for an audio control. The interface includes sticky navigation with a mobile hamburger menu, scroll-triggered reveal animations using IntersectionObserver, and a responsive grid layout for skills. The design utilizes CSS custom properties for theming, Playfair Display and Space Grotesk fonts, and JavaScript for interactive elements.

Loading thumbnail…

Assignment2.2_GeoMapGraph

This example maps the locations of Brooklyn Public Library branches as orange points over a green choropleth of Brooklyn neighborhoods. The map uses a D3 geoMercator projection and d3.geoPath to render GeoJSON boundaries, while library coordinates are loaded from a CSV and drawn as SVG circles. Hovering over a point enlarges it and displays a tooltip with the branch name, phone number, and accessibility status. The visualization is built with D3 v7 and renders entirely as SVG.

Loading thumbnail…

Fork of D3 Bar Chart Scales

This example shows a two-scale bar chart using synthetic data, with band and linear scales mapping values to SVG rectangles. The D3 v4 code builds an SVG with bars shaded by value using `scaleBand` for the x-axis and `scaleLinear` for the y-axis, then appends text labels atop each bar. The chart animates when a paragraph is clicked, though no click handler is defined, so the visualization remains static. Data comes from an inline array.

Loading thumbnail…

Fork of D3 Bar Chart

This fork of a D3 bar chart displays a static dataset of 20 numeric values as vertical bars, with each bar’s height and color intensity proportional to its value and labeled with its number. Built with D3.js version 4.5.0, the SVG is created via `d3.select('body').append('svg')`, and bars and text are added using `selectAll('rect').data(dataset).enter().append('rect')` and a similar text chain, with `attr` calls setting positions, dimensions, and fill colors. The chart uses a simple linear mapping from data to pixel coordinates, with no animation or interaction.

Loading thumbnail…

Fork of D3 Axes Bottom

A scatter plot displays eleven data points on a 500 by 300 pixel SVG canvas. Each point's horizontal and vertical position is mapped using `d3.scaleLinear` and `d3.scaleSqrt`, with the circle radius also scaled by the y-value. Red text labels show each coordinate pair. The x-axis is rendered using `d3.axisBottom` and positioned at the bottom of the chart via a transform. The visualization demonstrates a basic D3 v4.5.0 example with static data, using SVG elements and animated rendering.