Y

yyaaa1

@yyaaa1·40 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays U.S. Metro Areas violent crime data, letting users select which attribute to plot on each axis via dropdown menus. The visualization uses React for component-based rendering and d3.scaleLinear for axis scales, with SVG circles representing data points. Users can compare metrics including violent crime, homicides, robberies, and total population across metro areas. The chart includes axis labels, formatted tick values using d3.format, and a color legend with hover interactions that fade non-hovered categories. Data is loaded from a CSV file using d3.csv.

Loading thumbnail…

Interactive Color Legends with informative Tooltips and dropdown menu

This interactive D3.js scatter plot explores correlations in global life expectancy data from a CSV file, with dropdown menus to select variables for the x- and y-axes. A color legend, using an ordinal scale with ten categories, encodes continents; clicking a legend item highlights that continent’s data points. Hovering over a circle displays a tooltip with the continent, year, and axis values. The visualization uses SVG rendering with animated transitions for circles as axes change, and includes D3's `scaleLog` for axes and `axisBottom`/`axisLeft` for ticks.

Loading thumbnail…

Map of Nuclear Explosions with Time Histogram

This interactive visualization combines a geographic map of U.S. nuclear explosion sites with a time histogram. The map displays each detonation as a circle, with color indicating the responsible country and a legend that filters points on hover. A separate bar chart below shows the total number of nuclear events per year. Built with React and D3 v5, the visualization uses `geoAlbers` projection via `d3.geoPath`, scales from `d3.scaleOrdinal`, and a histogram created with `d3.histogram`. Data comes from the Nuclear Explosions CSV dataset.

Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

This interactive map visualizes H1B petition case statuses across U.S. cities. A colored dot represents each city, with its hue indicating the case status category. An interactive legend of statuses allows hovering to highlight cities with that status, dimming all others for easy comparison. Built with React and d3.v5, the visualization uses `d3.geoPath` and `geoAlbers` projection for the U.S. map, `d3.scaleOrdinal` for color mapping, and an SVG-based custom legend component that handles mouse events. Data comes from a CSV file containing city coordinates and case counts.

Loading thumbnail…

Total Crimes Map

This map visualizes the total violent crime rates across U.S. metro areas from 1975 to 2015, with each city represented by a semi-transparent circle positioned by latitude and longitude. The visualization layers a geographic outline of U.S. states over the data points, using a color encoding to differentiate crime rates and years. Built with Vega-Lite and rendered through the vega-lite-api, the map employs an Albers USA projection and fetches crime data from a CSV file, while state boundaries come from a TopoJSON source. The tooltip feature provides detailed city information on hover.

Loading thumbnail…

Total Crimes Map

This visualization displays the total number of crimes across U.S. cities using a choropleth map layered with circular points. The map renders U.S. states as geographic shapes and overlays city-level crime totals as circles, colored by value and showing city names on hover. It is built with Vega-Lite and the Vega-Lite API, using the `vl.markGeoshape` and `vl.markCircle` layers, an Albers USA projection, and TopoJSON data for state boundaries. Crime data originates from the U.S. Metro Areas Violent Crime Rates dataset, loaded via D3’s `csv` parser.

Loading thumbnail…

Sized Points on a Map

A geographic visualization displays US cities as circles, with area proportional to total crimes reported. City data originates from a CSV file, while state boundaries and graticules are drawn from the us-atlas TopoJSON. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering map features, and d3.scaleSqrt to map crime counts to circle radii. React and D3 v5 manage the SVG output, with semitransparent teal points layered over a muted landmass.

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, with point size proportional to the number of crimes. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, rendering spheres, graticules, and land boundaries from World Atlas TopoJSON data. Circle radii are scaled using d3.scaleSqrt, with city coordinates and crime statistics loaded from a CSV file. The React component architecture leverages hooks to fetch and process data asynchronously.

Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

This example visualizes H1B petition case statuses across U.S. cities on a map using React and d3.v5. The map renders state boundaries and graticules with `d3.geoPath` and `d3.geoAlbers`, while city coordinates are projected from a CSV dataset containing longitude and latitude values. An interactive legend, built as a custom React component, uses `onMouseEnter` and `onMouseOut` handlers to highlight a selected case status by fading non-matching circles. The visualization loads geographic data from the us-atlas TopoJSON CDN and petition data from a GitHub-hosted CSV file.

Loading thumbnail…

USA AIRPORT ON_TIME PERFORMANCE

This visualization displays the on-time performance of US airports, plotting each city with a gray circle positioned according to its latitude and longitude. The map is rendered using React and D3’s geoAlbers projection, with state boundaries, graticules, and a sphere background drawn via d3.geoPath. City coordinates are loaded from a CSV file using d3.csv, while state topology comes from TopoJSON, with interior borders generated using topojson’s mesh function. The visualization uses d3.v5 and React 16.9, with all marks rendered as SVG elements.

Loading thumbnail…

Multiple Views with Brushing

A world map displays cities sized by violent crime rates, with a time-series histogram below showing crime totals over time. Users can brush a time range in the histogram, which filters the map to show only cities with crimes during that period. The visualization uses D3’s `geoNaturalEarth1` and `geoPath` for map projections, `scaleSqrt` for bubble sizing, and `brushX` for the linked brushing interaction. Crime data is loaded from a CSV, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

An interactive choropleth map displays the geographic distribution of violent crime rates across US cities. The visualization uses a natural earth projection with graticules and state boundaries rendered via D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs. Circle markers sized by the `scaleSqrt` function represent each city's violent crime count, with data loaded from a CSV via D3's `csv` method. The map leverages React hooks for data fetching and renders all SVG elements through a component-based architecture.

Loading thumbnail…

Working Tooltips

A choropleth-style scatterplot maps the geographic distribution of violent crime across U.S. states, using a circle for each crime incident. The visualization relies on vega-lite-api to construct the specification, which is registered with Vega and Vega-Lite, while a custom tooltip handler from vega-tooltip displays the department name on hover. Data is loaded from a GitHub-hosted CSV, with a filter excluding certain states and a calculated field for zip-code prefixes. The Albers USA projection and a color scale generated with d3’s range and hcl functions map coordinates and hue by crime count.

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city violent crime rates, using a square-root scale to encode the data. The map includes landmasses, graticules, and country borders rendered via `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 v5. City coordinates are projected from longitude and latitude to SVG circle positions. The visualization is built with React, loads data via `useWorldAtlas` and `useCities` hooks, and uses TopoJSON for country boundaries and CSV crime data.

Loading thumbnail…

Missing Migrants Date Histogram

This visualization displays the monthly total of dead and missing migrants using a date histogram, with time on the x-axis and the count on the y-axis. The bars represent the sum of reported deaths and missing persons for each month, as recorded in the Missing Migrants Dataset. The code leverages React with D3 v5, specifically using `scaleTime` and `scaleLinear` for axes, `histogram` with `timeMonths` thresholds to bin the data, and `sum` to aggregate the totals per bin. The SVG rendering is generated via React components, with tooltips provided through SVG `title` elements.

Loading thumbnail…

Crime_rate vs year

This scatter plot displays the relationship between crime rate and year for U.S. metro areas, with each red semi-transparent circle representing a yearly data point. The visualization uses D3 v5 to load CSV data from a GitHub gist, mapping crime rate on the x-axis and year on the y-axis via `scaleLinear`. Both axes include gridlines and labels through `axisLeft` and `axisBottom`, while the SVG rendering supports custom styling for circles and text.

Loading thumbnail…

Interactive Color Legend with Menus

A scatter plot of Business and finance courses on Udemy lets users compare any two numeric attributes—price, number of subscribers, published lectures, or content info—via dropdown menus for the X and Y axes. Points are colored by instructional level using a categorical color scale. The accompanying color legend supports hover highlighting, fading non-matching points, while axis ticks are rendered with custom SVG components in React and D3 v5.

Loading thumbnail…

Interactive Color Legend with Menus

A scatter plot of Business and finance courses on Udemy lets users compare any two numeric attributes—price, number of subscribers, published lectures, or content info—via dropdown menus for the X and Y axes. Points are colored by instructional level using a categorical color scale. The accompanying color legend supports hover highlighting, fading non-matching points, while axis ticks are rendered with custom SVG components in React and D3 v5.

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset displays petal length against sepal width, with points colored by species. An interactive color legend on the right highlights a selected species by fading all other circles to 20% opacity. React manages hover state via `useState`, while D3's `scaleOrdinal` maps species to colors and `d3.csv` loads the data. The SVG visualization uses custom React components for axes, marks, and the legend, rendering with `circle` elements and D3 scales.

Loading thumbnail…

Points on a Map

A world map displays cities with population over 50,000 as semi-transparent teal dots, projected using the Natural Earth projection. The visualization layers graticules, land masses, and country borders from World Atlas TopoJSON, with city coordinates from a Simplemaps CSV. React manages the component state while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the geographic rendering, and `csv` and `json` load the external datasets.

Loading thumbnail…

Points on a Map

A world map displays cities with population over 50,000 as semi-transparent teal dots, projected using the Natural Earth projection. The visualization layers graticules, land masses, and country borders from World Atlas TopoJSON, with city coordinates from a Simplemaps CSV. React manages the component state while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the geographic rendering, and `csv` and `json` load the external datasets.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays the violent crime rates of U.S. metro areas, with the x and y axes each controlled by a dropdown menu. Users can independently select which crime metric to plot on each axis, including violent crime, homicides, rapes, robberies, or year. The visualization uses React for the interactive components, D3.js scales (scaleLinear, extent) and SVG elements for rendering the circles and axes. Data is loaded via D3’s csv function from a remote gist URL.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays U.S. metro area violent crime rates across multiple offense types, letting users swap the x- and y-axes via dropdown menus built with React state. The visualization uses D3’s scaleLinear for axes, csv parsing for data loading, and renders all marks and axes as SVG. Interactive color legend hovers fade unselected categories, while circle tooltips show formatted values.

Loading thumbnail…

Scatter Plot with Menus

An interactive scatter plot of the Iris dataset displays four flower measurements as points, with dropdown menus to select which attribute appears on each axis. React state updates the selected variables, and d3.scaleLinear computes the scales from the data extents. The SVG chart renders axes via custom React components and circles for each observation, with tooltips showing values formatted using d3.format.

Loading thumbnail…

React Starter

This React starter example demonstrates a simple pet-selection dropdown interface. The app renders a labeled select element populated with animal options (dog, cat, hamster, parrot, spider, goldfish) using React components and props. The code uses React 16.9 and ReactDOM to mount the App component into the page’s root element. The Dropdown functional component maps over an options array to generate the select’s option elements, while the App component composes the label and dropdown together for display.

Loading thumbnail…

Crime_dataset_cities vs crime rate

This bar chart visualizes violent crime rates per 100,000 residents across U.S. metro areas from 1975 to 2015, comparing average rates for each city using data from the UCR crime dataset. The bars are sorted descending by crime rate, revealing Detroit as the highest and Nassau County as the lowest. Built with the vega-lite-api, it uses a bar mark with q/x/y channel encodings, a tooltip aggregating total population, and custom axis styling from a shared config.

Loading thumbnail…

Smiley Face Part II

This example shows a simple smiley face rendered as an SVG graphic using React and D3. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc using the `d3.arc()` API with inner and outer radii. React manages the component structure and JSX markup, while D3 provides the arc path generator for the mouth shape. The code uses explicit pixel coordinates and constants for positioning, with the entire graphic centered at the midpoint of the 960-by-500 viewport.

Loading thumbnail…

molecules

This visualization shows a field of 1,000 colorful circles that collide and bounce off each other, with a larger fixed circle at the center that can be dragged with the mouse. It uses d3.v3’s force layout and collision detection via d3.geom.quadtree to simulate physical interactions, while rendering the circles as SVG elements. The root node is fixed and follows the mouse pointer, and the force graph continuously updates the circle positions on each tick. The scene is interactive, allowing users to move the central node and watch the surrounding circles respond.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG Data Set. Red semi-transparent circles mark each car, with axes labeled “Horsepower” and “Weight” and a title at the top. The visualization uses d3.csv to load data, d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft to render gridlines and tick marks. SVG elements are manipulated via d3 selections, with axis labels and styling defined in an external stylesheet.

Loading thumbnail…

Udemy_Price vs num of subscribers

This bar chart displays the relationship between course price and number of subscribers for business and finance courses on Udemy, using color to distinguish instructional level. It reveals that most beginner-level classes have prices between 20 and 80 dollars, while the most expensive courses also attract the most subscribers. The visualization is built with vega-lite-api, using D3 to load CSV data from a GitHub gist, and renders via vega-lite with SVG output. Tooltips display subscriber counts on hover.

Loading thumbnail…

Udemy_Price vs num of subscribers

Using d3 and the vega-lite-api, this visualization plots the relationship between course price and the number of subscribers in a business-and-finance Udemy dataset. A bar chart displays each course’s price on the x-axis and subscriber count on the y-axis, with bars colored by instructional level. The chart reveals that most beginner-level courses are priced between $20 and $80, while the most expensive courses also attract the highest subscriber numbers. Data loads asynchronously via d3’s CSV parser, and rendering uses vega-lite’s markBar encoding with a custom config for axis styling and tooltips.

Loading thumbnail…

Crime_dataset_year vs crime rates

A bar chart displays U.S. violent crime rates per 100,000 people from 1975 to 2015, showing a rise peaking around 1991 followed by a dramatic decline through 2015. The visualization uses the vega-lite-api to encode year as an ordinal field and violent crime rate as a quantitative field, rendered as bars. Data is loaded via d3.csv from a gist-hosted CSV file, with custom axis styling configured to improve readability.

Loading thumbnail…

Crime_dataset_year vs crime rates

This visualization displays U.S. metro area violent crime rates per 100,000 people as vertical bars across years, revealing a rise from 1987 to 1991 followed by a sharp decline through 2004. The chart uses Vega-Lite API with d3.csv to load the UCR crime dataset, encoding year on the x-axis and violent crimes per 100k on the y-axis. Bars are sized at 10 pixels, with tooltips showing total population, and the view is configured with custom axis styling and dark text for improved readability.

Loading thumbnail…

Obesity values vs Countries

A bar chart shows obesity rates for sixty countries, highlighting that the Cook Islands has the highest value and Burundi the lowest. The chart encodes country on the x-axis, sorted by descending rate, and the obesity value on the y-axis. It is built with the vega-lite-api, using `vl.markBar` and `vl.encode` with `fieldQ` and `fieldN`, and loads data from a CSV via d3’s `csv` function. The visualization is rendered as an SVG with a custom config and tooltip handler.

Loading thumbnail…

Crime_dataset_cities vs crime rate

This bar chart visualizes violent crime rates per 100,000 residents across U.S. metro areas from 1975 to 2015, comparing average rates for each city using data from the UCR crime dataset. The bars are sorted descending by crime rate, revealing Detroit as the highest and Nassau County as the lowest. Built with the vega-lite-api, it uses a bar mark with q/x/y channel encodings, a tooltip aggregating total population, and custom axis styling from a shared config.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v5. It displays a summary of the dataset, including its size in kilobytes, row count, and column count, within a large text element. The code uses `d3.csv` to fetch and parse the data asynchronously, then `d3.csvFormat` and `data.columns` to extract metadata. The dataset, sourced from a GitHub gist, contains U.S. Metro Areas Violent Crime Rates by Type across multiple years.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by displaying key statistics about the Global Obesity Rates 2014 dataset. It uses d3.csv to fetch the remote CSV file, then reports the file size in kilobytes, the number of data rows, and the number of columns in a large pre-formatted text element. The code also includes commented alternatives using fetch with async/await and d3.csvParse, as well as a nested promise chain, highlighting different approaches to asynchronous data handling in D3 v5.

Loading thumbnail…

Business and finance courses on Udemy

This example reads a CSV file of Udemy business and finance courses from a remote GitHub gist and displays its basic statistics. The page shows the file’s approximate size in kilobytes, the total number of rows, and the number of columns in a large HTML `<pre>` element. It uses the D3.js library (v5) with the `d3.csv` method to fetch and parse the data, and `d3.csvFormat` to calculate the character length of the parsed content.

Loading thumbnail…

Loading and Parsing CSV Data On GitHub Gist

This example demonstrates loading a CSV file from a GitHub Gist and displaying summary statistics about it. The page uses d3.csv to fetch the remote dataset, then computes and shows the formatted data size in kilobytes, the row count, and the column count inside a large-format `<pre>` element. The code relies on d3.csvFormat to measure the data size and accesses the parsed array’s `length` and `columns` properties. The dataset referenced is the UCR Crime 1975–2015 CSV, though the displayed text labels it as “Boston Housing Data.”

Loading thumbnail…

Smiley Face Part II

A static smiley face rendered in SVG combines React components with D3’s arc generator. Orange face, black outline, red cheeks, and black eyes are positioned via JSX circle elements. D3’s `arc()` constructs the open mouth path with specified inner/outer radii and angular range, while React’s declarative props define all geometric attributes. The visualization demonstrates seamless integration of D3 geometry helpers within a React rendering pipeline, using fixed pixel dimensions and no interactive data.