CS360 A2 Dot Plot

100%

CS360 A2 Dot Plot

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 6, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

CS360 A2 Dot Plot

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.

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…

Chinese population 2019 pro with dot

A dot plot displays the 2019 population of Chinese provinces, using circles positioned along a linear population scale and a point scale for province names. The visualization uses D3 v5 with an SVG rendering, importing `csv`, `scaleLinear`, `scalePoint`, and axis components to build the chart. Data comes from the National Bureau of Statistics, with population values loaded from a CSV file and formatted in millions. The chart includes labeled axes, grid lines, and a title, with circles styled in steel blue.

Wwyh1029

70% match

Loading thumbnail…

A2 Dot Chart

This visualization plots the ages of individuals involved in U.S. police shootings against the frequency of shootings per age, using a dataset loaded from a GitHub-hosted CSV file. The chart displays axes with linear scales, tick marks, and labeled counts, with blue dots representing each age-to-count pair. The code uses p5.js’s `loadTable` function to parse the CSV, and `createCanvas` with `map` to position elements. It draws the scatter plot and axes using p5.js drawing functions like `ellipse`, `line`, and `text`.

Nnathanjmuljadi@gmail.com

69% match

Loading thumbnail…

China / US - Distribution of total Co2 emissions in the population

This visualization compares the distribution of total CO2 emissions relative to population percentages for China and the US, using a hybrid scatter plot and bar chart layout within an SVG canvas. Two gray regions represent China's population (left) and CO2 emissions (right), with overlapping triangular paths and gridlines to convey proportional relationships. The chart is built with React and rendered via raw SVG elements, including `<path>`, `<line>`, and `<rect>` tags, with CSS positioning for axis labels. The minimal HTML page uses no external libraries, relying on inline SVG markup and absolute positioning for the rotated axis text.

MMaxLiebsch

69% 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

68% match

Loading thumbnail…

Let make a face

This bar chart displays country populations for China, India, the United States, and Vietnam, sourced from a local CSV file. The example uses React and renders with SVG, leveraging the D3.js API functions `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the axes and data points. It also demonstrates D3’s `csv` method for data loading and the `format` function for axis tick labels. The visualization applies a 100x multiplication to raw population values during data preparation, as seen in the code.

AAndrewsTrinh

67% match