donaldminer

@donaldminer·14 public vizzes

Untitled

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin, with each city’s time series drawn as a smooth, colored path. The visualization uses d3.tsv to load the data, d3.scaleTime and d3.scaleLinear for positioning, and d3.line with curveBasis for the paths. Interactive labels trigger hover and click handlers that highlight or toggle the visibility of each city’s line using d3 selection styling. A d3.zoom behavior is applied to the SVG, though its zoom event handler remains empty.

Apr 5, 2022

Loading thumbnail…

A7 Node Link Diagram

This example visualizes a wild bird social network using a node-link diagram, where circles represent individual birds and lines represent observed associations between them. The graph is rendered as an SVG with D3.js v7, using the force-directed layout from `d3.forceSimulation` with charge and center forces to position nodes. Node colors are assigned via a categorical scale (`d3.scaleOrdinal` with `schemeCategory10`), while links are drawn as simple gray lines. Data comes from two CSV files containing node IDs and edge pairs.

Mar 29, 2022

Loading thumbnail…

A6 Bar Chart

This horizontal bar chart displays 2020 honey production figures per state, with bar lengths and color intensity both encoding the production value in thousands of pounds. The visualization uses D3 v7’s `scaleBand` for the categorical state axis and a `scaleLinear` for the numeric production axis, while a sequential red color scale (`d3.scaleSequential` with `d3.interpolateReds`) maps production values to fill colors. A color legend, generated via the d3-legend library’s `d3.legendColor`, sits at the right, and the data comes from the NAAS_Bee-Honey-2020.csv file, rendered as SVG rectangles.

Mar 7, 2022

Loading thumbnail…

A6 ScatterPlot

This scatterplot visualizes USDA NASS honey data from 2017–2021, plotting honey producing colonies (HPC) on a logarithmic x-axis against yield per colony (YPC) on a linear y-axis, with points colored by year using an ordinal color scale and a vertical legend. The chart uses D3 v7 with SVG rendering, employing `d3.scaleLog`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data, and `d3.axisBottom` and `d3.axisLeft` for axes. The `d3.legendColor` API adds the color legend, while circles are drawn with `join("circle")` and styled with stroke and fill attributes.

Mar 7, 2022

Loading thumbnail…

A6 Diverging Bar Chart

The A6 Diverging Bar Chart visualizes 2021 state-level USDA NASS data on bee colony loss versus renovation percentages, with each state rendered as two diverging bars along a horizontal axis. Positive values (renovated colonies) extend rightward in red, while negative values (lost colonies) extend leftward in blue, using a diverging color scale. Built with d3.v7 and SVG, the chart employs d3.scaleBand for state labels and d3.scaleLinear for the value axis, with a d3.legendColor component for the horizontal color legend.

Mar 6, 2022

Loading thumbnail…

Line Chart

This line chart visualizes global mean sea level rise from 1880 to 2013, with monthly data points plotted over time. The visualization uses D3.js v6 to load a CSV file, parse dates with `d3.timeParse`, and construct scales using `d3.scaleTime` and `d3.scaleLinear`. A `d3.line` generator creates the path, which is rendered as an SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`. The chart displays the overall upward trend in sea levels across the 133-year period.

Mar 1, 2022

Loading thumbnail…

Bubble Chart

This bubble chart displays the locations and burn acreage of wildfires and prescribed fires across the United States from late 2019. The map uses an Albers USA projection via `d3.geoPath` to render state boundaries, while fire incidents are plotted as circles sized with a `d3.scaleSqrt` based on the ACRES field. Wildfires are filled in red, prescribed fires in green, and unknown types in white. The visualization includes a legend showing area scale examples and fire type colors.

Feb 28, 2022

Loading thumbnail…

A4 Bar Chart

This example visualizes the number of inedible mushrooms across various families using a horizontal bar chart. The chart is rendered with SVG and leverages D3 v6’s `d3.csv`, `d3.rollups`, and scale functions like `d3.scaleLinear` and `d3.scaleBand`. Data is loaded from a CSV file hosted on GitHub, and the code filters counts for poisonous classes before mapping them to bar widths. The chart includes axes generated by `d3.axisBottom` and `d3.axisLeft`, with bars styled in a green fill.

Feb 26, 2022

Loading thumbnail…

A3 Strip Chart

A3 Strip Chart displays the distribution of mushroom stem widths as a scatter plot along a vertical axis, with each dot jittered horizontally to reduce overlap. The visualization reads data from a local CSV file loaded via p5.js’s `loadTable()`, then filters and sorts the values in `setup()`. Using the p5.js `createCanvas()`, `ellipse()`, and `random()` functions, it renders individual points on an 800×800 canvas with labeled tick marks and axis lines.

Feb 14, 2022

Loading thumbnail…

A3 Box Plot

This example visualizes the distribution of mushroom stem lengths using a box plot. It displays the minimum, maximum, median, and interquartile range of the dataset, which is loaded from a CSV file. The visualization is built with the p5.js library, using its `createCanvas`, `loadTable`, `sort`, and drawing functions. Data is processed by computing quartiles and the median, then rendered as a vertical line for range, a rectangle for the interquartile range, and a line for the median on a 500×500 canvas with custom axis labels.

Feb 14, 2022

Loading thumbnail…

A3 Histogram

This visualization displays the distribution of mushroom cap diameters from a CSV dataset, using a bar chart where each bar represents the log-scaled count of caps within a 5-centimeter bin. The p5.js TypedDict stores counts per diameter, while the canvas renders grid lines, axis labels, and colored bars. The code loads data via `loadTable` from a GitHub Gist and uses `log` to compress the y-axis values, with a legend and header text clarifying the measurement units.

Feb 14, 2022

Loading thumbnail…

A2 Heatmap

This heatmap visualizes the distribution of various mushroom species across eight habitat types—grasses, leaves, meadows, paths, heaths, urban, waste, and woods—and four seasons (spring, summer, autumn, winter). Each cell’s color intensity reflects the number of species recorded in that habitat-season combination, with data loaded from a CSV file. The visualization uses the p5.js library to create a canvas, process the tabular data with a `TypedDict`, and render colored rectangles via `lerpColor` to map species counts to a purple gradient.

Feb 8, 2022

Loading thumbnail…

A2 Bar graph

This visualization displays the number of poisonous mushrooms across different families, using horizontal yellow bars on a gray canvas. The p5.js code loads a CSV dataset from a GitHub gist, processes it with a p5.TypedDict to count occurrences, and renders each family name as a label with a proportional bar. A scaled axis below the bars marks count values with tick lines. The algorithm tracks the maximum count to scale the chart appropriately.

Feb 8, 2022

Loading thumbnail…

A2 Dot Plot

This dot plot compares the number of mushroom species found in eight different habitats, including woods, grasses, leaves, meadows, heaths, paths, urban, and waste areas. The visualization displays a single dot for each habitat along a logarithmic x-axis, using a log base of 1.5 to manage the wide range of species counts. The plot is built with p5.js, using its `createCanvas` and `ellipse` functions, and pulls data from a CSV file hosted on GitHub. Habitat names are displayed on the left, with the transformed log values plotted along the bottom axis.

Feb 8, 2022