K

khushburajan2015@gmail.com

@Rajanshah1·27 public vizzes

Loading thumbnail…

Fork of State Map with Population

This fork draws two maps side by side. A world map uses an Aitoff projection to visualize 2014 GDP data by country, with a quantized blue color scale and a legend, loading geographic and economic data from the World Atlas, a gist, and Plotly’s datasets. A second U.S. choropleth map displays December 2024 population data, attempting to fetch FRED series JSON via a helper function with an API key, otherwise relying on fallback data. The code uses d3.geoPath, d3.geoAitoff, d3.scaleQuantize, and d3.json, with tooltips showing values on hover.

Loading thumbnail…

State Map with Population - Rajan

This visualization presents two maps: a world map using the Aitoff projection and a US state choropleth displaying unemployment rates. The US map colors states on a sequential scale, with hover interactions revealing exact values via a tooltip. Built with D3 v7, it uses `d3.geoAitoff` and `d3.geoAlbersUsa` for projections, `d3.geoPath` for rendering, and TopoJSON data from world-atlas for country and state boundaries. The choropleth color encoding is generated dynamically from inline CSV data, with a legend included.

Loading thumbnail…

Fork of State Map with Population - Rajan

A fork of a U.S. state map choropleth visualizes state population data using a blue sequential color scale. The visualization loads TopoJSON from the `us-atlas` package and a text file of state populations, parsing both via `Promise.all` and `d3.json`/`d3.text`. It projects boundaries with `d3.geoAlbersUsa` and `d3.geoPath`, and maps FIPS codes to state names via a lookup table. Users inspect values through an HTML tooltip triggered by mouseover, with SVG rendering for all map elements.

Loading thumbnail…

Rajan

This choropleth map displays the 2024 unemployment rate for each U.S. state, using a red color scale from 2% to 6%. Hovering over a state reveals its exact rate via a fixed tooltip. The visualization is built with D3 v7 and TopoJSON, using the `geoAlbersUsa` projection and `geoPath` to render state boundaries from the us-atlas TopoJSON file. The color mapping relies on D3's `scaleQuantize` and `schemeReds` palette, with an interactive legend generated from the scale's inverted extents.

Loading thumbnail…

TopoJSON - Rajan

A world map choropleth visualizes population estimates by country, with countries colored on a blue sequential scale, while nations lacking data appear in gray. The example loads country boundaries from TopoJSON via the `topojson-client` library and renders them with `d3.geoPath` in an SVG, applying a Mercator projection. Interactive tooltips display each country’s population value on mouse hover. The color mapping is derived from a `d3.scaleQuantize` scheme, and the map includes a graticule overlay for reference.

Loading thumbnail…

Family Tree - Rajan

A family tree visualization maps a lineage from grandparents to children, using a hierarchical layout. Each couple is displayed as a rounded rectangle, with the partners' names separated by a vertical divider, while single children are shown as circles. The chart uses d3.tree for the layout, d3.linkVertical for curved edges, and d3.csvParse to load the family data from an embedded CSV string. Node shapes and colors are assigned by the d3.scaleOrdinal scale based on each member’s generational type, with SVG rendering used throughout.

Loading thumbnail…

Family Network - Rajan

A force-directed family network that distinguishes generations and relationships. Grandparents, parents, and children appear as color-coded nodes, with solid lines for parent–child links and dashed lines for spouse connections. Built with D3 v7, it uses `d3.forceSimulation` to position nodes in an SVG canvas. A fixed tooltip displays on hover, while a legend clarifies the visual encoding of roles and link types.

Loading thumbnail…

Area Chart (Based on Line)

This area chart visualizes the monthly 2024 closing prices of Bitcoin (BTC) and Ethereum (ETH) from an embedded CSV dataset. It overlays two semi-transparent filled regions with distinct colors, with a solid line stroke on top of each to clarify the trend. The visualization is built using d3.scaleTime, d3.scaleLinear, and the d3.area and d3.line generators, rendering to SVG with axes formatted via d3.axisBottom and d3.axisLeft. A legend identifies each asset, and the chart includes axis titles for month and price.

Loading thumbnail…

Line Chart

A multi-series line chart compares monthly 2024 price trends for Bitcoin and Ethereum, using two distinct colored lines to show each cryptocurrency's rise and fall over the year. The chart includes a legend identifying each asset, labeled axes, and a title. Built with D3.js v7, the visualization uses `d3.csvParse` to ingest inline data, `d3.groups` to separate series, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` to generate paths, and `d3.axisBottom`/`d3.axisLeft` for ticks, all rendered as SVG with `d3.select` and `d3.append`.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes cryptocurrency market capitalization against 24-hour trading volume for ten major assets, with circle size encoding market dominance percentage. It uses logarithmic scales for both axes to accommodate the wide value ranges, while a square-root scale maps dominance to circle radius. The chart is built as a reusable factory function following the Bostock pattern, utilizing D3 v7's `scaleLog`, `scaleSqrt`, `scaleLog` APIs, and feature-based selection for efficient SVG updates. The code includes data parsing via `d3.csvParse` and `d3.autoType`, with hover tooltips displaying asset-specific details.

Loading thumbnail…

Pie Chart with Labels & Legend

This pie chart displays the market share of major cryptocurrencies by market capitalization, with labels and a legend identifying each asset. It uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme to generate SVG paths and text labels. Labels for slices under 4% are hidden to reduce clutter, while a legend on the right lists all assets. The data is parsed inline from a CSV snapshot using `d3.csvParse` and `d3.autoType`.

Loading thumbnail…

Fork of Fork of HTML Starter - Rajan Shah

This animated scatterplot visualizes the population growth of U.S. cities by comparing 2020 and 2024 population figures on the x- and y-axes, with point size reflecting the absolute growth rate. Built with D3.js, it uses a custom scatter chart function that joins SVG circles with data, animating their entry, update, and exit via `.transition().duration()` calls. The code loads city data from a CSV file, applies linear scales, and includes an interactive tooltip that displays city specifics on mouseover.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot that cycles through four different Iris flower measurements, updating the x-axis every two seconds. It uses the D3 v6 module `scatterPlot`, which builds a scatter plot with `scaleLinear`, `axisLeft`, and `axisBottom`, and renders as SVG circles. The plot reads the Iris dataset from a remote CSV via `csv`, and re-renders continuously by updating the x accessor, demonstrating data-driven animation.

Loading thumbnail…

REUSABLE SCATTER - Rajan

This interactive pie chart displays the population share of the top 8 U.S. cities compared to an aggregated "Other" category, with each slice labeled and color-coded. Built with the D3.js v7 library, the visualization programmatically computes the top cities from a provided CSV file and dynamically renders the pie using the `d3.arc` and `d3.pie` APIs for sector paths and layout, while a custom HTML legend updates alongside. The chart transitions smoothly using D3’s default animation on load, showing proportional percentages for each metropolitan area.

Loading thumbnail…

Fork of Stylised Bar chart

This horizontal bar chart displays populations for US cities, sorted in descending order with bars extending along a linear population scale. Built with React and D3 v7, it uses `d3.csv` to load data from a Gist-hosted CSV file and `d3.axisBottom` and `d3.axisLeft` for axes. The chart applies `scaleBand` for city categories and `scaleLinear` for population values, rendering bars as SVG `rect` elements with optional value labels via `d3.format`. A custom axis component adds faint vertical gridlines.

Loading thumbnail…

Fork of Fork of Refactored Bar chart with React & D3 -Rajan

The visualization displays US city population trends through two paired charts: a multi-series line chart comparing simulated population values for 2020, 2022, and 2024, and a combined bar-and-line chart showing 2020 bars with an overlaid growth-rate line. Built with React and D3 v7, it renders to a single responsive SVG using a viewBox. Data comes from a CSV file via `d3.csv`, with additional quantitative series generated through a seeded `mulberry32` random number generator. The implementation uses `d3.axisLeft` for grids, `d3.scaleLinear` for scaling, and a linear index-based x-axis.

Loading thumbnail…

Fork of Fork of D3 Scatter Plot -Rajan

This scatter plot ranks major US cities by population magnitude, with each circle’s position and radius encoding the city’s population in millions, while a blue color gradient adds an extra visual cue. The chart loads a CSV from a GitHub gist and uses `d3.csv` with `d3.autoType` to parse the data. It draws axes, gridlines, and labels using `d3.axisLeft`, `d3.axisBottom`, and SVG text elements, while `d3.scaleLinear`, `d3.scalePoint`, and `d3.scaleSqrt` map population to x-position, city name to y-position, and circle size, respectively. Interactive tooltips appear on hover via `d3.select` and mouse events.

Loading thumbnail…

RajanShah

This scatter plot visualizes the populations of major US cities, with each dot positioned along a vertical categorical axis for city names and a horizontal linear population scale. Dot size, color intensity, and position all encode population magnitude, while horizontal gridlines aid readability. Built with D3 v7, the visualization loads CSV data from a GitHub gist, uses `scalePoint` for the city axis, `scaleLinear` for population, and `scaleSqrt` for dot sizing. Hovering reveals a tooltip with the city name and exact population. The SVG renderer includes axis labels and a legend-free color scale using `interpolateBlues`.

Loading thumbnail…

Fork of Fork of Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

This example shows the population of U.S. cities as a horizontal scatter plot, with each city’s position along the x-axis reflecting its population in millions and circle size and color encoding the same value. It renders as an SVG using D3 v7, loading CSV data from a GitHub gist and sorting cities in descending order. The code builds linear and point scales, adds gridlines and axes, and implements hover tooltips via D3 event handlers.

Loading thumbnail…

Fork of Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

A fork of a fork of an ICE 6 scatter plot, this visualization displays the populations of US cities as dots along a vertical city axis. Each dot’s horizontal position encodes its population in millions, while both its radius and blue color intensity scale with that value. Built with D3 v7, the code loads CSV data, uses `scalePoint`, `scaleSqrt`, and `scaleSequential`, and renders an SVG with gridlines, axes, labels, and interactive tooltips on mouseover.

Loading thumbnail…

Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

This scatter plot visualizes the relationship between vehicle horsepower and price, using point size to encode sales volume and color to distinguish vehicle type. Built with D3.js v7, the visualization renders data from a bundled Car_sales.csv file as an SVG. The plot includes labeled axes, a hover tooltip for detailed inspection, and separate legends for the color-coded vehicle categories and size-scaled sales figures. The implementation uses D3's selection and scale APIs to map the dataset fields to visual encodings.

Loading thumbnail…

Fork of Refactored Bar chart with React & D3

This fork of the refactored bar chart example uses React with D3 v7 to render a horizontal bar chart of US city populations. The code defines reusable components for axes and marks, using `d3.scaleLinear` and `d3.scaleBand` to map population values and city names, while data is embedded and parsed via `d3.csvParse` from a local CSV string. Bars are drawn as SVG `rect` elements with hover opacity changes, and gridlines are created through a D3 axis call.

Loading thumbnail…

Fork of Scatter Plot with Color

This visualization displays petal length against petal width for the Iris dataset, using position on both axes and color to encode species. A color legend identifies the three species groups. The code builds the scatter plot with D3 v7 modules, drawing SVG circles with `d3.scaleLinear` for axes and `d3.scaleOrdinal` with the Tableau10 color scheme for categorical coloring. Gridlines, axis labels, and a legend are rendered via modular helper functions that handle axes and color legend.

Loading thumbnail…

Fork of Scatter Plot with Color

This horizontal bar chart visualizes the population of US cities in millions, with bars sorted in descending order. The chart uses rectangular marks to encode population values through both position along the x-axis and bar length, while color provides a uniform visual style. The visualization is built using React with D3.js v7, specifically leveraging `d3.scaleLinear` for the continuous value axis and `d3.scaleBand` for the categorical city names. Interactive hover effects adjust bar opacity, and data is loaded from an embedded CSV string containing city-population pairs.

Loading thumbnail…

Fork of Stylised Bar chart

This horizontal bar chart displays the populations of major US cities in millions, using rectangles whose length encodes value and whose vertical position encodes city. Built with React and D3 v7, the visualization loads data from a remote CSV, applies a linear scale for the population axis and a band scale for the categorical city axis, and includes gridlines, axis labels, and hover opacity effects for readability.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three species with color-coded points and a hoverable legend that fades non-selected species. Built with D3.js v7, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render axes and points, while a `ResizeObserver` handles responsive dimensions. The chart loads CSV data via `d3.csv`, applies BBC-inspired styling from a theme object, and supports smooth state management through VizHub's reactive container pattern.

Loading thumbnail…

Fork of HTML Starter

This example displays a simple SVG tree illustration alongside textual statistics about Nepal’s Himalayan Peaks dataset. The page loads a CSV file using `d3.text` and `d3.csvParse` with `d3.autoType`, then prints the file size, row count, and column count. The custom `MyArt.svg` artwork, featuring a green canopy and brown trunk, is embedded directly as an image. Styling is handled through standard CSS, with the D3 v7 library providing the data-loading and parsing functionality.