Skip to main content
SimilarExport ZIP
100%

Assignment 2: Dot Plot (working!)

✓ Published0🌍 Public
Aamrubal
Last edited Feb 11, 2022
Created on Feb 8, 2022
Forked from HTML Starter

This dot plot displays the total number of new marijuana users aged 18–25 for each U.S. state and the District of Columbia. Each state is listed vertically with its corresponding value plotted as a point along a horizontal scale. The visualization uses the p5.js library to load a CSV dataset, render the canvas, and draw axes, gridlines, labels, and data points. The data source is a remote CSV file containing state names and user totals.

AI-generated description

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

See also React Starter.

Edited the CSV file to only contain two columns: States and Total Marijuana New Users Aged 18-25. I also reduced the States column in the orginial drugs.csv to only contain the first 50 instances of the state + DC.

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 2: Bar Graph (Working Version)

This bar graph displays total marijuana new users aged 18–25 for each U.S. state plus Washington, D.C., using horizontal bars scaled by value. The visualization loads data from a CSV file via p5.js’s `loadTable` in `preload`, then draws the chart in `setup` and `draw` with canvas rectangles and lines. State names appear on the left, with corresponding numeric labels at each bar’s end. The code uses p5.js 1.4.0 for rendering, with axes, tick marks, and a title generated programmatically on a 1500×1500 canvas.

Aamrubal
90% match
Loading thumbnail…

A7 Small Multiples Line Chart

This small-multiple line chart displays marijuana usage rates per 1000 people for ages 18–25 across US states, using data from the CORGIS dataset. Each state’s trend line is rendered in its own SVG cell, colored via a d3.scaleOrdinal palette, with a d3-legend color threshold legend. The visualization uses d3.group to separate data by state, d3.line to create paths, and d3.axisBottom and d3.axisLeft for axes, with a title overlaid in HTML.

NNoah C.
74% match
Loading thumbnail…

Dot Plot

This dot plot visualizes state expenditure data from 1992–2019, with each point representing a state’s total spending in hundreds of millions of dollars. The chart uses p5.js’s `loadTable` to fetch a CSV, `createCanvas` for rendering, and `point` with heavy `strokeWeight` to draw dots. Annotations highlight comparisons, such as New York’s spending being 1.5 times Texas’s, while the axes are manually constructed via `line` and `text`.

PPranay Matalia
71% match
Loading thumbnail…

Assignment1_Houra

This stacked bar chart displays the population distribution across three age groups (Under 5, 5 to 13, and 14 to 17 years) for eight U.S. states, with each bar sorted by total population and colored segments representing the age categories. The visualization uses d3.csv to load data from an external CSV file, d3.stack() to create the stacked series, and d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal for positioning and color encoding. Interactive tooltips are implemented with mouseover and mousemove events, while axes and a legend are generated using d3.axisBottom, d3.axisLeft, and appended SVG elements.

HHouraa
68% 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
68% match
Loading thumbnail…

Activity-8_Question-4

This scatterplot visualizes the relationship between total reported alcohol and tobacco use across U.S. states, where each bubble’s size represents the population of adults aged 26 and older. The color intensity reflects the rate of alcohol use per 1,000 people, with tooltips providing exact values. Built with D3 v7, the chart uses `d3.scaleLinear` for position, radius, and color encoding, along with `d3.axisBottom` and `d3.axisLeft` for axes. Data comes from a CSV hosted on GitHub, rendered as SVG circles over linear-scaled axes with custom legends.

Hharipadmavathim2023@gmail.com
68% match
Loading thumbnail…

A5 Bubble Plot (D3)

This bubble plot visualizes alcohol and tobacco usage across U.S. states, with circle size encoding population and color intensity representing alcohol use rates per 1000 people. Built with D3 v7, it uses `d3.scaleLinear` for position, radius, and color mapping, plus SVG circles with `title` elements for hover tooltips. The chart loads CSV data from a GitHub gist and displays axes with custom tick formatting, along with descriptive legends and labels.

NNoah C.
67% match
Loading thumbnail…

A2 - Dot Plot

This dot plot visualizes the top ten U.S. states by petroleum expenditure in transportation for 2019, with each blue dot positioned along a scaled x-axis that maps dollar amounts. The chart presents state rankings vertically, using labels and hover interactions that reveal exact values and draw a guide line to the axis. Built with p5.js, the sketch loads CSV energy data from a GitHub gist, processes it into a sorted dataset, and renders custom axes and dot annotations via the Canvas API.

RRavneet Singh Bhatia
67% match