Skip to main content
Log in
H

hollyjpotter

@hollyjpotter·12 public vizzes

Loading thumbnail…

Bar Chart Sequential Color

This bar chart visualizes salary against years of experience, with each bar’s color mapping to its salary value using a sequential blue scale from ColorBrewer, accessed via the colorbrewer.js script. The chart is drawn as an SVG using D3 version 7, with axes and a color legend. The data originates from a CSV file hosted in a GitHub gist, and the legend is generated using the d3-legend library with a formatted label that abbreviates numbers.

May 19, 2022
Loading thumbnail…

Untitled

This example shows the diameters of planets in kilometers, with each planet represented as a dot on an SVG scatterplot rather than a bar chart. The x-axis maps planet names using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` for diameter values. Data is loaded from a CSV via `d3.csv`, and circles are appended to a group container with an explicit transform offset. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the visualization is built entirely with D3 v7 and SVG, drawing from a dataset of planet measurements.

Apr 7, 2022
Loading thumbnail…

Untitled

This interactive multi-line chart displays daily temperature trends for New York, San Francisco, and Austin, with each city represented by a colored curve on a shared time axis. Hovering over a line highlights it in its original color while graying out the others, and clicking a line toggles its visibility. Built with D3 v6, the visualization uses SVG rendering with animated transitions, d3.axisBottom and d3.axisLeft for axes, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scaling. Data is loaded via d3.tsv from a remote source.

Apr 5, 2022
Loading thumbnail…

Node Linked Diagram with Force Directed Layout

This example displays a node-link diagram using a force-directed layout, visualizing connections from the soc-firm-hi-tech network data repository. It renders purple circular nodes and black links in SVG with animation, where hovering enlarges a node and dragging repositions it. The code builds the simulation with `d3.forceSimulation`, applying `d3.forceManyBody` for repulsion, `d3.forceCenter` for centering, and `d3.forceLink` for edges, updating positions via a ticked handler.

Mar 29, 2022
Loading thumbnail…

Bar Chart

A grouped bar chart displays the relationship between years of experience and salary from a CSV file loaded via d3.csv. It uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the continuous y-axis, rendering steelblue SVG rectangles. Axis labels and a title are added via SVG text elements. The chart uses D3 v7 and renders exclusively as scalable vector graphics.

Mar 7, 2022
Loading thumbnail…

Bubble Chart

This bubble chart displays average salary by year for Stamen employees across multiple states, with circle size encoding a rate value and color distinguishing states. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for state colors. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and circles include a title tooltip for data inspection. Data comes from a CSV file loaded via `d3.csv`.

Mar 4, 2022
Loading thumbnail…

Dot Plot

This dot plot visualizes the relationship between years of experience and salary for Stamen employees as of January 2022, using the built-in d3.csv to load the dataset. It renders as a bar chart with steelblue rects, with an x-scale using scaleBand for experience and a y-scale using scaleLinear for salary. Axes are generated via d3.axisBottom and d3.axisLeft, and the salary axis is formatted with dollar signs. The SVG layout uses a fixed canvas size and manual margins.

Feb 21, 2022
Loading thumbnail…

boxPlot

This example visualizes a boxplot of CO2 levels (carbon intensity in gCO2/kWh) for European countries in 2020, displaying statistical summaries including minimum, maximum, median, and quartiles. The plot is drawn manually on a 1000x1000 canvas using p5.js, with loadTable() to import the CSV data and custom JavaScript functions for sorting and calculating median values. The visualization includes labeled axes and a title to communicate the distribution of carbon intensity across countries.

Feb 15, 2022
Loading thumbnail…

histogram

This histogram visualizes the distribution of power data values from a CSV file, grouping the data into eight bins spanning 0 to 800. The code uses p5.js to load the external dataset in a `preload()` function, then draws vertical grid lines and cyan bars, with each bar’s height scaled proportionally to the count of values in its bin. Axis labels and bin ranges are rendered directly on the canvas, and the visualization’s fixed dimensions and styling are defined through p5.js canvas drawing commands.

Feb 15, 2022
Loading thumbnail…

dotPlot

This dot plot visualizes carbon intensity (gCO2/kWh) for 2020 across multiple countries, with each circle representing a data point positioned along the y-axis based on its value. The chart includes labeled axes, tick marks, grid lines, and a rotated axis title indicating the measured metric. The visualization is built using p5.js, loading data from a CSV file via `loadTable()` and rendering circles with the `circle()` function. Data is processed from the `powerData.csv` source, with countries listed on the x-axis and carbon intensity values plotted vertically.

Feb 9, 2022
Loading thumbnail…

barChart

This example displays a vertical bar chart of carbon intensity data (gCO2/kWh) for 2020, loaded from a CSV file hosted on a GitHub gist. Each bar’s height represents a data value, with categorical labels drawn beneath the bars and a rotated axis title at the bottom left. The visualization is built using the p5.js library, with custom functions `drawTickYAxes` and `drawTickXAxes` that render grid lines and tick marks on the plot. A maximum value from the data drives the y-axis scale, labeled in increments of 50.

Feb 9, 2022
Loading thumbnail…

barchart.js

A single yellow circle moves horizontally across an 800-by-500 canvas on a gray background. The sketch uses the p5.js library, with `setup()` creating the canvas and `draw()` incrementing the circle’s x-position by one pixel each frame. This example demonstrates basic animation and state management through p5.js’s global `createCanvas` and `circle` functions.

Feb 8, 2022