CS 360 Assignment 2 - Dot Plot

100%

CS 360 Assignment 2 - Dot Plot

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

This dot plot visualizes the top 10 startups by overall valuation, with each dot representing a company’s valuation in billions of dollars. The chart uses p5.js to load CSV data from a Google Sheets URL, then draws a titled grid with tick marks and horizontal lines, plotting each startup’s value as a filled ellipse. The data originates from a Kaggle dataset on startup valuations, cleaned and reduced to the top 10 entries. The visualization’s axes and labels are manually positioned using p5.js canvas drawing functions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

CS 360 - Assignment 2 Bar Plot

This bar plot shows the valuation of twelve US software startups in billions of dollars, with each bar labeled with the company name and its corresponding value. Built using React with p5.js, the visualization loads data from a Google Sheets CSV and renders horizontal bars with a custom y-axis scale. The code defines the x-axis from zero to forty and positions each rectangle manually using `rect()` calls while displaying text labels through `text()` functions. The dataset originates from a Kaggle startup valuation dataset, filtered for US software companies.

SSean Sanchez

84% match

Loading thumbnail…

Pie_chart_ice_7

This pie chart displays the top 10 company valuations in billions from a CSV dataset. The chart uses a D3.js v5 SVG rendering, with each slice colored via a custom `sectionColors` array and labeled with its value using `d3.pie` and `d3.arc`. A legend to the right maps company names to their respective colors and values. The data is fetched asynchronously from a GitHub gist, and the visualization is generated using `d3.scaleOrdinal` for color assignment and `d3.arc().centroid()` for text placement, all within an HTML page styled with CSS.

Pprashanth yamala

71% match

Loading thumbnail…

Dot Plot

This dot plot visualizes the ages of billionaires, with each green dot representing one individual’s age along the y-axis and their sequential index on the x-axis. The p5.js sketch loads a CSV dataset in `preload()` using `loadTable`, filters out zero-age entries, then renders axes, tick marks, and axis labels in `draw()`. It uses `map()` to scale data points, `ellipse()` for the dots, and `line()` for the chart framework, all within a 900x600 canvas.

RRiya Mathur

70% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most valuable companies, with market values in billions and a green axis label and title. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes. The chart is drawn as SVG rectangles, with the y-axis line and ticks removed, and the x-axis tick format converts values from gigabytes to billions. A React starter is also referenced in the README, though the main implementation relies on plain D3 v5.

Aamiralitah

70% match

Loading thumbnail…

Billionaires Dot Chart

This dot plot visualizes the founding years of ten billionaire-owned companies, with each dot positioned along a horizontal axis scaled to represent the year founded and labeled vertically by company name. Hovering over a dot displays its approximate founding year. Built with the p5.js library, the sketch loads a CSV file from a GitHub Gist using `loadTable()`, sorts the year data, and renders interactive circles with custom hit-testing via `mouseOnHover()`. Axis labels, tick marks, and a legend are drawn directly on the canvas.

AAllen Ho

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

69% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most valuable unicorn companies, with company names on the y-axis and valuation in billions on the x-axis. The visualization is built using React and D3.js, where React manages the component state and rendering of SVG elements, while D3’s `scaleBand` and `scaleLinear` handle the chart’s scales and tick generation. Data is loaded asynchronously from a CSV file via `d3.csv`, filtered to the top 10 entries, and rendered as blue rectangles.

Pprashanth yamala

69% match

Loading thumbnail…

Data visualization ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most-liked companies for stocks and crypto using a horizontal bar chart. The bars are rendered as SVG rectangles, with orange fills atop a green background, and the chart includes axis tick marks and labels. The code loads data from a CSV file using `d3.csv`, then uses a React component with `useState` and `useEffect` hooks to manage state. D3’s `scaleBand` and `scaleLinear` map company names and like counts, while the chart is drawn with JSX inside an SVG element, combining React’s declarative rendering with D3’s data utilities.

HHarishma Nallala

68% match