E

EngineerRajeev

@EngineerRajeev·17 public vizzes

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart displays the estimated 2010 religion breakdown for the 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each horizontal bar segments population by religion, color-coded via a categorical scale. Hovering over a bar reveals a tooltip with the specific religion, country, and population count, while hovering over the legend highlights that religion’s segments across all bars. The visualization is built with D3 v3’s layout stack, scales, axes, and the d3-tip library for tooltips, rendered as SVG.

Loading thumbnail…

Fork of NASCAR Starts Revised - Hover Capability Added

This bar chart visualizes the number of starts each NASCAR driver needed before their first race win, using data spanning 1975 to 2003. Hovering over a bar reveals a tooltip with that driver’s start count, win year, and track, powered by the d3-tip library. The chart uses d3.scaleBand and d3.scaleLinear for axes, with SVG rendering and mouseover/mouseout events to trigger the tooltip’s show and hide methods.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for a sample of automobiles from the UCI Auto MPG dataset. A scatter plot maps mpg to the horizontal axis and horsepower to the vertical axis, with point size encoding weight and color distinguishing origin. The implementation uses the Vega-Lite API to declare the chart specification, while d3.csv loads the remote dataset. Custom axis styling and tooltips are configured through Vega-Lite’s config object and the Vega Tooltip handler, rendering in SVG.

Loading thumbnail…

Fork of Cities on a Globe

This visualization presents an interactive orthographic globe displaying circles for cities with populations exceeding 100,000, sourced from preprocessed Geonames data. Users can pan and zoom the globe using drag gestures and the mouse wheel, with low-resolution country boundaries shown during movement and high-resolution shapes rendered when stopped. The code leverages d3.geoOrthographic, d3.geoPath, topojson, and d3-tip for hover tooltips, while a square-root scale maps population to circle radius. Hovering over a city reveals its name and population in a formatted tooltip.

Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes NOAA climate data from two Bay Area stations (SFO and Oceanside) from 1946 to 2020, plotting temperature metrics over time. A dropdown menu lets users switch between four temperature attributes for the y-axis, while a color legend distinguishes the two stations and supports hover highlighting to fade non-selected data. Built with React and D3 v6, the SVG visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, with custom React components for axes, marks, and legend rendering.

Loading thumbnail…

Fork of Texas NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot displays monthly NOAA climate summaries for Texas from 1946 to 2020, with each point representing a weather station reading. A dropdown menu lets users switch between six meteorological attributes, including average temperature, wind speed, and precipitation metrics. The visualization uses React with D3 v6 scale functions to map temporal and quantitative data, while the ordinal color scale distinguishes three stations. Hovering over the color legend filters the corresponding data points and adjusts their opacity, providing focused comparison across the selected timeline and attribute.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset, showing vehicle fuel efficiency (mpg) against horsepower. Points are colored by origin and sized by weight, with tooltips displaying model names. The visualization is constructed programmatically via vega-lite-api, which registers with the vega and vega-lite libraries, while D3’s csv method loads the data. Styling is customized through a config object, and the plot auto-fits to the window using autosize and renderer settings.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, and weight for a sample of automobiles, colored by country of origin. Using the Vega-Lite API with D3.js for data loading, it renders a scatter plot where circle size encodes vehicle weight and tooltips reveal the car model name. The data comes from the UCI Machine Learning Repository's Auto MPG dataset, loaded via `d3.csv`. The visualization pipeline combines `vl.markCircle`, `vl.x`, and `vl.y` encodings with a custom configuration for styling and tooltip handling.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

Loading thumbnail…

Fork of HTML Starter

This example displays a single, large, centered message reading "Hello HTML!" against a blank page. The styling and layout are handled entirely through a CSS class rule defined in a `<style>` block, setting the font size to 13em and using text alignment. The page’s behavior is purely static, relying on standard HTML and CSS without JavaScript frameworks or data sources. The code structure is a minimal HTML document comprising a head and body, demonstrating a basic structural approach for rendering styled text content.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset, showing vehicle fuel efficiency (mpg) against horsepower. Points are colored by origin and sized by weight, with tooltips displaying model names. The visualization is constructed programmatically via vega-lite-api, which registers with the vega and vega-lite libraries, while D3’s csv method loads the data. Styling is customized through a config object, and the plot auto-fits to the window using autosize and renderer settings.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays patient data, plotting total hospital stay against number of visits, with color encoding for patient category, point size for sepsis flag, and tooltips revealing patient identifiers. It uses the Vega-Lite API to declare the circle mark and encodings, with vega and vega-lite handling rendering and the Handler from vega-tooltip providing interaction. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file. The chart fits to the window size and applies custom axis and label styling from a config object.

Loading thumbnail…

Smiley Face p1

A static SVG rendering of a smiley face, drawn with three black-outlined circles: a large yellow circle for the head and two smaller black circles for the eyes. The code defines the SVG markup directly in an HTML page, using React to load the production library from a CDN but not actually instantiating any React components or rendering dynamic content. The face is centered on a 960 by 500 canvas with a hidden overflow body margin.

Loading thumbnail…

Fork of Hello HTML

This example displays a minimal HTML page with a single heading reading “Hello Worldddd.” It demonstrates the basic structure of an HTML document using standard elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, and `<body>`. The code relies solely on plain HTML without any JavaScript libraries or external styling. The rendering approach is a simple static text presentation, with no data source or interactive features beyond the static page content.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message in the browser. It is a minimal demonstration of how to structure an HTML page with inline CSS for styling and includes no interactive behavior or data. The page uses plain HTML elements, a `<style>` block for the `.message` class with a 13em font size, and relies on the browser’s default rendering. It serves as a basic starter template, referencing the React Starter for comparison but containing no JavaScript or external libraries.

Loading thumbnail…

Fork of HTML Starter

This example displays a single, large, centered message reading "Hello HTML!" against a blank page. The styling and layout are handled entirely through a CSS class rule defined in a `<style>` block, setting the font size to 13em and using text alignment. The page’s behavior is purely static, relying on standard HTML and CSS without JavaScript frameworks or data sources. The code structure is a minimal HTML document comprising a head and body, demonstrating a basic structural approach for rendering styled text content.

Loading thumbnail…

Fork of HTML Starter

This example displays a single, large, centered message reading "Hello HTML!" against a blank page. The styling and layout are handled entirely through a CSS class rule defined in a `<style>` block, setting the font size to 13em and using text alignment. The page’s behavior is purely static, relying on standard HTML and CSS without JavaScript frameworks or data sources. The code structure is a minimal HTML document comprising a head and body, demonstrating a basic structural approach for rendering styled text content.