KeerthiKandadai

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 20 modules by student count, filterable by academic department. The visualization uses React state to manage the selected department, which filters a nested dataset aggregated with the `nest()` API. Bars are rendered as SVG rectangles scaled with `scaleLinear` and `scaleBand`, with axes generated by custom React components. The module data is loaded remotely via `d3.csv` from GitHub.

May 25, 2020

Project 10/31

This interactive scatter plot visualizes earnings and labor force data for college majors, sourced from FiveThirtyEight. The visualization uses D3.js to render SVG circles, with a dropdown menu to select the y-axis variable. A color legend allows filtering by major category, and hovering over points reveals a tooltip. The plot uses animated transitions when data changes, and circles are jittered to reduce overplotting.

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting total students against department on linear scales. Users can hover over the color legend to highlight points of a selected gender category while fading others, using React’s `useState` to manage hover state. The visualization uses `d3.scaleOrdinal` for categorical colors, `d3.scaleLinear` for axes, and renders SVG circles via React components. Data loads asynchronously from a CSV using `d3.csv`.

Project 10/31

This scatter plot visualizes earnings and labor force statistics for college graduates across different majors, using data from FiveThirtyEight. Users can change the y-axis metric via a dropdown menu, and click legends to filter by major category or STEM status, which animates point positions and opacity. Built with D3 v5, it uses `scalePoint`, `scaleLinear`, and `scaleOrdinal` for scales, plus `transition().delay()` for staggered animations. Circles are colored by major category, with tooltips showing major names on hover.

Total Disbursements Per Year by School

This visualization displays monthly disbursements per school from The Food Pantry at Columbia, spanning May 2016 through April 2020. A line chart shows disbursement amounts across module names, with a dropdown menu to select different school columns. Lines are colored by disbursement range categories using an ordinal color scale with a legend. Built with d3.v5, the code uses d3.csv, scaleLinear, scaleOrdinal, axisBottom, axisLeft, line, curveBasis, nest, and transition for animated updates when changing the selected column.

Student count for Each department

A scatter plot shows the relationship between female and male student counts across academic departments, with each circle colored by major category and a tooltip revealing the module name. The visualization uses the vega-lite-api library to define the chart specification, loading data from a CSV file via d3.csv. It renders through vega-lite and vega, with a custom dark-themed configuration for axes and labels. The circle size is fixed rather than encoding a third variable, and the chart fills the browser window.

Student count for Each department

This visualization shows the total number of students for each department using colored circles plotted on a scatter plot, with the department names on the y-axis and student counts on the x-axis. Each circle’s color encodes the department, while tooltips reveal the exact student count on hover. The data is loaded from a remote CSV file using `d3.csv` within the `getData.js` module, and the chart is rendered with the vega-lite-api library, which wraps Vega-Lite specifications. The visualization automatically fits its canvas to the full browser window using the `autosize` configuration.

Student Performance Between Male & Female

This visualization compares male and female student performance across departments, revealing that males tend to score higher in math while females excel in writing and reading. The scatter plot, built with Vega-Lite and d3, uses circle marks colored by gender and tooltips showing module codes. Data is loaded from a remote CSV file. The visualization highlights two female outliers and shows lower scores for students whose parents lack a college degree.

2017 Gender Wage Gap in the US

The visualization compares 2017 average earnings for females and males across seven occupational categories, showing the gender wage gap through paired pink and light blue circles connected by black lines. It uses a scatterplot-style layout with a linear x-axis for income and a categorical y-axis for job types. Built with D3.js v5 within a React framework, the SVG rendering uses `d3.csv` and `d3.autoType` to load data from a CSV file, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` for labels and gridlines.

Gender count for each department

This example visualizes the gender distribution across seven academic departments (CAM, COM, CSIS, GAV, MED, MUL, VIS) using a dot plot with pink and light blue circles representing female and male counts respectively. The chart displays both genders per department, connected by black lines to facilitate comparison of relative values. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and SVG circles and lines rendered from the `earning_averages_by_year.csv` data source. Gridlines and axis labels are generated using `d3.axisBottom` and `d3.axisLeft`.

Scatter Plot with Small Points

This scatter plot visualizes the relationship between module values and module codes, with point size encoding the department category. The visualization uses the vega-lite-api to construct a scatter plot with small, semi-transparent filled points, styled with custom axis and label configurations for improved readability. Data is loaded asynchronously from a CSV file using D3’s csv parser, and the chart is rendered as an SVG via vega-lite, with tooltips enabled through vega-tooltip. The plot fills the entire viewport and uses a fit autosize strategy.

Percentage distribution of social groups among States, 2007-08

This chart displays the percentage distribution of Scheduled Castes (SCs) across different States for 2007-08, using a smooth basis curve to connect data points. Built with D3 v5, it renders a line chart on an SVG canvas, leveraging `scaleBand` for the categorical state axis and `scaleLinear` for the percentage values. The visualization includes rotated state labels, a titled y-axis, and a styled line path, with data loaded from an external CSV file.

Gender Distribution Chart

This interactive stacked bar chart visualizes gender distribution (female versus male) across numerous university module codes. It uses D3.js to render SVG elements and includes an animated toggle that switches between raw counts and percentage proportions. Users can change the view using radio buttons, which triggers a transition of the bar heights and y-axis tick formatting. The chart reads from a CSV file containing module names and gender counts.

Scatter Plot with Menu for ILINet Flu Surveillance Data

A scatter plot displays weekly ILINet flu surveillance data, with each point representing a state colored by year and sized by patient count. A menu allows selection of different data fields for the x-axis. The visualization uses D3.js v5 for scales and axes, React for component structure, and renders to SVG. The data comes from the CDC's ILINet surveillance system, processed through D3's CSV parsing and scale functions.

Untitled

This visualization shows London’s monthly air quality data from 2010–2018, displaying PM2.5 and PM10 particulate levels as a multi-line chart. A dropdown menu lets users select different pollutant measures, while a color legend indicates measurement year. The visualization uses D3.js v3 to render SVG graphics, with animate transitions on the line paths. Data originates from the Kings College London Air Quality Dataset, and the code relies on D3’s `scaleTime`, `scaleLinear`, `nest`, and `line` functions for time-series rendering. Axis helpers like `axisBottom` and `axisLeft` structure the plot.

Polished Scatter Plot with Menus

This interactive scatter plot from the Iris Dataset lets users explore relationships between different measurements by selecting which features to plot on the X and Y axes via dropdown menus. Built with React and D3 v5, it renders circles as SVG marks with tooltips showing formatted values, using d3.scaleLinear for axes and d3.extent for domain calculation. The ReactDropdown component from react-dropdown manages the attribute selection, while custom AxisBottom, AxisLeft, and Marks components handle the grid and data points.

Multiple Line plot with Dropdown

Filtering London air quality data from January 2010 through August 2018, this interactive visualization displays yearly trends for multiple pollutant measures as colored lines, with each year distinguished by a sequential purple color scale. A dropdown menu lets users switch the y-axis among variables like PM2.5, PM10, and nitrogen oxides, updating the line chart with a smooth 1.5-second transition. Built with D3 v5, the example uses `d3.nest` to group data by year, `d3.line` with a basis curve for path generation, and a custom dropdown component; a color legend maps each year to its hue.

1027Happiness Level Scatter Plot

This scatter plot displays life satisfaction levels across various countries from 2004 to 2017, featuring interactive tools for exploration. Users can select different metrics from a dropdown menu to change the y-axis, and click legend items to highlight specific data points. The visualization, built with D3 v5, renders circles positioned by year and happiness score, with color encoding for countries. A tooltip reveals country and value details on hover, while the legend provides an interactive filter. Data is loaded from a remote CSV file sourced from the World Happiness Report.

Linear Regression Line with D3.js

This example shows the correlation between a country’s happiness score and its health expenditure per person using a scatter plot with a linear regression trendline. The visualization, built with D3.js v3 and SVG, plots each country as a green circle, with axes labeled in dollars and happiness scores, and overlays a blue best-fit line computed via a least-squares function that returns the slope, intercept, and R-squared value. Data is loaded from a CSV file hosted on GitHub, while the regression calculation uses native array methods like `map` and `reduce`.

Plays over Time with Dropdown

This visualization shows the monthly play counts for a user's top 10 most listened-to artists on Last.fm, with each artist represented by colored circles. A dropdown menu and clickable legend filter the scatterplot to highlight a single artist’s data over time. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and SVG transitions to animate opacity changes when filtering.

Plays over Time with Dropdown

This interactive scatterplot displays the monthly play counts for a user’s top 10 artists on Last.fm, with a dropdown menu and clickable legend to filter by artist. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time and play counts, rendering circles with animated opacity transitions. Data is loaded from a CSV via `d3.csv`. The legend, sorted by total plays, allows selection, while the dropdown provides an alternative filtering method, both triggering re-renders that update the chart.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart displays 2018 project funding values across academic modules, grouped by department (CAM, CSIS, GAV). It uses D3.js version 3.5 with d3.layout.stack to create layered horizontal bars, where each bar segment represents a funding category. The visualization includes interactive hover tooltips via d3-tip and a color legend using d3-legend, which filters and highlights specific institutional categories. Rendered as an SVG with animated transitions, it encodes department colors and module codes along the y-axis with funding values along the x-axis.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This example visualizes 2018 general project funding items across academic departments, split by institution type (schools, research institutes, others) using a horizontal stacked bar chart. Each department row shows the proportion of items funded within that category, with an animated color legend that highlights and fades bars on hover. The visualization is built with D3 v3, using `d3.layout.stack` for the stacked layout, `d3.svg.axis` for the axes, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. The data is loaded from a local CSV file containing department, category, and item counts.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

A stacked horizontal bar chart displays the number of funded items across module codes, segmented by academic department, for 2018. D3's `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis` render the chart, while animated hover transitions and `d3.legend.color` enable interactive exploration. Tooltips via `d3-tip` reveal department, module, and item counts.

Student Performance Between Male & Female

A scatterplot compares male and female student performance by plotting math scores against writing scores, with gender encoded as color. The visualization reveals that males tend to score higher in math while females score higher in writing, highlighting a notable difference in achievement across subjects. Data comes from a CSV file on student performance, and the chart is built using vega-lite and D3 within a React framework. The code employs vega-lite's markCircle for plotting and encodes the parental level of education as a tooltip.

2017 Gender Wage Gap in the US

This visualization compares the 2017 average earnings of men and women across a wide range of professional and technical occupations. It uses a horizontal dot plot with pink and light blue dots to represent female and male average incomes, enabling direct visual comparison of the wage gap for each job role. The chart is built with D3 v5, using `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the income x-axis, and `d3.axisLeft` and `d3.axisBottom` for axis generation, all rendered as SVG within a React framework.

Suicide Trend over Years and Gender in United States

This stacked bar chart visualizes suicide trends across years in the United States, partitioned by gender. The visualization uses animation-capable SVG rendering through D3.js, with interactive tooltips on hover and a legend that highlights specific gender categories. Data comes from the Suicide_in_USA_by_Sex.csv dataset, processed using D3's layout stack and nested data grouping functions. The chart employs d3.scale, d3.svg.axis, and d3.legend APIs to construct the axes and color legend, with a custom d3-tip for hover information.

Suicide Trend over Years and Gender in United States

A stacked bar chart displays suicide trends across years in the United States, broken down by gender. Hovering over bars reveals tooltips with exact counts, while hovering over the legend highlights one gender’s bars in the foreground against a faded background. Built with D3 v3, it uses `d3.layout.stack`, ordinal scales, `d3.legend`, and `d3-tip`. Data comes from the Suicide_in_USA_by_Sex.csv dataset, rendered as an SVG with animation.

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 20 academic modules by student count, filtered by department through a dropdown menu. The visualization uses React components with D3.js scales (scaleBand and scaleLinear) to render SVG rectangles, with nested data aggregation via d3.nest(). Raw CSV data is loaded from GitHub using d3.csv, and user selections update the visualization through React state management.

May 3, 2020

Gender Distribution Chart

This stacked bar chart shows the gender distribution of students across university modules, with each bar divided into female and male counts. Users can toggle between raw counts and percentages of total enrollment, which animates the bar heights and adjusts the y-axis tick format. Built with D3.js (version 3.5.6), the visualization uses `d3.layout.stack` and ordinal/linear scales, rendering as SVG with transition effects triggered by radio button inputs. Data is loaded from CSV files containing module codes and gender counts.

May 3, 2020

US Suicide from 1979 to 2015

This interactive visualization presents stacked bar charts of US suicide rates from 1979 to 2015, segmented by gender. Hovering over bars reveals tooltips with precise values, while hovering over the color legend highlights the selected gender group. Built with D3.js (version 3.5.5), the chart uses ordinal scales, d3.legend for the color key, and d3-tip for hover details. The data comes from the Suicide_in_USA_by_Sex.csv file, rendered as an SVG with animated transitions.

Mar 30, 2020

Gender - Version 1.2

This interactive sunburst chart visualizes the gender distribution of participants across university modules, rendering hierarchical data as an animated radial diagram. Users toggle between male and female datasets via a dropdown menu, with data loaded from separate JSON files. The visualization highlights selected branches on mouseover, displaying the percentage, raw count, and path breadcrumb in the center. Built with D3 v4’s `d3.partition` and `d3.arc`, it uses color-coded segments to represent academic departments.

Mar 30, 2020

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries according to United Nations World Population Prospects 2019 data, with horizontal bars ranked by population. The visualization uses React components with SVG rendering, employing d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Population values are formatted using d3.format with custom tick labels that convert G to B. The chart features Poppins typography, a teal bar color scheme, and native SVG tooltips that reveal exact population values on hover.

Mar 29, 2020

Multiple Line plot with Dropdown

This interactive visualization displays monthly air quality measurements from the London Datastore, plotting pollutant concentrations over time with a dropdown menu to switch between different pollutants. The chart renders smooth multi-line paths for each year using d3.line and curveBasis, while a dynamic y-scale and axis labels update to reflect the selected measurement. The dropdown menu, built with d3.select and .on('change'), triggers a render function that recomputes the line chart with the newly chosen column. Color-coded lines distinguish annual trends, with a legend explaining the color scale.

Stylized Bar Chart

This visualization presents a stylized horizontal bar chart that ranks academic modules by student enrollment numbers. A dropdown menu allows users to filter the displayed data by department codes (CSIS, CAM, GAV), though the implementation for this filtering is not shown in the core rendering logic. Built with React components and D3 v5, the chart uses `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the quantitative x-axis, rendering orange SVG rectangles within an 800x5000 pixel canvas. The data originates from a CSV file containing module codes and student counts.

Gender - Version 1.2

An interactive sunburst chart displays the post-high-school paths of male and female participants, showing transitions among Military, School, Work, and NA categories. A dropdown menu switches between separate male and female JSON data files, while hovering over any segment highlights its ancestor chain and displays the exact percentage and raw counts in a central explanation panel. The visualization uses D3 v4’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute layout and rendering, with breadcrumb trails and opacity fading for emphasis.

Gender - Version 1.2

This interactive sunburst chart displays the post-high-school paths of male and female participants, showing transitions between military, school, work, and unknown statuses across three levels. A dropdown menu switches between male and female datasets, each loaded from separate JSON files. Built with D3 v4, the visualization uses `d3.partition` and `d3.arc` for the radial layout, and mouseover events highlight the selected path while fading others, updating the breadcrumb trail and displaying the percentage and raw count.

Cocktail Ingredient Pairings

This interactive bar chart ranks the 20 most common cocktail ingredients by frequency, with a dropdown menu allowing users to filter the results by a specific base spirit such as Gin, Rum, or Tequila. The visualization loads data from a CSV file and uses D3 v5’s `scaleBand`, `scaleLinear`, and `nest` to aggregate and sort ingredient counts, while React 16 manages the component state and dropdown interactions. The chart is rendered as SVG with separate `AxisBottom` and `AxisLeft` React components for the axes.

Cocktail Ingredient Pairings

A bartender can filter a dataset of over 400 cocktails by a main alcohol to see a ranked horizontal bar chart of the 20 most common co-ingredients. The chart counts how often each ingredient appears with the selected spirit, with a tooltip showing the exact count. The interactive React app uses D3’s `scaleBand` and `scaleLinear` for layout, with filtering, grouping, and ranking done via array methods and `d3.nest`. Data comes from a remote CSV file parsed with `d3.csv`.

Cocktail Ingredient Pairings

This interactive bar chart shows the 20 most common cocktail ingredients, filtered by a selected base spirit. A dropdown menu lets viewers choose among spirits like Gin, Rum, and Whiskey, and the chart updates to display ingredient counts for cocktails containing that spirit. The visualization uses React for UI components and D3 v5 for scales, the nest() function to aggregate ingredient frequencies, and SVG rects rendered via the Marks component. Data comes from a Hotaling & Co. cocktail dataset, with bars scaled linearly by ingredient count.

Gender Distribution Chart

This interactive chart visualizes gender distribution across university modules, displaying stacked bars for male and female counts that can be toggled between raw values and percentages via radio buttons. The visualization uses D3.js (v3) with SVG rendering and includes animated transitions when switching between the two display modes. Data comes from CSV files containing module codes and gender-specific enrollment numbers. The chart features a color-coded legend and a hover tooltip, with axes labeled and rotated for readability.

d3 Updating Bar Chart With Dropdown

A bar chart displays the number of students per university module, with a dropdown menu to select a specific course. Selecting a new module triggers an animated transition that updates the bar heights and y-axis domain. The visualization is built with d3.v3, using SVG rectangles and the `transition` method for smooth updates, while the dropdown change event calls the update function. Data is loaded from a CSV file containing module codes and student counts.

d3 Updating Bar Chart With Dropdown

A dropdown menu allows a user to select a year from a dataset of module codes, values, and years, triggering an animated update of a stacked bar chart displaying the total value per module. The chart, rendered as SVG, uses d3 transitions to smoothly animate the repositioning and resizing of the stacked bars and their corresponding value labels. The visualization leverages d3's `data.csv`, `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `d3.stack` to process the data and generate the layered bar representation.

Melting Data for Multiple Lines

This line chart displays population changes over time for various modules, with each module’s data as a separate colored line. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `scaleOrdinal`, and a `line` generator with `curveBasis`. Data is loaded from a CSV file and processed using `nest` to group by module. A custom color legend is created using `scaleOrdinal` with `schemeCategory10`. The chart includes axes with gridlines and a title.

Age Distribution Chart

This chart displays the distribution of deaths across eight age ranges, from newborns to those over 70, for nearly twenty different causes of death. Animated stacked bar charts show raw death counts or the percent share each age group contributes per cause, with a toggle to switch between these views. The visualization is built with D3.js, using `d3.layout.stack` to compute the stacked segments and transitions to animate the bars between count and percentage modes. Data comes from CSV files loaded via `d3.csv`, and the legend identifies each age range by color.

Untitled

This interactive line chart visualizes student enrollment counts across university modules, with a dropdown menu to select different module groups. It uses D3.js v4 with SVG rendering, mapping module codes on the x-axis and student numbers on the y-axis. The chart reads from a CSV file and employs a color scale from `d3-scale-chromatic`. When a user selects a new module, the line path transitions smoothly to display the updated values over one second.

Untitled

This interactive line chart displays energy consumption data across multiple building sites, allowing users to switch between locations via a dropdown menu. The visualization employs an SVG-rendered multi-series plot with a smooth animated transition when a new site is selected. The code uses `d3.csv` for data ingestion, `d3.scaleLinear` for axes, `d3.line` for plotting, and `d3.transition` to animate changes. A color scale assigns distinct hues to each site. The chart reveals periodic patterns in usage, with site 7 showing notable gaps where zero consumption was recorded.

Tooltip And Events Trial

This interactive visualization displays monthly revenue and profit data as animated bar charts, toggling between the two metrics every two seconds. Built with React and D3.js (v5), it uses SVG rendering with transitions to animate bar height changes and data updates. The chart includes a legend, axis labels, and an interactive tooltip powered by d3-tip that displays the current value on mouseover. The bars animate smooth transitions using d3-transition, with new elements growing from the baseline and removed elements shrinking away in blue.

Let's make a face with D3.js!

This horizontal bar chart displays student enrollment counts for various university module codes, sorted along the y-axis. The visualization uses the D3.js library (v5) to load data from a CSV file, map the module codes to a band scale on the y-axis, and the student counts to a linear scale on the x-axis. The chart renders as SVG rectangles, with blue bars representing the data, and includes labeled axes for "ModuleCode" and "Students".

Polished Scatter Plot with Menus

This interactive scatter plot explores the Iris Dataset, with dropdown menus to select which attributes map to the x and y axes. The visualization uses React for the user interface and D3.js for data processing and rendering, with scales created via `d3.scaleLinear`. Each data point is a circle with a tooltip showing its value, and the axes are labeled with the selected attribute names. The code also uses `d3.csv` to load the data and `d3.extent` for domain calculations.