W

W9183907

@W9183907·37 public vizzes

Loading thumbnail…

COVID-19

This interactive COVID-19 dashboard displays country-level statistics using horizontal bars. Users select an attribute from a dropdown, and React state updates the chart to show that metric. Driven by a CSV of global pandemic data, the visualization renders bars with SVG rectangles via React components, using D3 scales (`scaleBand`, `scaleLinear`) and axes (`AxisBottom`, `AxisLeft`) to position the data. Tooltips appear on hover through SVG `<title>` elements.

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This visualization displays the number of students enrolled in the top 50 university modules, ranked by student count. A dropdown menu filters the bar chart by department (CSIS, CAM, GAV). The chart uses React with D3 v5 scales (`d3.scaleBand` for categories, `d3.scaleLinear` for values), data nesting via `d3.nest`, and renders SVG bars with tooltips showing exact counts. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

Loading thumbnail…

Cocktail Ingredient Pairings

A dropdown menu filters the cocktail dataset by main alcohol type, and a bar chart displays the top 20 most common ingredients among matching cocktails, ranked by frequency. The chart uses D3 v5 scales (scaleBand, scaleLinear) and React components to render SVG bars and axes. The data originates from Hotaling & Co.'s cocktail collection on Kaggle, parsed to extract ingredient counts.

Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text "Hello React!" centered on the page. It uses React 16.13.1 and ReactDOM to mount a functional component into the `#root` element, with CSS styling applied via a class selector. The code imports `React` and `ReactDOM` explicitly, calls `ReactDOM.render` to display the component, and relies on a separate bundled JavaScript file. No data visualization or external libraries beyond React are involved.

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 50 university modules by student enrollment, filtered by academic department. A React dropdown menu lets users select a department (such as CSIS, CAM, or GAV), which dynamically updates the chart’s data through d3.nest() aggregation. The visualization uses d3.scaleBand for the vertical module codes and d3.scaleLinear for horizontal counts, rendered as SVG rectangles with native tooltips. Data loads from a CSV via d3.csv, with axes generated by custom React components.

Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

Loading thumbnail…

Untitled

This radial bar chart shows the distribution of values for 100 kilometers, with two series overlaid to compare data from the left and right lanes. The chart uses a circular layout where each segment represents a kilometer, and the two bars for each category are drawn as arcs at different radii. The visualization is built with the d3.js v4 library, using `d3.scaleBand` for the angular axis and `d3.scaleRadial` for the radial values. The chart is rendered as an SVG, loading data from a CSV file.

Loading thumbnail…

Radial pie - Player statistics

This radial pie chart displays NBA player statistics across multiple seasons, using stacked segments to compare metrics like points, assists, and rebounds. Each state or season forms a slice, with segment lengths representing proportional values from the CSV data. The visualization uses d3.scaleRadial for the radial axis, d3.stack for layering, and d3.arc for rendering paths. SVG output includes custom labels, a legend, and circular gridlines with tick marks, all styled via D3 v4.

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualization displays hierarchical data as a radial partition layout, where each arc segment represents a node’s proportional value from CSV data. Hovering over a segment highlights its ancestor path and shows a breadcrumb trail with the percentage of total visits, while other segments fade to 30% opacity. The implementation uses D3 v4’s `d3.partition`, `d3.arc`, `d3.hierarchy`, and `d3.scaleOrdinal` with `d3.schemeTableau10` for color mapping. Interactive mouseover and mouseleave events dynamically update the display, with the total size computed from the root node’s aggregated value.

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the average marks for over one hundred university modules, ranked with the module name on the x-axis and the percentage score on the y-axis. The chart highlights a user’s hovered bar by dimming the hovered bar and displaying the percentage difference from it for all other bars via dynamically appended text elements. Built with D3.js v5, the visualization loads data from a CSV file using `d3.csv` and renders as an SVG with animated opacity transitions. Gridlines, a reference line, and axis labels are drawn using `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Bar chart

The bar chart displays average marks for hundreds of modules, sorted alphabetically along the y-axis, with bars extending horizontally to represent scores from 0 to 85. It uses SVG and animated transitions via d3.transition and easeLinear. The visualization employs d3.scaleLinear for both x-position and bar color, transitioning from steelblue to grey based on mark value, and d3.scaleBand for the categorical y-axis. Data is loaded from a CSV file using d3.csv.

Loading thumbnail…

Scatter/Line Plot with Menus

This interactive visualization displays borehole depth and temperature measurements over time, plotted as red circles connected by a steelblue line. Users can switch the y-axis variable between Depth and Temp via dropdown menus, while the x-axis remains fixed to date. The chart uses D3 v5 scales, axes, and a line generator for rendering, with animated transitions on circle positions. SVG elements are updated through enter/merge/exit selections, and the menus are built using a reusable dropdownMenu module.

Loading thumbnail…

Line Plot with menu

This line plot displays average marks per module across a department, with a dropdown menu to select which performance metric (PASS or FAIL) to visualize. The chart updates dynamically with a smooth transition when the selection changes. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded from a CSV file, and the dropdown is created using a reusable selection-based component that binds to the menu's `change` event.

Loading thumbnail…

London Air

This visualization displays monthly air quality measurements from the Kings College London dataset, plotting pollutant concentrations over time with circles colored by year and outlined by measurement type. The chart includes interactive legends that filter data by color or stroke value, a dropdown menu to select pollutant columns, and hover tooltips showing readings. Built with D3 v5, it uses scales for color and time axes, transitions for animated updates, and separate legend components for year and measurement type.

Loading thumbnail…

London Air

This visualization displays monthly air quality measurements in London from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. Users can change the pollutant displayed via a dropdown menu, and interact with two legends to filter data by month or by measurement type (Roadside or Background). The scatter plot uses time-series animation to draw the data points, with color encoding for the month and stroke encoding for the location type. The D3.js code (v5) uses `d3.csv`, `d3.scaleOrdinal`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, and `d3.transition` to build the interactive SVG visualization.

Loading thumbnail…

Scatter Plot Pollutant (Menu) over Time

This interactive scatter plot visualizes monthly air quality in London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset. Users can select different pollutant metrics for the x- and y-axes via dropdown menus, while the color legend encodes months and allows filtering by clicking. The visualization uses D3 v5 with SVG rendering and animated transitions, employing `scaleTime` for the temporal x-axis, `scaleLinear` for pollutant measurements, and `scaleOrdinal` with `interpolateInferno` for the month color scale.

Loading thumbnail…

Total Disbursements Per Year by School

This visualization displays monthly disbursements from the Columbia Food Pantry across 20 schools from 2016 to 2020, with each year rendered as a distinct colored line. A dropdown menu lets viewers compare trends across different schools. The chart uses D3 v5’s `nest()` to group data by year, `scaleTime()` and `scaleLinear()` for axes, and `transition().duration(1500)` to animate line drawing. A color legend maps years to hues, with data loaded via `d3.csv`.

Loading thumbnail…

Happiness Factors Comparison by Country

This interactive scatterplot compares happiness factors across countries, allowing users to explore relationships between metrics like GDP per capita, school years, and government effectiveness. A dropdown menu selects the x- and y-axis variables, while a clickable color legend filters data points by indicator type. Built with D3 v4, the visualization uses SVG circles with animated transitions, tooltips for country details, and scales from d3-scale to render the data from the World Happiness Report.

Loading thumbnail…

Happiness Factors Comparison by Country

This interactive scatterplot compares happiness factors across countries, allowing users to explore relationships between variables like GDP per capita, school years, and employment rate via dropdown menus. Selecting a legend category highlights the corresponding country groups while dimming others. Built with D3 v4, the visualization uses SVG, transitions, and scale functions to animate circle positions, with a tooltip displaying details on mouseover. Data comes from the World Happiness Report via Kaggle.

Loading thumbnail…

Project 10/31

This scatter plot shows labor force statistics for college graduates across different majors, with each point representing a major and colored by category. Users can switch the y-axis metric via dropdown and click the STEM legend to highlight STEM majors with enlarged, repositioned points. The visualization uses D3 v5 with SVG rendering and animated transitions, pulling data from FiveThirtyEight. Interactive tooltips display major names on hover, while color legends allow filtering by major category and STEM status.

Loading thumbnail…

HW Add a Menu

This interactive bar chart visualizes labor data for 16 graduate program categories from 2010–2012, sourced from FiveThirtyEight’s Economic Guide to Picking a College Major. A dropdown menu allows users to switch between metrics such as total graduates, median salary, and unemployment rate, instantly updating the bar heights with a smooth d3 transition. The visualization uses d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.csv to load and render the SVG, with the menu built via the custom dropdownMenu function.

Loading thumbnail…

Gender - Version 1.2

This interactive sunburst chart visualizes the post-high-school paths of male and female participants, showing transitions among military, school, work, and unknown statuses. A dropdown menu switches between separate JSON files for each gender. The visualization uses D3.js v4 with a hierarchical partition layout and arc generator to create the sunburst, while breadcrumb trails and hover effects reveal exact percentages and raw counts for each sequence.

Loading thumbnail…

Basic React Hook Test (Line - Fixed Data)

This example demonstrates a line chart built with React and D3 v5, using fixed sample data stored in component state. The visualization updates interactively when buttons increment every data point or filter out values exceeding a threshold. The code uses D3's `scaleLinear`, `line`, `curveCardinal`, `axisBottom`, and `axisRight` functions to render the SVG. A React `useEffect` hook redraws the chart whenever the state changes, while the `useRef` hook provides direct access to the SVG element for D3 selections.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let the user select which numeric columns (such as horsepower, weight, or acceleration) map to the x- and y-axes. The code uses the d3.csv and d3.scaleLinear APIs for data loading and scaling, with d3.axisBottom and d3.axisLeft for axis rendering. Points animate into position via d3 transitions with staggered delays, and axis labels update to reflect the selected columns.

Loading thumbnail…

Line Plot with menu

This interactive line plot shows how commodity prices change over time, with a dropdown menu letting users switch between different price columns from the dataset. The visualization uses D3 v5 with a modular component approach, where a reusable `dropdownMenu` function handles the selection interface and a `scatterPlot` component manages the SVG rendering. The code applies `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` generator with `curveBasis` to create smooth paths. Transitions animate the line update when the user selects a new column, while axis ticks include gridlines for readability.

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization presents multiple line plots of air quality data from the Kings College London dataset, displayed from January 2010 through August 2018. A dropdown menu allows users to select which pollutant metric to display, with each line colored according to its category. The visualization uses D3 v5 with SVG rendering and animated transitions. The code employs `scaleTime`, `scaleLinear`, `line`, `nest`, and `transition.attrTween` via D3’s transition system, alongside custom modules for the dropdown menu and color legend.

Loading thumbnail…

Total Disbursements Per Year by School

This visualization displays monthly disbursements from the Columbia Food Pantry across 20 schools from 2016 to 2020, with each year rendered as a distinct colored line. A dropdown menu lets viewers compare trends across different schools. The chart uses D3 v5’s `nest()` to group data by year, `scaleTime()` and `scaleLinear()` for axes, and `transition().duration(1500)` to animate line drawing. A color legend maps years to hues, with data loaded via `d3.csv`.

Loading thumbnail…

RADIAL TREE

This visualization shows the hierarchical structure of world countries organized by continent and subregion, displayed in a radial tree layout. The data comes from a JSON file containing country names grouped into regional categories. Built with D3 v4, the code uses `d3.cluster` and `d3.hierarchy` to compute the radial positions, while `d3.zoom` enables panning and zooming. Labels are rotated and positioned based on depth, with larger fonts for higher-level nodes, and rendered as SVG text with a glow effect.

Loading thumbnail…

A scatter plot Graph.js

This scatter plot shows the average marks achieved across university modules, with each module represented as a circle positioned along a linear mark scale and a point-based module axis. The visualization uses D3 v5 to load CSV data, apply linear and point scales, and render SVG circles with a steelblue fill. It includes custom axes with tick lines, formatted tick labels, and a marks axis label. The graph emphasizes distribution and comparison of module performance through clear spatial encoding.

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows United Nations population projections from 1950 to 2100 for world regions as a multi-line chart. The year 2018 is initially marked by a vertical line, and moving the mouse across the chart updates the selected year, which moves the line and adjusts the highlighted point. The chart uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisLeft/Bottom to render the SVG, with data from two CSV files melted into a single dataset. A d3.scaleOrdinal with schemeCategory10 colors each region, and a custom colorLegend component displays the categories.

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart displays gender distribution across Chinese provinces using data3.csv, with raw counts and percent-of-total views toggleable via radio buttons. D3 v3’s layout.stack, ordinal xScale, and linear yScale render the bars, while transition functions animate changes between modes. The SVG visualization includes rotated province labels, a color-coded legend, and a tooltip; it also references data2.csv in the repository, though the active chart focuses on the provincial male/female dataset.

Loading thumbnail…

A scatter plot Graph.js

A scatter plot displays module marks for individual courses, with each circle’s vertical position representing a module code and horizontal position showing its mark. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Data loads from a local CSV file via d3.csv, and axes are generated with `axisLeft` and `axisBottom`. Grid lines extend across the plot through tick sizes, while a labeled axis and title provide context.

Loading thumbnail…

AVERAGE GRADE ACHIEVEDt

This stacked bar chart shows the distribution of average grades achieved across many module codes, segmented by grade bands from F to A. It is rendered as an animated SVG using D3.js version 3.5.6, with data loaded from a CSV file. The visualization uses `d3.layout.stack` with an expand offset to display proportions, and allows transitions between percentage and count views via radio buttons, though the buttons are commented out. Hovering highlights individual segments through CSS opacity changes.

Loading thumbnail…

Religions of Largest 20 Countries

This stacked bar chart displays the estimated 2010 religious composition of the 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Hovering over a bar reveals a tooltip, while hovering over the color legend highlights a specific religion’s segments across all countries. The visualization is built with D3.js, using `d3.layout.stack` for stacking, `d3.scale.ordinal` with `rangeBands` for bar positioning, and `d3.legend.color` for the interactive legend, rendered as an SVG animation.

Loading thumbnail…

Untitled

This bar chart displays the stock price of XYZ Foods from 2011 to 2016, with values increasing from $45 to $78. The visualization uses D3.js v4’s `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render an SVG with animated bars that grow sequentially. Hovering over a bar triggers a mouseover event that highlights it in orange via the `highlight` class, expands its width and height, and shows a temporary `$value` label. The mouseout event reverts these changes and removes the label. Data comes from a local CSV file.

Loading thumbnail…

Suicide Statistics in 30 years

This visualization displays total suicide numbers by age group for each year across 30 years, using grouped bars colored with the viridis scheme. The chart is built with Vega-Lite API, which wraps D3.js, and reads data from a CSV file loaded via d3.csv. A clickable tooltip, enabled through vega-tooltip, reveals exact suicide counts for each bar segment, while a custom config adjusts font sizes and colors for readability.