C

cwb314159@gmail.com

@my-name-here·16 public vizzes

Loading thumbnail…

d3 Choropleth map

This choropleth map shows U.S. counties colored by their 2023 population estimates, using a logarithmic threshold color scale with seven blues to reveal regional population patterns. It loads population data from a CSV and county boundaries from a TopoJSON file via Promise.all, then renders the map using d3.geoPath on SVG paths. The fill color is assigned per county using d3.scaleThreshold and FIPS codes, with a d3.legendColor legend and a title clarifying the data shown.

Loading thumbnail…

d3 node-link forceDirected

This example shows a force-directed node-link diagram of a network, where connected nodes are arranged through a physics simulation with repulsive and attractive forces. The graph layout is computed using `d3.forceSimulation`, combining `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes and links dynamically. Each link’s color encodes its associated value via a Red-Blue sequential color scale. Nodes are rendered as circles with labels, and the simulation updates in real-time through the `d3.forceSimulation` tick handler, which also sets SVG line and circle positions. The data is loaded from a local CSV file containing source, destination, and value columns.

Loading thumbnail…

heatmap with legend d3

This heatmap visualizes the average fuel economy (mpg) of cars across model years and engine displacement ranges, using color intensity to represent efficiency values. The chart is built with D3 v7, loading CSV data and using `d3.rollup` to aggregate means, `scaleBand` and `scaleTime` for axes, and a sequential color scale with `d3.interpolateBlues`. Interactive tooltips display details on hover, while the legend is generated using the d3-legend library.

Loading thumbnail…

multiline chart with legend d3

This example shows a multiline chart tracking average fuel economy (mpg) per year, with lines colored by engine displacement range. The chart uses d3.rollup to aggregate the CSV data, d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with colorbrewer colors for the legend. SVG line elements are positioned using the scales, with axes rendered via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

scatterplot with legend D3

This scatterplot displays the relationship between car weight and fuel economy (mpg), with each point colored by the number of cylinders. The visualization uses d3.csv to load data, d3.scaleLinear for both axes, and d3.scaleOrdinal with a color scale to encode cylinder counts. A d3.legendColor component from the d3-legend library provides the color legend. The SVG chart includes labeled axes and a title, with circles positioned using x and y scales and rendered via D3 v7.

Loading thumbnail…

Divergent Barchart with legend D3

This divergent bar chart visualizes the fuel economy (mpg) of various cars, with each bar diverging from the dataset’s average value. Bars extending right indicate above-average efficiency, while those extending left show below-average performance, with color encoding the magnitude of deviation using a red-blue sequential scale. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, rendering as SVG with axes and bar labels. Data is loaded from a remote CSV file via `d3.csv`, and the visualization is set within a tall 1000×4000 pixel canvas.

Loading thumbnail…

barChartWithLegendD3

This example presents a bar chart visualizing the fuel economy (MPG) of various vehicles, with bars sorted alphabetically by vehicle name and colored using a sequential blue color scale that encodes the MPG value. A color legend is included to map the color gradient to the data range. The chart is built using D3.js (v7) with SVG rendering, reading data from a CSV file and leveraging D3’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, along with the `d3-legend` library for the color legend.

Loading thumbnail…

BoxPlotD3

This example uses D3 v7 to create a horizontal box plot that visualizes the distribution of fuel economy (mpg) for a dataset of cars. It computes statistical quartiles, median, and min/max values from the data, then renders a box and whisker plot with labeled values for each statistic. The visualization is drawn as an SVG, with the data fetched from a remote CSV file and mapped to a linear scale for the x-axis.

Loading thumbnail…

scatterPlotD3

This scatter plot visualizes the relationship between car fuel economy (mpg) and weight, with each circle representing a vehicle. The chart uses D3 v7 to load CSV data from a GitHub gist, then maps the data points using d3.scaleLinear for both axes. SVG circles are positioned via the x and y scales, with axis labels and a title rendered through d3.axisBottom and d3.axisLeft. The visualization highlights how heavier cars tend to have lower mpg ratings, demonstrating a clear negative correlation.

Loading thumbnail…

BarChartD3

This bar chart displays the fuel economy (MPG) of various vehicles, with each bar labeled by its exact MPG value and sorted alphabetically by vehicle name. The visualization uses D3 v7 to load CSV data from a remote gist, parse numeric values, and render an SVG with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while grouped SVG elements append both rectangle bars and text labels for each data point.

Loading thumbnail…

histogram

This histogram displays the distribution of car cylinder counts from a CSV dataset fetched via a Gist URL. It uses the p5.js library to load the data with `loadTable`, compute frequency counts, and render the bars, axis lines, and labels on the canvas. The visualization includes interactive hover feedback and a title, showing how a simple hash map can be used to aggregate and draw a frequency distribution.

Loading thumbnail…

box plot

This box plot visualization displays the distribution of horsepower values from a CSV dataset of cars, loaded via p5.js’s `loadTable` in `preload()`. The sketch calculates and renders the minimum, first quartile, median, third quartile, and maximum using custom functions, then draws the box-and-whisker plot on a 1000x500 canvas. The chart uses p5.js drawing APIs like `line()`, `point()`, and `text()` to mark statistical summaries, with a horizontal axis scaled proportionally to the data range.

Loading thumbnail…

Strip Plot

This strip plot visualizes the fuel economy (mpg) of individual cars from a CSV dataset loaded via p5.js `loadTable()`. Each point is jittered vertically with random offsets to reveal data density along a horizontal axis, with min/max values and tick marks labeled. The code sorts the mpg array in increasing order, then uses p5.js `point()`, `line()`, and `text()` to render the plot on a Canvas.

Loading thumbnail…

dot Plot

This dot plot visualizes the average fuel economy (mpg) of cars by year, drawing data from a CSV file of car specifications. The visualization uses p5.js to render horizontal bands for each year, with red points positioned along a scale from 14 to 36 mpg. The code computes annual averages by aggregating individual car mpg values from the loaded table, then maps these averages to screen coordinates using a linear scale. Grid lines and labeled tick marks (16–34) provide reference points for interpreting the trend across years.

Loading thumbnail…

BarChart

This example visualizes the cylinders and names of cars from a CSV dataset loaded via p5.js’s `loadTable` in the `preload` function. It renders a horizontal bar chart on a canvas, with each car’s name labeled on the left and a red bar extending to the right proportionally to its cylinder count. The sketch uses p5.js methods like `createCanvas`, `rect`, `text`, and `line` within the `setup` and `draw` functions, and includes gridlines with numeric labels for reference.

Loading thumbnail…

snowman Experiment

This example shows a simple snowman built from three overlapping white circles on a dark gray background, with black eyes, an orange triangle nose, and a curved smile drawn as an arc. The sketch uses the p5.js library, calling `createCanvas`, `background`, `fill`, `circle`, and `triangle` in the `setup` and `draw` functions. The code defines each facial feature with explicit coordinates and shapes rendered in a static 400 by 400 pixel canvas.