CS360 A2 Dot Plot

100%

CS360 A2 Dot Plot

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 6, 2024

This visualization plots the percentage of men against the percentage of women in the populations of the United States and China, with each country's data points rendered in a distinct color. The chart includes labeled axes and tick marks that map the data range. The visualization is built with p5.js, using its `createCanvas`, `map`, and `ellipse` functions to draw the plot. Data is loaded from a CSV file via the `loadTable` function and processed in the `setup` and `draw` methods.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

CS360 A2 Dot Plot

This dot plot compares the percentage of men and women in the United States and China across different age groups. Blue dots represent US data points, while red dots represent Chinese data points, plotted on shared axes with tick labels. The visualization uses the Processing library via p5.js, loading data from a CSV hosted on GitHub. It calculates axis ranges dynamically from the dataset and projects each data point onto the canvas using the `map()` function, with custom-drawn axes and labels.

EEric Yao

94% match

Loading thumbnail…

CS360 A2 dotplot

A dot plot compares smoking rates between the United States and China by plotting each country's male and female percentages as blue and red circles. The p5.js sketch loads CSV data from a GitHub Gist, computes axis ranges from the data, and renders labeled axes with percentage ticks. It maps data coordinates to canvas positions to show the relationship between genders for each country. A legend identifies the two countries, while the chart title and axis labels clarify the visualization's purpose.

EEric Yao

87% match

Loading thumbnail…

CS360 A2 Dot Plot

This example renders a dot plot using React and D3, displaying individual data points as circles positioned along axes. The visualization leverages d3-scale for mapping data values to pixel coordinates and d3-axis to generate tick marks and labels. Data is drawn as SVG circles via React’s declarative rendering, with the framework managing state and updates. The plot’s design emphasizes simple, clear encoding of quantitative values, suitable for comparing distributions or categories. The underlying data structure is not specified, but the code follows a standard React starter template.

EEric Yao

73% match

Loading thumbnail…

CS360 A3 Strip Chart

This example displays a histogram of average math SAT scores for each U.S. state, using data from a CSV file loaded via p5.js’s `loadTable` function. The chart divides scores into bins of 20 points, from 380 to 620, and renders blue bars with grid lines and labeled axes on a canvas created by `createCanvas`. The code uses p5.js’s `map` and `normalize` functions to scale frequencies and positions, with text labels drawn via `text` and rotated for the y-axis title.

EEric Yao

71% match

Loading thumbnail…

CS360 A3 Strip Chart

This interactive strip chart visualizes average math GPAs across U.S. states from 2005 to 2015, with each year’s data points jittered along the x-axis to reveal distribution. The p5.js sketch loads a CSV of SAT scores, maps values to canvas coordinates, and renders blue ellipses for individual data points. Axis labels, a chart title, and rotated axis titles are drawn using p5.js text functions, while `random()` adds horizontal scatter to reduce overplotting.

EEric Yao

70% match

Loading thumbnail…

CS360 A3 Stripchart

This visualization displays average math GPAs for each US state from 2005 to 2015, plotted as a stripchart on a dark background. It uses the p5.js library to load a CSV dataset from a GitHub gist, then draws axes, labels, and data points using the `loadTable`, `map`, and `text` functions. The chart highlights trends in academic performance over time across states.

EEric Yao

70% match

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart visualizes gender distribution across Chinese provinces, with controls to toggle between raw counts and percentage-of-total values. The visualization uses D3.js v3, loading province and gender data from CSV files and animating transitions between the two display modes via `transition()` calls. The chart resets the stack layout's offset between "zero" and "expand" to switch counting methods, while axis tick formats change accordingly. A custom legend maps categorical colors to gender segments, and hover effects reduce rectangle opacity for emphasis.

LLex

69% match

Loading thumbnail…

CS360 A2 Bar Chart

This bar chart visualization displays global total smokers by year, with horizontal bars representing aggregated smoker counts from a CSV dataset. The code uses p5.js to load tabular data via `loadTable()` and `createCanvas`, then calculates yearly totals by summing the `Data.Smokers.Total` column. Bars are drawn with `rect()` and mapped to a maximum value of 2 billion, while axes labels and a title are rendered using `text()`. The interactive canvas resizes to the window, showing trends in smoking numbers across available years.

EEric Yao

69% match