X

Xiaoyu Su

@Xiaoyu-Su-20·18 public vizzes

Loading thumbnail…

Under Custody

This interactive visualization explores New York State Department of Corrections and Community Supervision (NYDOCCS) inmate data, presenting a bar chart alongside a choropleth map of county-level statistics. Users dynamically filter the bar chart's x and y axes through dropdown menus, with color-coded bars representing aggregated counts, average ages, or average time served for various categorical attributes like sex, race, or prison. The SVG-based map, rendered using `d3.geoMercator` and `d3.geoPath`, offers a separate dropdown to display variables such as incarceration rates or demographic percentages by county. Built with React, D3 v5, and the `react-dropdown` component, the visualization updates smoothly via React hooks and includes interactive tooltips.

Loading thumbnail…

GPS

This example visualizes GPS route data on an interactive map, showing a path of timestamped waypoints overlaid on OpenStreetMap tiles. The map centers on the route’s starting location and renders the track as a red line connecting green waypoints. Built with D3.js v5 and Leaflet, the code uses `d3.geoPath` with a custom `d3.geoTransform` to project GeoJSON coordinates into Leaflet’s layer points, while SVG elements are appended to the map’s overlay pane for animation and styling.

Loading thumbnail…

sortable table

This interactive table displays product data with sortable columns for name, price, and stock. Built with React, it uses custom hooks containing `useState` and `useMemo` to manage and calculate sorting logic, toggling between ascending and descending order on click. The header buttons trigger the sort and display directional indicators defined in CSS. D3 is included in the page for potential data manipulation, though the core functionality relies on React state and event handling.

Loading thumbnail…

Under Custody

This interactive bar chart visualizes the New York State Department of Corrections and Community Supervision (NYDOCCS) under-custody population, with the x and y dimensions selected via dropdown menus. The visualization includes a linked data table showing the count, percentage, and average values for each category. The D3.js v5 bar chart uses `scaleBand` and `scaleLinear` for positioning, with bar heights sorted dynamically upon selection. A tooltip displays detailed information on hover, and the data is loaded from a remote JSON source using D3's `json` function, rendered through React components.

Loading thumbnail…

Map

This choropleth map of Maryland counties visualizes four demographic and criminal-justice metrics—incarceration count, crime count, population, and incarceration rate—using a dropdown menu to switch between them. The map renders with d3.geoMercator and d3.geoPath, coloring each county via a linear color scale over a teal-to-red palette. Tooltips display county names and values on hover, while a transition animates color changes when the metric switches. The GeoJSON data is loaded through d3.json, and the visualization is built with React, d3.v5, SVG, and animation.

Loading thumbnail…

Fork of Box Plot

This fork of a box plot visualizes the distribution of new COVID-19 cases across different locations, showing the minimum, first quartile, median, third quartile, and maximum values for each group. The chart uses React to render SVG elements, with D3.js functions like `scaleBand` and `scaleLinear` for axes and `quantile` for statistical calculations. The data is filtered to include only values above 5500 new cases and loaded from a CSV file via `d3.csv`.

Loading thumbnail…

Test UC

This interactive bar chart visualizes individuals in New York State DOCCS custody, with dropdown menus allowing users to filter the X and Y axes by attributes such as sex, age, race/ethnicity, and time served. The chart renders with React and D3 v5, using `d3.histogram()` to bin age data and `d3.scaleBand()` and `d3.scaleLinear()` for scales. Hovering reveals tooltips with counts and percentages, while data originates from a JSON file loaded via `d3.json()`. Sorting controls and animations are also available.

Loading thumbnail…

NY DOCCS Death Visualization

This histogram visualizes the deaths of individuals in New York State Department of Corrections and Community Supervision custody during 2020, binned by month, week, or day. The interactive chart uses D3.js v5 and React to render an SVG bar chart with an overlaid average line, while hovering over a bar reveals the names and death dates of the individuals it represents. The binning interval is selectable via a dropdown menu, and the visualization animates transitions between bin sizes using D3 transitions. Data is loaded from a local CSV file.

Loading thumbnail…

Barchart experiment

This bar chart displays counts of deaths per month in New York DOCCS custody across 2020, with interactive mouseover details listing individual names and dates from the raw dataset. The React-based visualization renders SVG bars using d3.scaleBand and d3.scaleLinear, featuring a button that toggles a red dashed mean line with confidence-interval lines computed via d3.mean and d3.deviation. A second button triggers animated transitions through d3 transitions in `change_data`, briefly shifting all bars to the mean height before restoring original values over 2 seconds.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between four measured attributes and species through dropdown menus that dynamically reassign the x- and y-axes. Built with React and rendered as SVG using D3 v5, the visualization updates scales and marks via state changes triggered by the dropdown selections. The code leverages `scaleLinear`, `extent`, and `csv` for data loading and scaling, with custom React components for axes, marks, and menu controls.

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart visualizes NY DOCCS under-custody data, allowing users to explore how inmate counts and average age vary across categorical variables like sex, race, or ethnicity. The chart uses React to manage state and D3 v5 to handle data loading, aggregation, and SVG rendering. Users can dynamically change both the x-axis grouping variable and the y-axis metric (count or average age) via dropdown menus. The visualization leverages `d3.nest()` for data transformation and D3’s scale and axis APIs to update the chart in response to user selections.

Loading thumbnail…

barchart

This interactive bar chart visualizes monthly deaths in custody across 2020, drawn from the `death2020.csv` dataset and displayed as an SVG rendered through React with D3 v5. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bars that respond to mouseover and mouseout events by adjusting opacity. Buttons allow users to toggle a mean line with error bounds computed via `d3.mean` and `d3.deviation`, or trigger a two-step animated transition that temporarily sets all values to 10 before restoring them using `transition().duration()`.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates a simple React application that counts button clicks, displaying the current total in a paragraph. It shows how D3.js and React can be combined in a single HTML page, with the D3 library loaded via a CDN link. The code uses React’s `useState` hook to manage the count value, and the `ReactDOM.render` method to mount the app into the DOM. The interface increments the displayed number each time the user clicks the button, illustrating basic state management in a web visualization context.

Loading thumbnail…

Fork of Interactive Color Legends with informative Tooltips and dropdown menu

This interactive scatterplot explores correlations in life expectancy data, plotting user-selected variables on the X and Y axes via a dropdown menu. A color legend, encoded using `d3.scaleOrdinal` with `schemeCategory10`, distinguishes the continents. Clicking a legend item emphasizes data points from that region, while hovering reveals a tooltip with detailed information about each data point. The visualization uses D3 v5, SVG, and transitions to animate updates between different variable selections.

Loading thumbnail…

Fork of Bar Chart with Highlighting

This fork of a bar chart visualizes the populations of the world’s most populous countries from 2018 data. It uses D3 v6 to render horizontal bars colored by population size, with a tooltip that appears on mouseover. The chart is built with `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and uses `selectAll` to draw the rectangles. Data is loaded from a CSV file and processed to convert population values, which are then displayed alongside axes and a title.

Loading thumbnail…

Fork of Stacked Franchise Revenues by Revenue Category

This interactive stacked bar chart displays franchise revenues broken down by revenue category, using data from R for Data Science’s Tidy Tuesday. Built with D3.js, it includes an animated color legend that highlights specific layers on hover, while dimming others. A tooltip via d3-tip shows dollar amounts in billions. The chart uses d3.layout.stack, d3.svg.axis, and d3.legend.color, with SVG rendering and custom tick formatting for readability.

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

Loading thumbnail…

Fork of Menus with React

This example demonstrates interactive dropdown menus built with React. The interface displays a "Choose a pet" label and a dropdown that lets users select from a list of six animal options, including Dog, Cat, Hamster, Parrot, Spider, and Goldfish. The code uses React's `useState` hook to track the selected value, with the currently chosen animal being logged to the console. The `Dropdown` component maps over the options array to generate `<option>` elements, and `ReactDOM.render` mounts the application to the root element.