Rudy Shayganfar

Female, Military Ration and Retention plotted by Region or System

This visualization plots the female ratio, military ratio, and retention rates of governmental cabinets across countries and years, with each circle representing a country. Users can select the x-axis, y-axis, and color mapping attributes from dropdown menus, and filter the displayed data by year using a slider. The scatterplot uses D3.js scales (scaleLinear, scaleOrdinal) and SVG circles with a color legend for region or system. Data comes from the WhoGov International Cabinets dataset, which includes over 50,000 cabinet members from 177 countries between 1966 and 2016.

Nov 3, 2020

Female v. Military by System with Menus, Slider for Year

This interactive scatterplot shows how female ratio, military ratio, and retention rates of government cabinets vary by political system across 177 countries from 1966 to 2016. Users select which attributes to plot on each axis via dropdowns and filter the data by year using a slider, while hovering over the color legend highlights individual government types. Built with React, D3 v5 scales (`scaleLinear`, `scaleOrdinal`), and SVG rendering, the visualization loads CSV data from the International Cabinets dataset using `d3.csv`.

Oct 28, 2020

Female v. Military by Region with Menus, Slider for Year

This interactive scatterplot displays the relationship between female ratio, military ratio, and retention among government cabinet members across global regions, with one dot per country. Users select which attribute appears on each axis via dropdown menus and filter the decade displayed using a slider spanning 1966–2016. The visualization uses React for state management, d3.v5 scales for positioning and color encoding, and SVG circles rendered from CSV data that aggregates the WhoGov International Cabinets dataset. Hovering over the color legend highlights all countries from a selected region while fading others.

Oct 28, 2020

Slider Practice

This example demonstrates a React-based interactive control featuring a single slider input for selecting a year. The interface presents a range slider from 1966 to 2016, with a label indicating the current selection. The selected year updates the component’s state using React’s `useState` hook, and the displayed value changes accordingly. The slider is implemented as a controlled component, where user interactions trigger the `onSelectedYearChange` callback. The code imports React and ReactDOM from the standard library, with no external data sources or visualization layers beyond the basic HTML input element.

Oct 28, 2020

Female v. Military by System with Menus, Filter by Year

This scatterplot compares government cabinet attributes—such as female ratio, military ratio, and retention—across countries, with each point colored by governmental system (e.g., parliamentary, presidential). Users select which attributes to plot on the x- and y-axes and filter data by five-year intervals via React dropdown menus. Hovering a color legend entry highlights points from that system. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, drawing data from a modified WhoGov International Cabinets dataset.

Oct 22, 2020

Female v. Military by Region with Menus, Filter by Year

This scatter plot shows the relationship between female ratio, military ratio, and retention rates of cabinet members across regions, with a dropdown menu to filter data by five-year increments. Built with React and D3 v5, it uses scaleLinear for axes and scaleOrdinal for region colors, rendered as SVG circles with tooltips. Data comes from the International Cabinets dataset, binned into five-year averages for each country.

Female v. Military by Region with Menus, Filter by Year

This interactive scatterplot visualizes International Cabinets data, plotting female ratio, military ratio, and retention rates against each other for each country. A year dropdown filters the displayed points to five-year averages, while the X and Y dropdowns select which attributes to compare. Color encodes geographic region, with hover highlighting and fading for non-selected regions. The visualization uses React with d3 scales for axes and colors, rendering SVG circles with tooltips to display country names.

Number of Countries with Female Ratio of Zero Plotted over Time

This line chart shows the number of countries with zero female cabinet members per year, revealing a steady decline after 1975 and fewer than 10 such countries annually since 2006. The React-based visualization uses D3 v5 functions including scaleTime and scaleLinear for axes, the d3.line generator for the path, and SVG circles with tooltips for data points. It loads CSV data from the WhoGov International Cabinets dataset through d3.csv.

Female v. Military

The chart displays the relationship between the ratio of female and military cabinet members across countries, revealing an inverse association. It renders a scatter plot using React and D3 v5, with `scaleLinear` for both axes and SVG circles for data points. Hovering reveals country names via the `<title>` element, while axis components (`AxisBottom`, `AxisLeft`) handle tick rendering. Data comes from the WhoGov International Cabinets dataset, covering 2006–2016 averages.

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. The color legend, implemented using d3.scaleOrdinal, indicates species. When hovering over a legend item, a React state variable filters the data to highlight only the selected species, dimming all other points through an opacity change. The chart is rendered as an SVG using React, with axes built from d3.scaleLinear.

Oct 15, 2020

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length (x-axis) against sepal width (y-axis), with each species represented by a distinct color and a custom legend of colored circles. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG rendering with reusable React components for axes, marks, and the legend. Data is loaded asynchronously via `d3.csv` from the remote iris.csv file.

Oct 14, 2020

Female v. Military by Region with Menus, Outliers Removed

This interactive scatterplot shows the 11-year averages of female ratio, military ratio, and retention rates for governmental cabinets across regions, with Singapore and Myanmar removed as outliers. Users select which attributes to plot on the x and y axes using React dropdown menus. The visualization is built with React and D3 v5, using d3.scaleLinear for axes, d3.scaleOrdinal for regional color coding, and SVG rendering with native React components for axes, marks, and legends. Data comes from the WhoGov International Cabinets dataset, filtered to exclude countries with regime changes.

Oct 8, 2020

Female v. Military by Region, Outliers Removed

This scatter plot shows the relationship between the female ratio and military ratio in government cabinets across world regions, with each point representing a country. Hovering over a point reveals the country name via a native SVG `<title>` tooltip. The visualization uses React and D3 v5, employing `scaleLinear` for both axes, `scaleOrdinal` with a categorical color scheme for regions, and a custom `ColorLegend` with hover highlighting that fades non-hovered regions. Data comes from the WhoGov International Cabinets dataset, averaged over 2006–2016, with outliers Singapore and Myanmar removed to improve scale readability.

Oct 8, 2020

Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset enables exploration of relationships between numeric flower measurements. Two dropdown menus, built with ReactDropdown, let users select which attributes (sepal length, sepal width, petal length, or petal width) map to the x and y axes. The visualization uses React with D3 scales (d3.scaleLinear) and axis components rendered as SVG. Data is loaded asynchronously via d3.csv, with tooltips showing precise values for each circle mark.

Oct 8, 2020

Menus with React

This example demonstrates a pet-selection menu built with React, displaying a dropdown that lets users choose from six animals and updates a displayed value in response. It shows how a reusable `Dropdown` component manages state through React hooks, specifically `useState` for tracking the selected value and `onSelectedValueChange` to handle user input. The interface renders via `ReactDOM.render`, with options defined in a JavaScript array and styled using inline CSS. The code uses React 16.9.0 from a CDN, illustrating a controlled component pattern for interactive menu selection.

Oct 7, 2020

Female v. Military by Region, Outliers Removed

Female v. Military by Region

This scatter plot shows the relationship between the ratio of female cabinet members and military personnel across countries, colored by world region, with a legend that highlights each region on hover. The data is drawn from the International Cabinets dataset and displays averaged 11-year ratios from 2006 to 2016, excluding countries that experienced regime change. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color encoding, and renders circles as SVG elements with tooltips.

Female v. Military

Female v. Military with Colors

This scatter plot shows the relationship between the female ratio and military ratio of governmental cabinet members across countries, with points colored by government system type. A color legend allows hovering to highlight specific government systems while fading others. The visualization uses React with D3.js v5 scales (scaleLinear, scaleOrdinal) for axes and color mapping, rendering SVG circles. Data comes from the WhoGov International Cabinets dataset, filtered to countries without regime change during the 2006-2016 study period.

Working with Time

This example shows a scatter plot of one week of temperature data from a CSV file hosted in a GitHub gist, with time on the x-axis and temperature in degrees on the y-axis. The visualization uses React components to render SVG circles, with d3.scaleTime and d3.scaleLinear for scales, d3.timeFormat for weekday tick labels, and d3.extent for domain calculation. Axes are custom-built using React, and each data point includes a title for hover-based tooltips. Data loading is handled asynchronously via d3.csv within a custom useEffect hook.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, with each bar's length proportional to population size. Built using React and D3 v5, it customizes data-driven SVG rectangles (via the `Marks` component) and axis lines, with tick labels styled by a custom font and muted colors. The chart reads population data from a CSV URL, formats large numbers using D3's `format` function, and renders axes using `scaleBand` and `scaleLinear` scales.

Refactored Bar Chart

This bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. Built with React and D3 v5, it uses SVG rendering to draw horizontal bars representing each country's population. The code separates concerns into reusable components for axes and marks, with D3's `scaleBand` and `scaleLinear` handling the coordinate mappings. Data is loaded asynchronously using D3's `csv` function and the first ten rows are selected for display.

World Map

This world map visualization displays global landmasses, country boundaries, and graticules using a Natural Earth projection. The land is filled with teal, while country interiors are outlined in green, and graticules appear in cyan over a light gray sphere. Built with React, the code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the map, and topojson’s feature and mesh functions to process the World Atlas TopoJSON dataset. The SVG output loads from unpkg’s world-atlas@2.0.2 file.

Cabinet Female Ratio by Country and Government System

This bar chart shows the 11-year average female cabinet ratio for each country, grouped and colored by government system, using data from the WhoGov International Cabinets dataset. The visualization is built with the vega-lite-api library, which wraps Vega-Lite and Vega, and loads CSV data via d3.csv. Bars are positioned by country along the x-axis, with female ratio on the y-axis, and the color encoding distinguishes government types to reveal that democratic systems tend to have higher ratios than dictatorships.

Oct 1, 2020

Cabinet Retention Rate by Country and Government System

This visualization uses a bar chart to show the average 11-year cabinet retention rate (2006-2016) for countries grouped by government type, revealing that civilian and royal dictatorships retain cabinets longer than democratic systems. The chart is built with Vega-Lite API, applying a bar mark with country on the x-axis, retention rate on the y-axis, and government type as color. Data is loaded from a CSV file containing a subset of the WhoGov International Cabinets dataset, with visualization parameters and styling configured through the Vega-Lite API’s encoding and config objects.

Oct 1, 2020

International Cabinets - Dataset Overview

This visualization displays a concise dataset summary for the International Cabinets dataset, showing the file size in kilobytes, the total number of rows (over 50,000 entries), and the number of columns. The example uses D3.js v5 to fetch the CSV from a remote gist URL via `d3.csv`, then calculates the data size with `d3.csvFormat` and accesses row and column counts through the parsed data object. The information is presented as large text within an HTML `<pre>` element.

International Cabinets - Females and Rention Rate

This scatterplot explores the relationship between the female ratio of international cabinets and their retention rate, using the WhoGov dataset covering over 50,000 cabinet members from 177 countries. The plot encodes female ratio on the x-axis and retention rate on the y-axis, with each circle representing a country-year observation; the low opacity reveals overlapping points, and the lack of a clear trend suggests no strong correlation. Built with vega-lite-api, it uses `vl.markCircle` and `vl.encode` for visual encoding, with data loaded asynchronously via `d3.csv` from a GitHub gist. The visualization renders as an SVG, with axis styling customized through a config object.

International Cabinets - Females over Time

A scatterplot shows the ratio of female cabinet members per country over time, with each point representing a country-year. The data reveals an upward trend in female representation from 1966 to 2016. Built with the vega-lite-api, the visualization uses `markCircle` with red, semi-transparent points, encoding year on the x-axis and `n_female_ratio` on the y-axis. Data comes from the WhoGov International Cabinets dataset, loaded via D3's `csv` function, with custom axis styling from a config file.

International Cabinets - Females and Military

This scatterplot visualizes the relationship between the ratio of female cabinet members and the ratio of cabinet members with military titles across countries and years. The chart displays an inverse relationship between the two variables. Built with the vega-lite-api and D3, it loads CSV data from WhoGov’s International Cabinets dataset, covering over 50,000 cabinet members from 177 countries between 1966 and 2016. Each point represents a country-year observation, with tooltips revealing country names on hover.

NYPD Complaints - Age of Officer and Ethnicity of Complainant

This bar chart shows the distribution of officer ages at the time of civilian complaints, with bars segmented by officer ethnicity. The visualization uses a stacked bar chart where each complaint is counted, and the color encoding maps the officer’s ethnicity. Built with d3.v5 and the vega-lite-api library, the code loads the NYPD Complaints CSV from a GitHub gist, then renders the chart with Vega-Lite’s markBar and count aggregation, styled with a custom dark theme.

NYPD Complaints - Complainant and Officer Ethnicity

This stacked bar chart visualizes the number of complaints filed against NYPD officers, segmented by complainant ethnicity and colored by the officer's ethnicity. Built with the Vega-Lite API, it uses the `.markBar()` method to encode the complainant ethnicity on the x-axis, the count of complaints on the y-axis, and the officer ethnicity as the color channel. The visualization loads its data from a CSV file hosted on GitHub, originally sourced from ProPublica’s dataset of over 12,000 civilian complaints, and customizes axis styling via a config object for improved readability.

NYPD Complaints - Age of Officer

This stacked bar chart shows the number of NYPD civilian complaints by officer age, with colors distinguishing complaint types via a legend. Built with the vega-lite-api and d3.v5, it loads a CSV of over 12,000 complaints from ProPublica. The visualization uses `vl.markBar()` with x-position for age, y-count for totals, and color encoding for complaint type, rendered through vega-lite’s SVG output.

NYPD Complaints - Dataset Overview

This example provides a concise overview of the NYPD Complaints dataset, displaying its size in kilobytes, row count, and column count in large text. The visualization uses D3 v5’s `d3.csv` method to load and parse the CSV file from a GitHub gist, then computes the formatted string length and dataset dimensions. It highlights the raw data structure without charts, serving as a minimal text-based summary of the dataset’s scale and schema.

American Cabinets - Scandals by Party

This stacked bar chart shows the number of cabinet appointees involved in scandals, broken down by political party, using the American Cabinets Appointments dataset. The visualization uses the vega-lite-api library, registering vega, vega-lite, and vega-tooltip, to render a bar chart where each bar’s height represents the total count of appointments and color encodes whether a scandal flag is present. Data is loaded asynchronously via d3.csv from a GitHub gist, and the chart is configured with custom axis styles for readability.

American Cabinets - Minorities by Party

This stacked bar chart shows the count of cabinet appointees by party affiliation, with bars divided into minority and non-minority segments. It uses the vega-lite-api in JavaScript to create a bar mark, encoding the categorical 'Party' field on the x-axis and 'Minority' on the color channel. Data is loaded asynchronously from a CSV of American cabinet appointments via d3.csv. The visualization is rendered with Vega-Lite and styled using a custom config that adjusts font sizes and removes axis domains.

American Cabinets Appointments - Dataset Overview

This visualization offers a concise quantitative summary of a dataset detailing American cabinet appointments from George Washington's presidency onward. The view reports three key metrics: the dataset’s approximate size in kilobytes, its total row count, and its number of columns. The code fetches the external CSV file using the `d3.csv` method and then formats the raw text to compute the file size, while directly accessing the parsed array’s length for rows and the `columns` property for columns. The resulting text is displayed in a large, preformatted element on the page.

Smiley Face Part II - Mila PWD

This example draws a stylized portrait of a Portuguese water dog named Mila using React and SVG. The visualization centers on a geometric dog face composed of polygons and circles, rendered responsively to fill the browser window. React elements define the SVG shapes, including white and brown eye circles, a dark nose, and a red tongue within a black muzzle, all positioned relative to the viewport center via a translated group. The code uses ReactDOM to mount the component into the DOM, with styling that hides page overflow.

Smiley Face Part I - Practice for CS 573

A yellow circle with a black outline and two smaller black circles for eyes forms a smiley face on a white background. The visualization is a static SVG drawing, rendered directly in the HTML markup without any dynamic behavior. The code uses the React and ReactDOM libraries, but only to render an unrelated "Hello" heading, while the smiley face itself is constructed from hardcoded SVG `<circle>` elements. The data source is not specified, and the piece serves as a practice exercise for a CS 573 course.