CS360 A2 dotplot

100%

CS360 A2 dotplot

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 6, 2024

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.

AI-generated description

Tried to add hover to see the year of each data point, did not work... Would have made the graph's trends more readable.

MIT Licensed

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

87% match

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

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

75% match

Loading thumbnail…

A5 Line Chart D3

This line chart displays the percentage of smokers in the United States from 1980 to 2012, comparing total, male, and female rates over time. It uses d3.csv to load data from smokersus.csv, d3.scaleBand and d3.scaleLinear for axes, and d3.line to generate three separate paths for each demographic group. Circles are drawn using SVG circle elements with hover tooltips created via appended title tags. The chart is rendered as an SVG element sized to the window dimensions, with color-coded points and lines for each category.

EEric Yao

74% match

Loading thumbnail…

A6 Diverging Bar Chart D3

This diverging bar chart visualizes the percentage-point change in smoking rates between 2011 and 2012 across five countries, with positive differences extending rightward in blue and negative differences leftward in red from a central zero axis. The chart uses D3.js v7 to load the CSV dataset, compute the absolute maximum difference for symmetric axis scaling, and render SVG rectangles with horizontal orientation. A d3-scale linear color scale maps negative to positive values through light grey, while the d3-legend plugin adds a horizontal color legend. Hovering highlights bars in orange, and the chart includes labeled axes for both percentage difference and country names.

EEric Yao

74% match

Loading thumbnail…

A7 Small Multiples of Line Chart

This visualization employs a small multiples layout to compare smoking prevalence trends across three countries—China, Pakistan, and India—from the "smoking.csv" dataset. Each panel contains a line chart with time on the x-axis and smoking rate on the y-axis, encoded with a distinct color. The SVG is rendered using D3.js, with each country's data isolated via grouping and plotted in its own cell. The use of small multiples allows for easy comparison of trends over time, while the legend and axes provide context. The design emphasizes clarity through consistent scales and minimal visual noise, enabling viewers to focus on the shape of each line. The example demonstrates the power of small multiples for comparative analysis, though it leaves room for interactive enhancements.

RRavneet Singh Bhatia

71% match

Loading thumbnail…

A6 Barchart D3

This example visualizes the percentage of smokers in the United States from 1980 to 2012 using a vertical bar chart. Each bar’s height and color encode the recorded percentage value, with a sequential blue color scale mapped via `d3.scaleSequential` and `d3.interpolateBlues`. The chart includes axes, labels, a title, and a legend generated with the `d3-legend` library’s `d3.legendColor`. Data is loaded from a CSV file and rendered as SVG using D3 v7, with tooltips provided by appended `<title>` elements.

EEric Yao

70% match

Loading thumbnail…

A7 - Heatmap

This heatmap visualizes the trend of smoking population percentages across five countries (China, India, Pakistan, Sri Lanka, and the World) over time. Each cell represents a country-year combination, with color intensity mapped from white to red using a linear scale to indicate the percentage of smokers. The visualization includes a color legend titled "Smoking Population %" and provides interactive tooltips on hover, displaying the country, year, and exact percentage. The chart uses D3.js with SVG rendering, featuring labeled axes for year and country, and a smooth color gradient to highlight variations in smoking prevalence across the dataset.

RRavneet Singh Bhatia

69% match