P

Peter Gish

@peterg7·23 public vizzes

Loading thumbnail…

Top 10 Hashtags - Predicted Sentiment

This visualization displays the 10 most frequently used hashtags from a Russia-Ukraine Twitter dataset, with each hashtag’s bar segmented by predicted sentiment (negative, neutral, or positive) using a diverging color scale. The chart emphasizes overall frequency via bar length while sentiment proportions are shown within each bar. Built with D3 v7, it uses `d3.csv` to load remote data, `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for counts, and `d3.scaleOrdinal` for sentiment colors. The SVG rendering includes a legend from the d3-legend plugin, gridlines, and axis labels, with data processed from sentiment counts and frequency values.

Loading thumbnail…

Tweet Sentiment Distribution - Predictive

This visualization shows the predicted distribution of tweet sentiments—negative, positive, and neutral—as a donut chart, with each slice labeled by its percentage. The data is loaded from a CSV file using `d3.csv` and preprocessed to calculate percent ranges. The chart is rendered with SVG paths generated by `d3.pie` and `d3.arc`, while a color scale via `d3.scaleOrdinal` maps sentiments to distinct colors. A legend created with `d3.legendColor` clarifies the color encoding, and a title is displayed above the chart.

Loading thumbnail…

Top 10 Hashtags

This visualization ranks the 10 most frequently used hashtags from a dataset of Twitter sentiment related to the Russia-Ukraine conflict. Each horizontal bar is segmented by sentiment category—positive, neutral, or negative—using a color scale defined by `d3.scaleOrdinal` with the Tableau10 scheme. The chart is rendered as an SVG using D3 v7, with axes and gridlines generated by `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a remote CSV via `d3.csv`, and the legend is built with the d3-legend plugin.

Loading thumbnail…

Word Sentiment Distribution - Predictive

A donut chart displays the predicted sentiment distribution of words from a Russia-Ukraine Twitter analysis dataset, breaking percentages into negative, positive, and neutral categories. The visualization uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal mapping sentiment categories to distinct colors. Percent labels are positioned using d3.arc centroids, and a categorical legend is rendered via the d3-legend plugin's d3.legendColor. The data is loaded as CSV from a GitHub repository, and the SVG rendering uses a custom viewBox with margins and a fixed radius for the arc paths.

Loading thumbnail…

Tweet Sentiment Distribution

This visualization shows the sentiment distribution of tweets about Ukraine, displaying the percentage of tweets categorized as negative, positive, or neutral in a pie chart. The chart uses D3.js v7 with an SVG rendering approach, pulling data from a GitHub-hosted CSV file. The code employs `d3.pie()` and `d3.arc()` to generate the pie slices, `d3.scaleOrdinal` with a custom color scale for sentiment categories, and the d3-legend library to display the color legend. Percentages are shown on each slice using `d3.format(".1%")`.

Loading thumbnail…

Word Sentiment Distribution

A pie chart visualizes the distribution of sentiment categories—negative, positive, and neutral—for words in a Russia-Ukraine Twitter dataset, using d3.pie and d3.arc to generate SVG arcs with percentage labels. A d3.scaleOrdinal maps colors to sentiments, while a d3.legendColor legend identifies categories. Data loads as CSV from GitHub, and the chart emphasizes proportional percentages rather than raw counts.

Loading thumbnail…

US Population Estimates 2020-

A choropleth map of 2020 US state population estimates uses a linear color scale from light gray to teal to encode population values. The visualization loads state population data from a CSV and US state boundaries from GeoJSON, then merges them by state name. It renders the map using d3.geoPath with the d3.geoAlbersUsa projection, and includes a vertical legend built with d3.legendColor. The SVG output is responsive and styled with a custom CSS file.

Loading thumbnail…

Word Sentiment Distribution

This visualization displays the sentiment distribution of words from a Russia-Ukraine Twitter dataset, using a stacked horizontal bar chart segmented into negative, positive, and neutral categories. The bar’s segments are scaled proportionally to each sentiment’s percentage, labeled with their exact values. Built with D3.js v7, it loads CSV data from a remote repository, maps sentiment colors via `d3.scaleOrdinal`, and positions rectangles using `d3.scaleLinear`. The chart includes an SVG-based legend generated with the d3-legend library and custom axes.

Loading thumbnail…

Temperature in US Cities over Time

This visualization displays temperature measurements for New York, San Francisco, and Austin over time, using multiple colored lines on a shared time axis. The chart lets users click on city labels to show or hide corresponding lines, with hover interactions resetting stroke colors. Built with D3 v7, it loads a TSV dataset, parses dates with `d3.timeParse`, and renders SVG paths via `d3.line` with curve interpolation. The y-axis is labeled in degrees Fahrenheit, and lines are colored using `d3.scaleOrdinal` with `d3.schemeCategory10`.

Loading thumbnail…

Raccoon Proximity Viz

This interactive network visualization shows proximity relationships among raccoon observation records in Illinois from 2015. Nodes represent individual data points, while links indicate connections weighted by proximity value, with thicker strokes for stronger associations. The visualization uses a force-directed layout powered by d3.forceSimulation, combining d3.forceManyBody, d3.forceLink, and d3.forceCenter to position nodes. Data is loaded from a remote JSON file using d3.json, and the graph is rendered as SVG with d3.select. Node and link styling are defined in a custom stylesheet.

Loading thumbnail…

Global renewable energy production (per capita) from 2010-2020

This visualization shows the ratio of energy consumption to production for ten countries in 2010, with each bar colored by the relative production of renewable energy. A diverging stacked bar chart uses a linear scale for the x-axis and a band scale for the y-axis, while a diverging color scale (interpolateRdYlGn) encodes production values. The chart is rendered as an SVG using D3 v7, with data loaded from a CSV file via `d3.csv` and axes created with `d3.axisBottom`.

Loading thumbnail…

US Solar and Oil Production 2010-2020

This visualization shows US electricity production from solar and oil between 2010 and 2020, with bars representing solar production percentages and color encoding oil production values using a sequential YlOrRd color scale. The chart filters data to the United States from a CSV source, using d3.csv for loading and preprocessing. It employs d3.scaleBand for the year axis, d3.scaleLinear for the percentage axis, and d3.scaleSequential with d3.interpolateYlOrRd for color mapping. Axes are rendered via d3.axisBottom and d3.axisLeft, with a d3.legendColor legend indicating oil production levels.

Loading thumbnail…

Chicago Energy Usage - Histogram

This example visualizes average energy consumption per Chicago census tract using a histogram with equal-width population bins. The p5.js sketch loads energy-usage data from a CSV file through the `loadTable` API, binning records by total population and computing the average kilowatt-hours per bin. Rendered on a 900×700 canvas, the chart displays bars colored in blue, a dot overlay at each bin’s average, and axes with configurable tick counts. The custom `linspace` function generates bin ranges, while CSS and HTML handle the page layout.

Loading thumbnail…

Chicago Energy Usage - Histogram

This histogram visualizes the distribution of average building ages for Chicago energy usage data from 2010. The p5.js sketch loads a CSV dataset and renders a box plot overlay, displaying summary statistics like quartiles, median, mean, and outliers alongside the histogram. It uses custom statistical calculations for percentiles and thresholds, with a mapping function to convert data values to canvas coordinates. The visualization highlights the spread and central tendency of building ages through both the histogram bins and the superimposed box plot elements.

Loading thumbnail…

California Bee Population

This visualization shows a scatterplot matrix (SPLOM) comparing four bee colony metrics—starting, maximum, lost, and renovated colonies—for the top five US states with the most initial colonies from 2015 to 2022. Each cell plots one metric against another, with points colored by state using a categorical color scheme. The code loads CSV data via `d3.csv`, preprocesses rows to remove invalid markers, and calculates the top states by average starting colonies using `d3.group` and `d3.mean`. It builds the matrix with `d3.scaleLinear` axes and configures SVG rendering through D3 v7, using `d3.axisBottom` and `d3.axisLeft` for tick marks and `d3.scaleOrdinal` for color encoding.

Loading thumbnail…

California Bee Population

This visualization displays the starting number of honey bee colonies in the top three US states from 2015 to 2022, based on data from a NASS CSV file. It renders a multi-series line chart in SVG using D3 v7, with each state's trend over time plotted via `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleTime`. The code filters data by removing invalid markers and Q3 entries, then optionally trims outliers using an interquartile range method.

Loading thumbnail…

California Bee Population

This interactive bubble chart visualizes US bee colony data from 2015 to 2021, plotting starting colonies on the x-axis and maximum colonies on the y-axis, with bubble size proportional to added colonies and color representing renovated colonies. Built with D3 v7, the visualization uses SVG rendering and animation, featuring a tooltip on hover and gridlines for readability. The chart loads data from a remote CSV file and employs scales for position, size, and color, with an optional outlier-removal toggle. A linear time axis handles quarterly data parsing, and the design references the d3-graph-gallery bubble chart template.

Loading thumbnail…

US Honey Bees

This visualization shows US bee colony population trends for the 2020-Q2 period across states, plotting starting colony counts on the x-axis against maximum colony counts on the y-axis. Each circle represents a state, with its radius encoding the number of added colonies via `d3.scaleLinear` and its color mapped to renovated colonies using `d3.scaleSequential` with `d3.interpolateYlOrRd`. The SVG chart uses `d3.axisBottom` and `d3.axisLeft` with tick marks, and filters out the United States, California, and Texas as outliers. Data comes from a CSV file loaded via `d3.csv`.

Loading thumbnail…

Thermostats in Chicago Communities (2010)

This scatterplot shows the relationship between census block population and the total number of installed thermostats across Chicago communities in 2010. Each circle represents a community area, plotted with population on the x-axis and thermostat count on the y-axis. The visualization uses D3 v4 to load data from a CSV file, create scales and axes with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`, and render SVG circles. The data comes from an energy-usage dataset hosted on GitHub.

Loading thumbnail…

Thermostats in Chicago Communities (2010)

This horizontal bar chart displays the top 10 Chicago communities with the highest average number of installed thermostats in 2010, using data from the city’s energy usage CSV. The visualization uses D3 v4 to load and aggregate the data, compute mean therm values per community, sort and select the top entries, and render SVG rectangles scaled by a linear x-axis and a banded y-axis. Axis labels, tick formatting, and a title are styled via CSS, with grid lines drawn through tick size configurations.

Loading thumbnail…

p5 Climate Change Heat Map

This visualization displays monthly average temperatures for seven randomly selected countries as a heat map, using color-coded rectangles arranged in a grid. Each row represents a country, each column a month, with color intensity reflecting temperature relative to the global dataset minimum and maximum. Built with p5.js, it loads CSV data from a GitHub repository via `loadTable`, processes the data in `preprocess()`, and renders the heat map using `rect()` and HSL color encoding. Hovering over a cell displays the country name and temperature value in a popup, while axis labels and a title provide context.

Loading thumbnail…

p5 Climate Change Dot Plot

This dot plot visualizes the relationship between average temperature and average temperature uncertainty across global country-level climate data from September 2013 onward. Each blue dot represents a country-month observation, with temperature on the x-axis and uncertainty on the y-axis, using a dataset loaded from a GitHub-hosted CSV file. The p5.js sketch maps raw data values to screen coordinates, draws axes with labeled ticks, and renders approximately 2,500 points per frame using the `point()` API. The visualization reveals how temperature uncertainty varies across different temperature ranges.

Loading thumbnail…

p5 Climate Change Bar Chart

This visualization is a horizontal bar chart that presents a histogram of global land temperature data. It shows the distribution of average temperature readings across all countries, with each horizontal bar representing a range of temperatures and its length indicating the number of data points within that range. The chart is built using the p5.js library, which reads a CSV file from a GitHub repository and preprocesses the data into buckets. The code uses `loadTable` to fetch the data, `createCanvas` to set the drawing space, and `rect` and `line` functions to render the bars and axes.