S

srrajendran

@srrajendran·46 public vizzes

Loading thumbnail…

Chicago Crime Data Analysis

A map of Chicago displays crime incident locations as red dots, with each dot representing a specific crime type such as battery, theft, or assault. Hovering over a dot reveals its category via a tooltip. The visualization uses D3 v5 with `geoAlbersUsa` projection and `geoPath` to render U.S. state boundaries from TopoJSON data, while `d3.csv` loads the incident coordinates. Animated transitions adjust dot scaling, and zooming is enabled through D3's `zoom` behavior, all rendered as SVG elements.

Loading thumbnail…

Chicago Crime Data Analysis

This visualization analyzes Chicago crime data to reveal which time of day experiences the highest number of incidents. An interactive bar chart displays the total count for each time period, with bars highlighted on hover and a tooltip showing the exact value. The chart is built using D3.js v5, utilizing `scaleBand` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and a custom `colorLegend` module. The SVG render includes animated bar highlighting and a dropdown menu for data filtering.

Loading thumbnail…

Let's make a face with D3.js!

A stylized face constructed from SVG primitives animates through a sequence of mood shifts. D3.js v5 selects the SVG canvas and uses chained `transition().duration()` calls to tween the circle's fill, reposition the eyes with translate transforms, drop and raise the eyebrows, and rotate the mouth path. The face is drawn with geometric shapes including circles, rectangles, and an arc path generated via `d3.arc()`.

Loading thumbnail…

Starbucks Locations

This example maps Starbucks locations across the United States using an SVG map rendered with D3’s `geoAlbersUsa` projection and `geoPath` to draw state outlines from TopoJSON data. Each store is plotted as a small red circle based on its longitude and latitude, with hover tooltips displaying the location name. The map supports zoom and pan via D3’s zoom behavior, and the dataset is loaded from a CSV file.

Loading thumbnail…

Chicago Crime Data Analysis

This visualization maps reported Chicago crime incidents, using colored points to reveal high-crime regions across the city. It shows the geographic distribution of offenses such as theft, battery, and assault. The map is built with D3 v5, using `d3.json` to load GeoJSON zip code boundaries and `d3.geoPath` with a Mercator projection to render them. Crime data with latitude and longitude coordinates from the CSV file is plotted onto the map, with a hover tooltip for additional context.

Loading thumbnail…

Chicago Crime Dataset Analysis

This visualization presents a bar chart of Chicago crime data, ranking offense types by their recorded counts, with THEFT and BATTERY as the most frequent. The bars are color-coded and rendered as SVG using D3.js v5, with axes created via d3.axisLeft and d3.axisBottom. The code includes reusable modules for a dropdown menu and color legend, though the current renderer focuses on the bar chart. The data is loaded from a CSV file and processed with d3.csv, with scales built using d3.scaleLinear and d3.scaleBand.

Loading thumbnail…

Cars Scatter Plot with horsepower and weight against cylinders

A scatter plot displays car data from the UCI Auto MPG dataset, mapping time of day against the top hour of incidents. Each circle represents a car, colored by its cylinder count using an ordinal color scale with viridis interpolation. The visualization includes a color legend for filtering by cylinder value. Built with D3 v5, it uses d3.scaleOrdinal for colors, d3.axisLeft and d3.axisBottom for axes, and SVG circles for rendering points.

Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes the relationship between two selected attributes of Chicago crime data, allowing users to compare different dimensions via dropdown menus. The visualization uses D3 v5 to render an SVG with animated transitions, and it includes a color legend that filters data points by arrest status. The chart uses a linear scale for both axes and a categorical ordinal color scale based on the viridis color scheme.

Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes cereal data, showing the relationship between two user-selectable nutritional attributes (such as sugars and calories) via dropdown menus. Points are colored by manufacturer using a categorical scale with an interactive legend; clicking a legend entry highlights that manufacturer’s cereals and filters out others. The visualization uses D3.js v5 with SVG rendering and animated transitions, leveraging `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateViridis` for colors. Data comes from a CSV file of cereal ratings.

Loading thumbnail…

Cars Scatter Plot with horsepower and weight against cylinders

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point colored by the number of cylinders using a viridis color scale. A legend allows users to click on cylinder values to filter the displayed data, dimming non-matching points. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleOrdinal` for color mapping, `d3.scaleLinear` for axes, and custom modules for the scatter plot, color legend, and dropdown menu. Data is loaded from a local CSV file.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point colored by the number of cylinders. Users can click the color legend to filter the display, highlighting cars with a specific cylinder count while dimming others. The visualization uses d3.scaleOrdinal with the schemeSpectral color palette for categorical encoding, and renders axes with d3.axisBottom and d3.axisLeft. Data is loaded from an auto-mpg.csv file, with all numeric fields parsed as numbers, and the chart is drawn as SVG.

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Machine Learning Repository's Auto MPG data set visualizes the relationship between horsepower and weight for various car models. The visualization uses D3 v5 to render red, semi-transparent circles as data points on an SVG canvas, with labeled axes for both dimensions. The code employs D3's `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick generation, and the `csv` function to load the remote dataset, which is then parsed into numeric values for plotting.

Loading thumbnail…

Cereals Scatter Plot

This scatter plot visualizes the relationship between sugar content and consumer ratings for various breakfast cereals. Each red circle represents a cereal, positioned by its sugar level on the x-axis and its rating on the y-axis. Hovering over a point enlarges the circle and displays its exact coordinates. The visualization uses D3.js (v5) with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and an ordinal color scale for the legend. Data comes from a local CSV file containing nutritional information.

Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map built with D3.js and the TopoJSON library, using the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render countries from the World Atlas dataset. Hovering over a country highlights it in red, and a click permanently changes its fill to brown while increasing the stroke width, demonstrating simple CSS-based interaction tricks for selection feedback. The SVG rendering employs a light blue sphere background and light green countries with black borders.

Loading thumbnail…

Cheap Tricks for Interaction

This visualization presents an interactive world map where hovering over a country turns it red and clicking changes its fill to brown with a thicker stroke, clearly indicating the selected nation. Built with D3 v5, it utilizes `d3.geoPath` with the Natural Earth projection and `topojson.feature` to render country boundaries. The map draws geographical data from the world-atlas 50m TopoJSON and TSV files, which also supply country names via ISO numeric codes. Hover and click interactions are handled directly on the SVG paths, with CSS classes controlling the visual states.

Loading thumbnail…

Cereals Scatter Plot

This scatter plot displays the relationship between sugar content and consumer ratings for 77 different cereals, using a dataset from Telecom ParisTech. Each circle represents a cereal, positioned along the x-axis for sugar and the y-axis for rating, with all data points shown in red. The visualization uses D3 v5's `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for rendering. It also includes a legend that attempts to map cereal names to colors via `scaleOrdinal`, though the legend is not fully functional. The plot reveals a general trend where cereals with higher sugar content tend to receive lower ratings.

Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map built with D3.js and the TopoJSON library, using the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render countries from the World Atlas dataset. Hovering over a country highlights it in red, and a click permanently changes its fill to brown while increasing the stroke width, demonstrating simple CSS-based interaction tricks for selection feedback. The SVG rendering employs a light blue sphere background and light green countries with black borders.

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a world map with zoom and hover interactions, rendering countries as SVG paths using a Natural Earth projection. It relies on d3.zoom for pan and zoom transformations, d3.geoPath for projecting geographic data, and TopoJSON for country boundaries sourced from the world-atlas dataset. Country names are loaded from a TSV file, while hover effects change fill colors via CSS. The map also includes a spherical background and uses d3.select to manage the SVG container.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern's special cases using a bowl of fruit rendered as SVG circles and text. It shows how to handle data joins when elements are removed, updated in place, or filtered out, with apples and lemons appearing and disappearing from the bowl. The code uses d3-selection’s `data`, `enter`, `merge`, and `exit` methods alongside `scaleOrdinal` for color and radius mapping, driven by `setTimeout` calls in index.js.

Loading thumbnail…

Re-create Marks & Channels Graphic!

This example recreates a static graphic illustrating marks and channels using D3 v5 with SVG rendering. It shows a rectangular frame containing a series of red circles connected by black line segments, forming a simple network diagram. The code uses D3 selections to append SVG elements, including `rect`, `circle`, and `path` primitives, with hard-coded coordinates and attributes like `cx`, `cy`, `r`, and `d` to position and style each mark. No data binding or interactive behavior is present; the visualization is purely illustrative.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes like circles, rectangles, lines, and paths can be styled using both inline attributes and external CSS. It shows a small grid of geometric forms where color, stroke, and transparency are controlled through presentation attributes—such as `fill` and `stroke-width`—and a `.lines` class with custom properties. The SVG is scaled via a `transform` attribute, and CSS rules define the body layout. The visualization uses raw SVG markup and a linked stylesheet, with no additional JavaScript libraries.

Loading thumbnail…

Cereals Scatter Plot

A scatter plot maps cereal sugar content on the x-axis against consumer ratings on the y-axis, using red, semi-transparent circles to reveal the negative correlation between sweetness and approval. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `scaleOrdinal` with `schemeCategory10` for a legend identifying each cereal by name. Data comes from a CSV file, rendered as SVG elements.

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Machine Learning Repository's Auto MPG data set visualizes the relationship between horsepower and weight for various car models. The visualization uses D3 v5 to render red, semi-transparent circles as data points on an SVG canvas, with labeled axes for both dimensions. The code employs D3's `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick generation, and the `csv` function to load the remote dataset, which is then parsed into numeric values for plotting.

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart visualizes the fuel efficiency of various car models, ranking them by their miles per gallon (MPG) value. The data is sourced from a CSV file and loaded using D3's `csv` function, with MPG values scaled down for display. The visualization is built with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are rendered as SVG rectangles, with axes added via `axisLeft` and `axisBottom`, and the chart is styled with a steelblue fill for the bars.

Loading thumbnail…

Making a Bar Chart

This example shows the population of the top 10 most populous countries in 2018, based on United Nations data loaded from a CSV file. A bar chart renders the values using D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. The SVG bars are appended via `selectAll` and `data`, with the population values scaled by a factor of 1,000. The chart is styled with steel-blue rectangles and is rendered entirely in SVG.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It sorts countries along the y-axis with population values on the x-axis, rendered as steelblue bars in an SVG canvas. The visualization is built with D3 v5, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the d3 module to construct scales and axes. Data is loaded from a CSV file using `csv` and processed by multiplying population values by 1000.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. The chart uses a linear scale for population on the x-axis and a band scale for country names on the y-axis, with steelblue rectangles as bars. The visualization is rendered as SVG using D3 v5, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the plot.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populous countries, using 2018 estimates from the United Nations’ World Population Prospects. The data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1,000. The visualization is rendered as an SVG using D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` to draw the axes. The bars are appended as `rect` elements, with their width and height calculated from the scales.

Loading thumbnail…

Let's make a face with D3.js!

This visualization creates a simple, stylized cartoon face using the D3.js version 5 library. It draws a yellow circular head with black outlines, two eyes, animated eyebrows that move up and down in a looping transition, and a smiling mouth. The mouth is constructed using D3’s `arc` generator to define a path with specific radii and angles. All elements are rendered as SVG shapes within a 960-by-500 canvas, and the primary animation is driven by chained `transition` calls with a duration of 2000 milliseconds each.

Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes cereal data, showing the relationship between two user-selectable nutritional attributes (such as sugars and calories) via dropdown menus. Points are colored by manufacturer using a categorical scale with an interactive legend; clicking a legend entry highlights that manufacturer’s cereals and filters out others. The visualization uses D3.js v5 with SVG rendering and animated transitions, leveraging `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateViridis` for colors. Data comes from a CSV file of cereal ratings.

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG shapes demonstrates D3.js v5 DOM manipulation and chained transitions. The code uses `d3.select`, `append`, and `attr` to construct a yellow circle with eyes, rectangular eyebrows, and an arc-based mouth via `d3.arc()`. A two-step `transition().duration(2000)` sequence moves the eyebrow group up and down, creating an animated expression. The example relies on D3’s data-join-free imperative style, directly targeting SVG elements within a 1000×500 viewport without external data.

Loading thumbnail…

Let's make a face with D3.js!

This visualization creates a simple, stylized cartoon face using the D3.js version 5 library. It draws a yellow circular head with black outlines, two eyes, animated eyebrows that move up and down in a looping transition, and a smiling mouth. The mouth is constructed using D3’s `arc` generator to define a path with specific radii and angles. All elements are rendered as SVG shapes within a 960-by-500 canvas, and the primary animation is driven by chained `transition` calls with a duration of 2000 milliseconds each.

Loading thumbnail…

Choropleth - Dry Run

This visualization shows a choropleth map of world countries colored by their economy classification, rendered on a natural Earth projection. Countries are drawn as SVG paths using `d3.geoPath` and `geoNaturalEarth1`, with data joined from TopoJSON and TSV files. The color scale uses `scaleOrdinal` with `schemeOrRd`, and interactive zooming is enabled through `d3.zoom`. Hovering highlights countries via CSS.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and TopoJSON. It displays countries as light green geographic regions against a blue sphere, using the Natural Earth projection via `d3.geoNaturalEarth1` and rendering paths with `d3.geoPath`. The map loads geographic data from the world-atlas TopoJSON file, extracting country features with the `feature` method from topojson. SVG paths are appended for each country, with styling applied through CSS classes for the sphere and country boundaries.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a map using the D3.js library. It loads GeoJSON data from a file and projects it using the `d3.geo.mercator` projection, with the map centered and scaled to fit the view. The code uses `d3.json` to fetch the data and `d3.geo.path` to generate SVG paths for each feature, styling them as the "zipcode" class. The page includes a YouTube tutorial video in an iframe, and the map is rendered as an SVG element with a blue sphere background.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economy category using an ordinal color scale with the spectral scheme, with hover highlighting and zooming via d3.zoom. It renders geographic paths with d3.geoPath and a Natural Earth projection, loading TopoJSON world-atlas data merged with TSV metadata. A custom color legend, built with SVG circles and text, displays the categorical scale.

Loading thumbnail…

Data Table Summary

This example presents a raw summary of Chicago crime data from December 2017, displaying the total row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. It uses d3.csv to load the dataset and d3.csvFormat to compute its size. The visualization appears as monospaced text on a black background with green styling, emphasizing a terminal-like aesthetic.

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a car dataset through D3 v5. It loads a CSV file with approximately 400 records and outputs the total row count, column count, and file size in kilobytes. The page then prints the first 10 rows as formatted JSON for quick inspection. Using `d3.csv` and `d3.csvFormat`, the code calculates data metrics and appends the results to the DOM with the `select` and `append` APIs.

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates how a simple map of world countries can be made interactive through basic selection and styling. A Natural Earth projection, built with `d3.geoNaturalEarth1` and `d3.geoPath`, renders country boundaries from TopoJSON data enriched with names from a TSV file. Clicking a country toggles its class from `country` to `selectedCountry`, changing its fill to brown via CSS, while hovering turns it red. The interaction relies on D3 v5’s event handling and class manipulation, without complex zoom or panning logic.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face appears on an SVG canvas, built entirely through D3.js DOM manipulation. The face uses circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. A chained `transition` animates the eyebrows upward and back over two-second intervals, creating a winking expression. The code imports `select` and `arc` from D3 v5 to construct and update SVG elements dynamically.

Loading thumbnail…

Data Table Summary

The example displays a plain-text summary of a CSV dataset, first showing the total row count, column count, and file size in kilobytes, then printing the first ten rows as formatted JSON. It loads data asynchronously with `d3.csv` and uses `d3.csvFormat` to calculate the dataset size. The page styling uses a monochrome terminal aesthetic with a black background and green text. The dataset tracks diaper change patterns for a baby over its first 2.5 months, including status and leakage indicators.

Loading thumbnail…

Baby Diaper pattern

This scatter plot visualizes the diaper-change pattern of a baby over time, distinguishing between wet, bowel movement (BM), and combined BM+Wet statuses, with points marked red when the diaper leaked. The x-axis and y-axis labels in the code reference "Horsepower" and "Weight," indicating the visualization reuses a generic car-dataset template rather than being fully customized to the diaper data. Built with D3 v5, the example uses `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG axes and circles, with the dataset loaded from `data.csv` via `d3.csv`.

Loading thumbnail…

Data Table Summary

This example shows a plain-text summary of a dataset containing the 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects 2017. The page reports the number of rows, columns, and file size in kilobytes, then displays the first ten rows as formatted JSON. It uses `d3.csv` to load the data, `csvFormat` to calculate the size, and `JSON.stringify` for the preview. The terminal-style green-on-black styling is applied via CSS.

Loading thumbnail…

Data Table Summary

This example displays a summary of a sleep-tracking dataset for a baby’s first 2.5 months, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The page renders the text output on a black background with green monospaced text. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the summary elements to the body.

Loading thumbnail…

Hello VizHub!

This example displays the text “Hello VizHub!” prominently in a large, bright font against a dark background. It demonstrates a minimal D3.js setup where the DOM element’s content is set programmatically. The code uses `select` from D3 v5 to target the `#message` div and updates its text with a string imported from a separate ES6 module (`myMessage.js`). Styling is handled via an external CSS file, with the body configured for centered, large-scale typography.

Loading thumbnail…

Hello VizHub!

This example shows a single bold "Hello VizHub!" message centered on a dark background using D3 v5 to select a div and set its text content. The message itself is defined in a separate ES6 module and imported into the main script. Styling relies on a Google Fonts-loaded Ubuntu typeface, with text rendered at a large size. The code demonstrates basic DOM manipulation with `d3.select` and ES6 module imports, though it contains no data or chart elements.