K

Kevin Raj

@kevinraj127·16 public vizzes

Loading thumbnail…

ICE 8 - Social Network

An interactive social network visualization displays nine named individuals connected by weighted links. The graph uses D3’s `d3.layout.force` for physics-based layout, rendering nodes as rounded rectangles with gold fills and blue strokes, along with name labels. Links appear as black lines whose stroke width corresponds to each connection’s weight value. Data comes from a local `graph.json` file, and the visualization supports dragging nodes to reposition them, with the force simulation updating positions on each tick.

Loading thumbnail…

ICE #8 World Map

This map shows world country boundaries on a blue sphere with a graticule grid overlay. It uses D3's geoMercator projection and geoPath to render geographic features, while topojson's feature method converts TopoJSON data from the world-atlas dataset. The SVG elements include styled paths for the sphere, graticule, and individual countries loaded asynchronously.

Loading thumbnail…

ICE 8 Tree Layout

This visualization presents a Lord of the Rings family tree as a hierarchical node-link diagram. Orange and black circles in varying sizes represent characters and their importance, while link strokes and node fills use color to indicate lineage levels. Built with d3.tree() on a manually defined hierarchical dataset, the SVG render positions nodes through the layout's coordinate mapping, and custom path elements draw the curved links between parent and child nodes.

Loading thumbnail…

Map of Vietnam

This map of Vietnam displays the country’s provincial boundaries as grey regions with blue outlines. Built with React and D3 v4, it uses `d3.geoMercator` for projection and `d3.geoPath` to render features filtered from the world GeoJSON dataset. The visualization loads world geography from a remote source, isolates Vietnam’s geometry, and presents the result in an SVG canvas with a simple green background.

Loading thumbnail…

Bonus ICE Top 10 Albums on Metacritic

This interactive 3D bar chart visualizes the top 10 albums on Metacritic, comparing each album’s metascore against its adjusted score from the provided CSV data. The chart uses the `d3.x3d.barChartMultiSeries` API to render two series per album title, with axes generated via `axisLeft` and `axisBottom`. It loads data asynchronously using `d3.csv` and parses fields with a custom row function, then updates the chart with real data after displaying random placeholder data. The scene relies on X3DOM and the d3-x3d bridge for 3D rendering.

Loading thumbnail…

Bonus ICE - Interactive Bar Chart

This interactive bar chart visualizes the current inflation rates of G20 countries as of March 2023. The chart displays each country’s rate as a colored bar, with values labeled directly atop each bar. Upon hovering over a bar, the chart highlights that bar, draws a dashed reference line at its value, and shows the percentage divergence of every other country relative to the selected one. The visualization is built using React with D3.js v5, rendering SVG elements with animated transitions triggered by mouse events. The data originates from the Stack Overflow developer survey.

Loading thumbnail…

3D Scatter Plot - Bonus ICE

A 3D scatter plot displays economic indicators for G20 countries from a CSV dataset, plotting inflation rate, population in millions, and GDP in billions. Each point represents a country, with hover text revealing its name, and duplicate marker traces render the same data with distinct visual styling. The visualization uses Plotly’s `scatter3d` type via `Plotly.newPlot`, while D3’s `csv` function loads and parses the data, with axes explicitly labeled through the layout’s scene configuration.

Loading thumbnail…

Bar chart with D3.js

This bar chart displays the top 10 most populous countries for 2020, based on United Nations World Population Prospects 2019 data. The visualization uses D3.js v5 within a React framework, rendering bars as SVG rectangles. It includes animated interactions where hovering over a bar highlights it, displays its value, and shows the percentage difference compared to other countries. The chart features labeled axes for population and country names, with tooltips providing exact population figures via SVG `<title>` elements.

Loading thumbnail…

ICE #7 - Area Chart

This area chart visualizes global smartphone sales from 2007 to 2021 using CSV data containing yearly sales figures. The chart employs D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` to render an orange-filled region beneath the sales trend line. The SVG output includes labeled axes, a red title, and purple axis labels, with sales formatted in billions. Data is loaded asynchronously via `d3.csv` and rendered using a margin-based layout.

Loading thumbnail…

ICE #7 - Pie Chart

This pie chart visualizes February 2023 inflation rates for the top ten G20 countries, ordered from highest to lowest. Each slice's color corresponds to a category, and a legend lists country names alongside their percentages. The visualization uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to generate the SVG segments and legends. Data is loaded from a CSV hosted on a Gist, with values formatted with a custom percentage function. The chart is built with React and rendered as an SVG, with interactive mouseover logging of data values.

Loading thumbnail…

ICE #7 - Line Chart

This line chart displays plug-in hybrid electric vehicle (PHEV) sales in the United States from 2010 to 2021, highlighting a general upward trend with notable dips in 2015 and 2020. The visualization uses D3 v5 to render an SVG, with `d3.scaleTime` and `d3.scaleLinear` mapping years and sales counts, while `d3.line` generates the path and `d3.axisBottom` and `d3.axisLeft` create labeled axes. Data comes from a CSV file loaded via `d3.csv`, which is parsed to convert years to dates and sales to numbers before setting the scales’ domains.

Loading thumbnail…

ICE #7 - Reusable Scatterplot Iris Dataset

This interactive scatterplot explores the classic Iris dataset, displaying measurements of sepal and petal dimensions across three flower species. The visualization cycles through different feature combinations on the x-axis while the y-axis remains fixed, with colored elliptical markers distinguishing species. Built with React, D3.js, and SVG animation, it uses the `scaleLinear`, `axisLeft`, and `axisBottom` APIs for scaling and axes, while `setInterval` drives the sequential feature rotation. The chart reads CSV data from a remote source, fitting axes and plotting points for each iteration.

Loading thumbnail…

Scatter Plot for the Diamond Data Set

This scatter plot visualizes the relationship between diamond carat and price, with each point colored by cut quality (Fair, Good, Very Good, Premium, Ideal). The code loads a CSV dataset from a GitHub gist and renders SVG circles using D3 v6’s `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Axes labels for “Diamond_Carat” and “Diamond_Price” are appended as text elements, with a color mapping function defining per-cut hues.

Loading thumbnail…

Top 10 Rated Albums on Metacritic

This visualization displays a bar chart of the top 10 rated albums on Metacritic, ranked by their metascore values. The chart uses a horizontal bar layout, with album titles on the y-axis and metascore ratings on the x-axis. Built with React and D3 v5, it uses `csv` to load and parse data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles represent each album’s score, with gridlines and tick labels generated via `axisBottom` and `axisLeft`-style manual rendering.

Loading thumbnail…

ICE 5

This example displays a stylized heatmap of the top 500 highest-rated albums on Metacritic, rendered as an SVG image. The code uses D3 v7 to load and render data, but the visualization itself is a static JPEG embedded within the SVG via a pattern fill. The design uses a dark background and white text to present the title and a legend-like `pre` element, but no interactive or animated D3 behaviors are implemented.

Loading thumbnail…

Fork of Buddha in colors -overlapping Buddha - ICE#4

A golden Buddha silhouette sits against an orange background, rendered as an intricate SVG path. The code creates a layered visual by mapping nested arrays to generate hundreds of overlapping gold polygon star shapes with orange strokes. Using React and ReactDOM, the example renders a static SVG composition that combines the Buddha figure with repeated geometric patterns, labeling the artwork "Zen Buddha." The implementation relies on the SVG polygon and path elements to construct the abstract, overlapping design.