Skip to main content
Log in
B

bhavi.kenia@gmail.com

@bhavikenia·24 public vizzes

Loading thumbnail…

A9-World Choropleth Map

This is a choropleth map showing the global crime index by country, using a red sequential color scale where darker shades indicate higher crime levels. The visualization loads world GeoJSON boundaries and crime index data from a CSV, then renders each country as an SVG path via `d3.geoPath` with a Mercator projection. A tooltip displays the country name and crime index on hover, while the color scale is defined with `d3.scaleSequential` and `d3.interpolateReds`. Countries without data appear gray.

Apr 14, 2025
Loading thumbnail…

A9-Proportional Symbols Map

This proportional symbols map visualizes the relative cost of living across US states, using the area of each circle to represent its cost index. Hot pink circles mark the top ten most expensive states, while purple circles denote all others. Built with D3 v7 and TopoJSON, it projects state boundaries using an Albers projection via `d3.geoPath` and scales circle radii with `d3.scaleSqrt`. Interactive tooltips appear on hover, displaying each state's name, cost index, and rank. The map overlays state outlines with data from a CSV of state cost indices.

Apr 14, 2025
Loading thumbnail…

A9-US Choropleth Map

This animated choropleth map displays the 2020 census population for each U.S. state, using a color scale to encode population values with interactive tooltips. The visualization loads population data from a CSV file and U.S. state boundaries from TopoJSON, then uses `d3.geoAlbersUsa()` for the projection and `d3.geoPath()` to render the SVG paths. State polygons are colored by population via a color scale, with a tooltip showing details on hover.

Apr 14, 2025
Loading thumbnail…

A8-Edge-Bundling

This visualization shows an edge-bundling layout of a firm-to-firm network from a CSV dataset of high-tech companies. It uses d3.cluster to arrange leaf nodes on a circular radial layout, then draws cubic Bézier curves between linked nodes with d3.lineRadial and curveBundle.beta(0.85). SVG text labels rotate around the circle, and links are rendered as low-opacity blue strokes to reveal clusters of connections. The hierarchical structure is built via d3.hierarchy from CSV-processed source-target pairs.

Mar 25, 2025
Loading thumbnail…

A8-Adjacency Matrix

This adjacency matrix visualizes network connectivity within a high-tech firm dataset, displaying nodes along both axes with turquoise cells marking edges. The D3.js v7 implementation loads CSV data, builds a binary matrix, and renders it as SVG rectangles. Interactive features highlight rows and columns in orange upon mouseover, while tooltips reveal the specific source-target relationship. Node labels appear alphabetically along the top and left edges using SVG text elements.

Mar 25, 2025
Loading thumbnail…

A8-Node-Link Diagram with Force-Directed Graph

This example shows a force-directed node-link diagram of inter-firm relationships in the high-tech sector, loaded from a CSV dataset. Nodes are rendered as hotpink circles and links as gray, curved paths whose widths scale with link weights. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`. It also uses D3’s drag behavior to move nodes and a custom tooltip on hover, with the SVG drawn entirely through D3 v7.

Mar 25, 2025
Loading thumbnail…

A7-Multi-Line Chart in D3

This multi-line chart visualizes flight delays by cause—Carrier, Late Aircraft, National Aviation System, and Weather—across months for a single year. It uses D3 v6 with SVG rendering, loading CSV data from a GitHub gist. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate paths for each delay category, with a custom legend and axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Mar 18, 2025
Loading thumbnail…

A7-Small Multiples Chart in D3

This example presents a small multiples chart of flight delays by airport, visualizing four delay categories—Carrier, Late Aircraft, National Aviation System, and Weather—across monthly data. It uses d3.csv to load data and d3.line to render each series as a separate line graph, with d3.axisBottom and d3.axisLeft providing tick marks and labels. The chart employs d3.scaleOrdinal with d3.schemeCategory10 to color-code each category and d3.legend from d3-legend to display a legend, arranging the four plots in a 2x2 grid within an SVG.

Mar 18, 2025
Loading thumbnail…

A7-Heat Map in D3

This heat map visualizes US flight delays by month and delay type (Carrier, Late Aircraft, National Aviation System, and Weather) using data loaded from a CSV file. Each cell’s color encodes the delay count via d3.scaleSequential with interpolateTurbo, while d3.axisBottom and d3.axisLeft label the months and categories. Built with D3 v6, it renders as an SVG with a tooltip on mouseover, showing the month, category, and delay value, along with a color legend.

Mar 18, 2025
Loading thumbnail…

Scatter Plot in D3 with Qualitative Color Scale

A scatter plot visualizes workout data, mapping distance in miles to the x-axis and duration in minutes to the y-axis. Each point is colored according to the exercise type using D3’s `d3.scaleOrdinal` with the `d3.schemeCategory10` qualitative color scale. The SVG is rendered with D3 v7, and a categorical color legend is added via the `d3-legend` library. The data is loaded from a CSV file, and axes and labels are generated using D3’s `d3.axisBottom` and `d3.axisLeft`.

Mar 3, 2025
Loading thumbnail…

Bar Chart in D3 with Diverging Color Scale

This example presents a horizontal bar chart comparing exercise durations, where each bar is colored using a diverging rainbow color scale that encodes the duration value. The chart loads workout data from a CSV file and renders it as SVG using D3.js v7, with a linear x-axis for minutes and a band scale for exercises. The code employs `d3.scaleSequential` with `d3.interpolateRainbow` for coloring, `d3.axisBottom` and `d3.axisLeft` for axes, and the d3-legend library to add a color legend.

Mar 3, 2025
Loading thumbnail…

Bar Chart in D3 with Sequential Color Scale

This bar chart displays the duration of various exercises, using a sequential green color scale to encode duration values from low to high. The visualization is built with D3 v7 and rendered as SVG, loading workout data from a CSV file hosted on GitHub. It uses `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleSequential` with `d3.interpolateGreens`, and `d3.axisBottom` and `d3.axisLeft` for axes. A color legend is added using the `d3.legendColor` library, with axis labels for exercise and duration.

Mar 3, 2025
Loading thumbnail…

A5-Line Chart in D3

This example loads the Spotify 2023 dataset from a CSV file and visualizes three metrics—total streams, average energy, and average valence—as separate colored lines across the release day of the month. Using D3.js v7, the code aggregates data with `d3.rollups`, scales the axes with `d3.scaleLinear`, and draws lines via `d3.line()`. The SVG chart includes labeled axes and a legend, with all rendering handled through standard SVG elements in an 800×500 viewport.

Feb 25, 2025
Loading thumbnail…

A5-Bubble Chart in D3

This visualization maps Spotify’s top songs of 2023 onto a bubble chart that plots each track’s danceability and energy percentages, with circle size encoding total streams. The D3.js code uses `d3.csv` to load the dataset, `d3.scaleLinear` to build the x- and y-axes, and `d3.scaleSqrt` to size the bubbles. Hovering over a circle triggers mouseover events that reveal the track’s name and artist in a custom tooltip, while the hotpink fill changes to orange for emphasis.

Feb 25, 2025
Loading thumbnail…

A4 - Bar Chart in D3

This bar chart visualizes the number of delayed flights for various airports using data from a CSV file of airline statistics. Rendered using SVG, the visualization uses D3.js scales and axes to map airport codes along the x-axis and delay counts along the y-axis. Each bar is colored turquoise, with values labeled above the bars. The chart highlights comparative delays across airports, allowing viewers to quickly identify those with higher congestion or operational issues. The implementation leverages d3.select, d3.csv, d3.scaleBand, and d3.scaleLinear to structure the data and layout.

Feb 18, 2025
Loading thumbnail…

A3-Histogram

This example displays a histogram of runs scored by cricket players in Twenty20 international matches, sourced from a CSV file loaded via a gist URL. Built with the p5.js library, the sketch reads the 'Runs' column, calculates a 10-bin distribution, and renders the chart with axes, grid lines, and labels. Interactive tooltips appear on hover, showing the bin range and frequency count for each bar.

Feb 10, 2025
Loading thumbnail…

A3-Stripplot

This example shows a stripplot of the number of matches played by individual players in T20 cricket, drawn with the p5.js `ellipse()` function. It loads a CSV dataset from a GitHub gist, extracts the "Mat" column, and maps each value to a vertical position on the canvas. Jitter is added using `random()` to spread points horizontally, while the y-axis and min/max labels are rendered with `line()` and `text()`. The visualization relies on p5.js’s `loadTable()` and `map()` for data handling and scaling.

Feb 10, 2025
Loading thumbnail…

A3-Boxplot

This visualization displays a boxplot of the number of innings batted by players in T20 cricket, drawn with the p5.js library. The sketch loads a CSV dataset with `loadTable`, computes quartiles and outliers via a custom `quantile` function, and renders the plot on a canvas using shapes like `rect`, `line`, and `ellipse`. Purple dots mark outlier values beyond the whiskers, with labeled axes indicating statistical landmarks.

Feb 10, 2025
Loading thumbnail…

A2-Bar Graph

A2-Bar Graph is a p5.js visualization that displays a horizontal bar chart of the top 20 most-streamed songs on Spotify in 2023, using a CSV dataset. The bar lengths encode stream counts, with a hover interaction revealing exact values. The code uses p5.js's `loadTable`, `setup`, `draw`, and coordinate mapping functions to render the chart, axes, and labels.

Feb 4, 2025
Loading thumbnail…

A2-Dot Plot

This visualization displays the top 20 most-streamed songs on Spotify in 2023, using a dot plot with a logarithmic Y-axis to show stream counts. The data is loaded from a CSV file using p5.js's `loadTable()` function, with `map()` to scale values and `circle()` to render the dots. The chart includes custom tick mark labels formatted with abbreviations like "M" for millions, and rotated song titles along the X-axis for readability.

Feb 4, 2025
Loading thumbnail…

A3-Heat Map

A heat map of 49 Spotify songs from 2023 displays stream counts as a blue gradient, with cells colored from dark blue for low streams to bright blue for high streams. Hovering over a cell reveals the song name and its exact stream count in a tooltip. The visualization includes a legend with min and max stream values for reference. It uses the p5.js library alongside custom JavaScript to load CSV data and manage rendering, with an embedded Google-hosted CSV file providing the data.

Feb 4, 2025
Loading thumbnail…

P5 CSV Loader

This visualization loads a CSV dataset of car specifications from a GitHub Gist and renders a horizontal bar chart of fuel economy values. The p5.js `loadTable` function fetches the data in `preload()`, while `setup()` initializes an 800×800 canvas. The `draw()` loop iterates through the `economy (mpg)` column, drawing golden-yellow rectangles scaled by each car’s efficiency rating, providing a quick comparative view of miles per gallon across models.

Jan 30, 2025
Loading thumbnail…

Snowman in P5

This example draws a simple snowman using the p5.js library, constructing three overlapping circles for the body and smaller shapes for facial features and buttons. The code uses p5’s `setup()` and `draw()` functions with `createCanvas`, `background`, `circle`, `triangle`, and `fill` to render the scene on a 600 by 600 pixel canvas. It demonstrates basic 2D shape composition and color fills in a static sketch, with no interaction or data input.

Jan 28, 2025
Loading thumbnail…

Snowman in P5

This example demonstrates a minimal VizHub V3 runtime environment, showing a centered "Hello World!" message rendered directly into a container DIV. The code exports a `main` function that receives the container and uses template literals to inject an HTML string with a large font size, which can be interactively adjusted by alt-dragging the number in the editor. It highlights the simplified entry point without an `index.html` and the continuous hot reloading feature, using plain JavaScript and DOM manipulation rather than any external visualization library.

Jan 28, 2025