Skip to main content
Log in
S

Sukhraj Singh

@SUKHRAJSINGH7·13 public vizzes

Loading thumbnail…

A9- Choropleth Map

This choropleth map visualizes US state populations using a purple color scale, with states lacking data rendered in gray. Built with D3.js, it loads GeoJSON and CSV data via `d3.json` and `d3.csv`, then draws state boundaries with `d3.geoPath` and `topojson.feature`. A quantized color scale (`d3.scaleQuantize`) maps population values to fills, and a legend with thresholds is rendered using `d3.pairs` and `d3.format`. The map is rendered as SVG with white state borders, and the legend sits in the lower right corner.

Apr 15, 2025
Loading thumbnail…

A8: Force-Directed Diagram

This example visualizes a small network of ten unlabeled nodes connected by ten links as a force-directed graph. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes, while user interaction is supported through `d3.drag` to move nodes. The code renders the graph in SVG, drawing links as lines and nodes as steelblue circles that update their positions on each simulation tick.

Mar 25, 2025
Loading thumbnail…

Snowman in P5

This example reveals a charming winter scene of a snowman drawn using the p5.js library. The sketch initializes a canvas within a dark background, rendering the snowman with simple geometric shapes—circles for the body, head, and eyes, and triangles for the nose and arms. The rendering approach relies on p5.js drawing functions called within the global `setup()` and `draw()` methods, with the `strokeWeight` and `fill` properties defining the visual style. The result is a static, playful illustration that demonstrates fundamental p5.js drawing capabilities.

Mar 25, 2025
Loading thumbnail…

A7: Line Chart

This multi-line chart visualizes average horsepower by year for Audi, BMW, Toyota, and Ford, using data from a CSV file loaded via `d3.csv`. Each car brand appears as a distinct colored line, with a legend generated using `d3.legendColor`. The chart aggregates values with `d3.rollup` and `d3.mean`, then renders line paths using `d3.line` on a linear scale axis, filtering to years from 2010 onward.

Mar 17, 2025
Loading thumbnail…

A7- Heatmap

This heatmap visualizes average engine horsepower across model years for the top five car manufacturers in a dataset loaded via d3.csv. The x-axis shows the year, the y-axis lists manufacturers, and each cell is colored using d3.scaleThreshold with explicit horsepower bins. Interactivity comes through a custom tooltip that appears on mouseover, while a manually constructed legend displays the color ranges. The chart is rendered as SVG using d3.scaleBand for the axes.

Mar 17, 2025
Loading thumbnail…

A6-Barchart

This bar chart visualizes the average horsepower of cars by manufacturer, using a sequential blue color scale to represent magnitude. The visualization is built with D3 v6, loading data from a CSV file hosted in a GitHub Gist, and then aggregating the data with `d3.rollup` and `d3.mean`. The chart renders as an SVG with bars positioned by `d3.scaleBand` and `d3.scaleLinear`, and includes a color legend via the `d3.legendColor` API from the d3-legend library.

Mar 3, 2025
Loading thumbnail…

A5-Line Chart

This line chart displays the average horsepower of cars over time, with each point representing the mean value for a given year. The data is loaded from a CSV file hosted on GitHub Gist using `d3.csv`. The visualization uses D3 v6's `scaleLinear` for both axes, applies a monotone curve to smooth the line, and renders the chart as an SVG. Axis labels and a title are added with standard D3 axis functions.

Feb 24, 2025
Loading thumbnail…

A5-Bubble Chart

This bubble chart visualizes the relationship between car engine horsepower and highway MPG, using bubble size to encode vehicle length and color to categorize city MPG fuel efficiency into low, medium, and high groups. Built with D3 v6, it loads a CSV file from a GitHub Gist, filters the data to 50 random samples, and renders an SVG with axes, a legend, and circles. The visualization uses `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` for color categories.

Feb 23, 2025
Loading thumbnail…

D3-Scatter Plot- A4

This scatter plot visualizes the relationship between horsepower and city MPG across vehicles, with colors encoding the model year. Built with D3 v7, it loads a CSV dataset from a GitHub gist and renders SVG circles scaled by horsepower and MPG. The chart includes axes, labels, and a legend generated from the unique years in the data.

Feb 18, 2025
Loading thumbnail…

A4-D3-BarChart

This bar chart displays the average city fuel efficiency (MPG) of cars across different model years, with each bar representing a year’s mean value and labeled with its numeric result. The visualization uses D3.js v7 to load CSV data, aggregate it with `d3.rollups`, and render an SVG with `d3.axisBottom` and `d3.axisLeft` for axes. Bars are drawn as `rect` elements scaled by `d3.scaleBand` and `d3.scaleLinear`, with the dataset sourced from a GitHub-hosted cars.csv file.

Feb 16, 2025
Loading thumbnail…

BoxPlot A3

This example visualizes city fuel consumption data from a CSV file using a box plot. The p5.js sketch loads the dataset with `loadTable`, extracts the `FuelInformation.City` column, and computes quartiles with a custom `getQuartile` function. It draws the five-number summary, including whiskers, a blue box, median line, and axis labels, layered over a grid. The chart highlights statistical distribution through Canvas rendering in a 800×500 pixel space.

Feb 10, 2025
Loading thumbnail…

A3-Histogram

This histogram visualizes the distribution of city fuel efficiency (in miles per gallon) from the cars.csv dataset. It uses the p5.js library to load the CSV data, process the "Fuel Information.City mpg" column, and render a bar chart with ten bins. The code dynamically calculates bin sizes and counts, then draws a grid, blue bars, and axis labels on a 800x500 canvas.

Feb 10, 2025
Loading thumbnail…

A3-Histogram

This example demonstrates the "Hello World" entry point for the VizHub V3 Runtime Environment, showing a single line of text rendered inside a container div. The code exports a `main` function that receives the container element and sets its inner HTML directly, with the font size hardcoded as a numeric value that can be adjusted via Alt-drag interaction. The visualization relies on the container's client dimensions and the `innerHTML` property to display the styled text, highlighting the simplicity of the new runtime’s setup without an index.html file.

Feb 10, 2025