M

mustafaksyed1@gmail.com

@myfriendmustafa·16 public vizzes

Loading thumbnail…

U.S Map Crime Rates

A choropleth map of the United States displays violent crime rates per 100,000 people for each state, using a yellow-to-red color gradient where darker shades indicate higher crime rates. The visualization relies on D3 v7 for SVG rendering, using `d3.geoPath` to draw state boundaries and a linear color scale to encode the 2005 FBI Uniform Crime Reporting data. Hovering over a state triggers a CSS opacity transition and reveals a floating tooltip with the specific crime value, while a gradient legend bar below the map provides the color-to-value mapping.

Loading thumbnail…

Conceptual Network

This interactive network visualizes connections between six movie genres and ten films, using a force-directed layout to position nodes. The visualization, built with D3 v7, employs `d3.forceSimulation` for the physics simulation and `d3.zoom()` to facilitate panning and zooming. Genre and film nodes are colored distinctly, with links representing genre assignments sourced from the IMDB dataset.

Loading thumbnail…

Tree

This example displays a three-layer biological taxonomy tree for the animal kingdom, organizing species under their respective classes beneath the root kingdom Animalia. The visualization uses D3.js v7 with the `d3.hierarchy` and `d3.tree` layout APIs to position nodes, while `d3.linkHorizontal` draws the connecting edges between hierarchical levels. Node colors and radii encode depth, with the root, class, and species layers distinguished by distinct hues. SVG rendering presents the tree with labels positioned to the left for parent nodes and to the right for leaf nodes.

Loading thumbnail…

World Map

This interactive world map visualizes the Global Peace Index (GPI) 2023, coloring each country on a green-to-red gradient from safest to least safe. Hovering a country fades it slightly and displays a tooltip with its name and score. Built with D3 v7 and TopoJSON, the map uses `d3.geoPath` to render SVG country shapes, with a CSS-defined legend bar indicating the color scale.

Loading thumbnail…

Area Chart

This area chart shows the number of Supreme Court cases decided per term from 2018 to 2024, with a red filled area beneath a black line and individual data points. The data is loaded from a CSV file and aggregated using D3’s `rollups` function. The visualization uses D3 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and an area generator (`area`) to render the chart, with labels added via the `@curran/axis-labels` library.

Loading thumbnail…

Area Chart

This example demonstrates a minimal area chart, rendering the text “Hello D3” in the center of the page. It uses d3.select to target the body element and sets its text content directly, without drawing any graphical marks or scales. The code relies on the D3 v7 library imported as an ES module via an import map, with a static HTML file providing the page structure.

Loading thumbnail…

Line Chart

This line chart displays the number of Supreme Court cases per term between 2018 and 2024, sourced from a CSV file of SCOTUS cases. Using D3’s `csv`, `rollups`, and `scaleLinear`, the code aggregates case counts, renders a line with `line`, and adds points as `circle.point` elements. Axes are drawn with `axisBottom`, `axisLeft`, `axisTop`, and labels via `@curran/axis-labels`, over a light gray inner rectangle.

Loading thumbnail…

Line Chart

This line chart visualizes monthly atmospheric CO₂ levels from 1958 onward, with data loaded from a CSV file. It uses D3.js version 7 within a React app to render an SVG. The chart handles missing values (-99.99) via a custom `lineDefinedValue` filter, and builds axes with `axisBottom` and `axisLeft`, using a time scale for the x-axis.

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of Supreme Court cases by issue area, using data from SCOTUS cases decided between 2018 and 2024. The chart displays the six most common issue areas, with each slice labeled by its case count and a legend identifying the corresponding category names. Built with D3 v7, the visualization uses `d3.csv`, `d3.rollups`, `d3.pie`, and `d3.arc` to process data and generate SVG paths, while `d3.scaleOrdinal` with `schemeCategory10` assigns slice colors. Labels are positioned using arc centroid calculations from a secondary `d3.arc` generator.

Loading thumbnail…

Pie Chart

This pie chart shows the distribution of US Supreme Court cases from 2018 to 2024 across six major issue areas, displaying each category’s share with percentage labels on slices larger than 10% and a legend with exact percentages. The visualization uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute and render the slices, labels, and legend from a CSV dataset fetched via `d3.csv`. The chart groups cases by issue area, counts them with `d3.rollups`, and sorts the results to highlight the most frequent topics.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes Supreme Court cases from 2018–2024, plotting petitioner codes against respondent codes. Each circle represents a case, colored by issue area (e.g., Criminal Procedure, Civil Rights), with a legend mapping colors to 14 issue categories. Built as a configurable `scatterPlot` function, it uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeCategory10` to render the SVG chart, complete with labeled axes, title, and interactive resizing via `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot visualizes US Supreme Court cases from 2018 to 2024, plotting each case’s term against its majority vote count. The visualization uses a reusable D3 module, `scatterPlot`, which leverages `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the axes. Data is loaded via `d3.csv` from a remote GitHub Gist. The SVG chart fills the browser window, with semi-transparent steelblue circles representing individual cases.

Loading thumbnail…

Scatter 2

This chart combines three encodings to show automotive trends across model years. It plots average MPG and horsepower as colored lines on a shared left axis, while average weight appears as bars using a separate right axis. The visualization aggregates individual vehicle records from the seaborn MPG dataset using `d3.rollups` and `d3.mean`, then renders an SVG with `d3.line`, `d3.scaleBand`, and multiple `d3.axis` components. A text annotation highlights the observed rise in fuel efficiency.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between bill length and flipper length for three penguin species (Adelie, Chinstrap, and Gentoo) from the penguins dataset by Roualdes. Each circle represents an individual penguin, colored by species, positioned along linear scales on both axes, and includes grid lines and axis labels. The code uses D3 v7 with `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for encoding, and renders the chart as SVG. A legend identifies species, and hover effects increase transparency.

Loading thumbnail…

Number of SCOTUS Cases by Issue Area

This bar chart displays the number of U.S. Supreme Court cases from 2018 to 2024 grouped by issue area, with issue names mapped from numeric codes and bars sorted in descending order. It uses d3.csv to load the data and d3.rollups to aggregate counts per issue. The visualization employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and SVG rectangles for bars with hover effects. Gridlines, value labels, and rotated axis labels are added via d3.axisBottom, d3.axisLeft, and d3.selectAll. The data is sourced from a GitHub gist CSV file.

Loading thumbnail…

CSCE 5320 Assignment 5

This visualization presents the total number of U.S. Supreme Court cases from 2018–2024, split into liberal and conservative decision directions. The code loads a CSV dataset via `d3.csv`, computes counts with JavaScript array filters, and renders an SVG bar chart. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.max` for domain scaling. Summary statistics appear in styled HTML text above the chart, which is drawn with `rect` and `text` elements styled via CSS classes.