Dominic Fernandez

@dcfernandez1023·10 public vizzes

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in a large font. It uses a simple CSS class to set the font size and text alignment, with the message contained in a div element. The page demonstrates a minimal HTML structure with inline styling and JavaScript capabilities, serving as a foundation for more complex visualizations or web applications.

Apr 22, 2022

Loading thumbnail…

D3 Heatmap

This heatmap visualizes the number of Uber rides per month and year, with months on the x-axis, years on the y-axis, and color intensity encoding ride counts. It uses d3.csv to load the dataset, d3.scaleBand for both axes, and d3.scaleSequential with a color interpolator to map counts to cell colors. The SVG is rendered with d3.axisBottom and d3.axisLeft, while cells are drawn as rects. Data is aggregated client-side by parsing timestamps into month-year pairs.

Feb 25, 2022

Loading thumbnail…

D3 Scatterplot

This interactive D3 scatterplot visualizes cumulative Uber fare amounts per day from 2009 to 2015, using data from a Kaggle dataset. The SVG chart plots each date on the x-axis and total daily fares on the y-axis, with green circles marking individual points. The visualization uses `d3.csv` to load the raw data, `d3.scaleBand` for the time-based x-axis, and `d3.scaleLinear` for the fare amounts. Custom tick marks highlight the first date of each year, while gridlines and labeled axes improve readability.

Feb 25, 2022

Loading thumbnail…

Histogram - Distribution of TC in SF (2011-2014)

This example visualizes the distribution of total compensation for San Francisco city employees from 2011 to 2014, using a histogram with bins of $50,000. The chart displays the number of people in each compensation range along the y-axis, with axis labels and formatted tick marks. Built with the p5.js library, it loads salary data from a CSV file hosted on GitHub, processes the records to compute bin counts, and draws the histogram with custom scaling and axis rendering. The dataset is sourced from Kaggle’s SF Salaries collection.

Feb 14, 2022

Loading thumbnail…

Strip Chart - Distribution of Overtime Earnings per Year in San Francisco (2011-2014)

This strip chart shows the distribution of overtime earnings for San Francisco employees from 2011 to 2014, with each year plotted as a separate column of jittered dots. The p5.js sketch loads salary data from a CSV file and randomly positions points horizontally within each year’s bin to reveal density while maintaining the y-axis scale for earnings in dollars. Axis ticks and labels are drawn manually using p5’s line and text functions, with earnings formatted in thousands. The chart uses a Bootstrap spinner to indicate loading of the large dataset.

Feb 13, 2022

Loading thumbnail…

Box Plot - Distribution of Base Salary in SF (2011-2014)

This visualization uses box plots to show the distribution of mean annual base salaries across salary ranges for San Francisco municipal employees from 2011 to 2014. The p5.js canvas organizes data into $50,000 bins along the x-axis, with each box displaying quartiles, minimum, and maximum values. A toggle button reveals or hides median markers across the plot. The data is loaded from a Kaggle-hosted CSV, and the code computes quartiles and bins using custom array-processing functions.

Feb 13, 2022

Loading thumbnail…

Histogram

This histogram displays the distribution of base pay for San Francisco city employees from 2011 to 2014, using p5.js to load a CSV dataset and render the visualization on an HTML canvas. The code processes the data into bins of $25,000 increments, calculates frequency counts, and scales bar heights proportionally to the count axis. Axes with labeled intervals and value labels are drawn using p5.js drawing functions, with salary values formatted in a compact "k" notation for readability.

Feb 11, 2022

Loading thumbnail…

Heat Map

This heat map visualizes the average Uber fare amount for different passenger counts across the years 2009 to 2015, with color intensity indicating fare value (green shades for $9–13+) and a toggleable overlay that reveals exact dollar amounts. Built with the p5.js library, it loads a CSV dataset, aggregates fare averages per year and passenger count, and renders colored rectangles in a grid using the `rect` and `fill` functions. A legend on the right maps colors to fare ranges, while axis labels clarify that rows represent years and columns represent passenger counts.

Feb 6, 2022

Loading thumbnail…

Dot Plot

This dot plot shows the number of Uber rides per year, with each circle representing a year’s total ride count positioned along a horizontal axis scaled by increments of 2,000 rides. The visualization aggregates data from a CSV file loaded via p5.js’s `loadTable` function, then uses `createCanvas` and `circle` to render the points. Year labels appear along a vertical axis, and ride counts are formatted using a custom `kFormatter` function for values above 1,000. The plot excludes 2008 data and displays results across a 625×625 pixel canvas.

Feb 6, 2022

Loading thumbnail…

Bar Chart

This bar chart visualizes the total Uber fare amount per year, drawing on a CSV dataset of ride records. The visualization excludes 2008 data and sums the fares for each remaining year, displaying the results as a series of teal bars. The chart is rendered using the p5.js library, which loads the data with `loadTable`, processes it within the `draw` loop, and creates the visual elements. Custom functions like `kFormatter` are used to format large numbers with a "k" suffix on the y-axis, which is labeled "Fare Amount."

Feb 5, 2022