V

Vinayak Revankar

@Vinayakrevankar·20 public vizzes

Loading thumbnail…

Interactive Stacked Bar Chart for Nobel Prizes

The interactive stacked bar chart visualizes Nobel Prize counts by category across 10-year periods, using color coding to distinguish disciplines. Hovering a category in the color legend highlights its corresponding stack segments while fading others. Built with Vue and WebGL, it processes the Nobel dataset with `rollup` aggregation, `stack()` for stacking categories, and `scaleBand`/`scaleLinear` for axes. The `colorLegend` module manages interactive hover states, applying opacity and stroke effects via D3 selections.

Loading thumbnail…

Interactive - Project 1 - Nobel Prize Winners - Bar Chart

A bar chart displays the number of Nobel Prizes awarded per category, ranking categories from most to least frequent. The visualization loads data from a CSV file, parses it with d3.csvParse, and renders an SVG bar chart using d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. Bars are styled steelblue with a hover effect that changes fill to orange. The chart includes rotated x-axis labels, axis titles, and a bold title, all built with D3 v7 and Vue.

Loading thumbnail…

Global Land‑Ocean Temperature Index dataset

This example demonstrates the loading and display of an IMDB movies dataset, showing the raw parsed data as JSON in a `<pre>` element. It uses D3 v7's `csvParse` to convert the CSV file into an array of objects, with fields like title, genre, year, rating, and revenue. The visualization implements a simple asynchronous data-loading state machine, transitioning from an initial `undefined` state to a `'LOADING'` string and finally to the parsed dataset. The code uses D3's `select` and the `join` pattern to bind and render the data.

Loading thumbnail…

Week 9 - Spotify data

This scatter plot maps music tracks by their danceability and energy levels, with each point’s size encoding popularity and color representing genre. A sidebar of checkboxes lets users toggle which genres appear, filtering the visualization to compare overlapping categories. Built with React and D3 v7, the chart uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for genre colors, and D3’s `join` operator to update SVG circles and legends as selections change.

Loading thumbnail…

Week 6 - Phase 3 - Nobel Prize Winners - Line Chart

This line chart visualizes Nobel Prize winners per decade, grouped by category (Chemistry, Literature, Medicine, Peace, Physics, and Economics). The data comes from a CSV file containing laureate details from 1901 onward. The visualization uses d3.rollups to aggregate counts by decade and category, then renders smooth lines with d3.line() and monotone X curve interpolation, along with interactive points that display tooltips on hover. A legend allows users to toggle category visibility by clicking, which transitions line and point opacity using transition.attr().

Loading thumbnail…

Week 7 - Spotify Songs (Top 100 by Year)

This heatmap displays average song popularity across music genres and years from 2010 to 2019, using a light-to-dark blue sequential color scale. It loads Spotify data from a CSV file, groups entries by genre and year, and computes mean popularity values with d3.group and d3.mean. The visualization uses d3.scaleBand for axes, d3.scaleSequential with interpolateYlGnBu for color encoding, and d3.axisBottom and d3.axisLeft for labels. Hover interactions reveal exact values via a dynamic tooltip.

Loading thumbnail…

Week 7 - Nobel Prize Winners - Tree Visualization

This interactive tree visualization explores Nobel Prize winners by category and country of birth, using D3 v7 with animated expansion and collapse of branches. The hierarchy groups laureates by prize category, then country, with node size reflecting prize share. The visualization implements auto-expanding subtrees with smooth transitions between states, centered within a responsive SVG viewport. Data comes from a CSV file containing laureate details from 1901 onward, parsed using d3.csvParse. The code leverages d3.hierarchy, d3.tree, and d3.linkHorizontal for layout, with d3.extent for dynamic viewBox calculation.

Loading thumbnail…

Week 7 Country Map - Nobel Prize Winners

This visualization shows the global distribution of Nobel Prize winners by country, using prize counts derived from laureate birth or organization countries. A choropleth world map colors each nation on a blue sequential scale, with gray for countries lacking winners and a tooltip providing details. The implementation uses D3 v7 with `d3.geoNaturalEarth1` and `d3.geoPath` to render SVG paths from world GeoJSON data, while `d3.rollup` and a custom normalization function reconcile country names between the CSV dataset and map features.

Loading thumbnail…

Fork of Project 1 - Phase 3 - Nobel Prize Winners - Line Chart

This example shows the number of Nobel Prizes awarded per decade, split into separate lines for each prize category. Using D3 v7 with SVG rendering, it loads data from a CSV file, aggregates the entries by decade and category, and draws a multi-series line chart with color-coded labels. The visualization uses `d3.rollups` for grouping, `d3.scaleLinear` for axes, and `d3.line` to generate the paths. The chart reads from a Vue-based project that fetches the CSV and clears the container before rendering.

Loading thumbnail…

Project 1 - Phase 2 - Nobel Prize Winners - Line Chart

This visualization displays the number of Nobel Prize winners per decade, broken down by category, using a multi-line chart. Each line represents a category, with the x-axis showing the decade and the y-axis showing the count of laureates. The chart uses d3.rollups to aggregate the data from a CSV file and renders the lines with d3.line, while d3.scaleOrdinal assigns colors to categories. The data is loaded via fetch and parsed with d3.csvParse.

Loading thumbnail…

CSCS - Nobel Prize Winners - Bar Chart

This bar chart shows the total number of Nobel Prizes awarded in each category—Chemistry, Literature, Medicine, Peace, Physics, and Economics—based on historical laureate data from a CSV file. The visualization loads the dataset using `d3.csvParse` and renders the counts through an SVG bar chart built with D3 v7. Category counts are sorted descending and drawn as steelblue rectangles using `scaleBand` and `scaleLinear`, with axes generated by `axisBottom` and `axisLeft`. Hovering over a bar changes its fill to orange, and bars are labeled with rotated category names.

Loading thumbnail…

Project 1 - Nobel Prize Winners - Bar Chart

This example displays the number of Nobel Prizes awarded in each category as a bar chart, with bars ordered from most to least frequent. It loads data from a CSV file via `fetch` and parses it using `d3.csvParse`, then renders the chart with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`. The bars are drawn as SVG rectangles with a hover effect, and the chart includes labeled axes and a title.

Loading thumbnail…

Project 1 - Phase 2 - Nobel Prize Winners - Bar Chart

This interactive visualization presents Nobel Prize winners by category and birth country. A bar chart displays the total number of prizes per category, while a world map uses colored countries and proportional circles to show laureate distribution geographically. The code uses D3 v7 APIs including `scaleBand`, `scaleLinear`, `geoNaturalEarth1`, `geoPath`, and `scaleSqrt`. Data is loaded from a CSV file, with geographic boundaries from the world-atlas TopoJSON dataset. Both views are rendered as SVG, with a toggle between bar chart and map views.

Loading thumbnail…

Week 4 - testing

This visualization displays the relationship between danceability and energy for popular music tracks from 2010, with circle size encoding popularity and color-coded genres. Built with React and D3.js v7, the scatter plot uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for genre colors, and renders as SVG. The chart includes axis labels, grid lines, a legend, and tooltips. Data is loaded from a local CSV file and mapped to numeric values for the visual encoding.

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

A scatter plot visualizes the musical characteristics of Spotify's top songs from 2010 to 2019, positioning each track by its danceability and energy scores while sizing circles by popularity. A categorical color scale distinguishes genres, with a legend identifying the ten genre categories. The React app uses D3's `csv` loader to parse song attributes from a local CSV file, then leverages D3's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart and its axes.

Loading thumbnail…

IMDB Movies (Top 1000) dataset

This example loads the IMDB Movies (Top 1000) dataset from a CSV file and displays its raw contents as a formatted JSON preview. It demonstrates asynchronous data fetching with the Fetch API and parsing with `d3.csvParse`, converting string values into proper numeric types. The visualization uses D3 v7's `select` and data joins to render the state, first showing a loading status, then an error message if fetching fails, and finally the parsed movie records. The code follows a minimal state management pattern where a `setState` function triggers re-rendering of the container.

Loading thumbnail…

Nobel Prize Winners

This example loads Nobel Prize laureate data from a CSV file and displays the raw parsed records as JSON in a `<pre>` element. The visualization uses D3 v7’s `csvParse` to transform each row, converting fields like year and prize share into numeric values, while preserving categorical attributes such as category, sex, and birth country. The code demonstrates a state-driven rendering pattern within a Vue-like setup, where asynchronous data fetching triggers re-renders. The dataset spans laureates from 1901 onward, sourced via Kaggle, and the current view focuses on data loading and inspection rather than a graphical chart.

Loading thumbnail…

Spotify Songs (Top 100 by Year)

The visualization displays the Top 100 Spotify songs from 2010–2019, parsed from a CSV file using `d3.csvParse`. It initially shows a loading state, then renders the raw data as JSON in a `<pre>` element after fetching, showcasing the song attributes like energy, danceability, and popularity. The code uses `d3.select` and `selectAll` to manage the DOM, with a state-based rendering loop for asynchronous loading.

Loading thumbnail…

Fork of Hospital Readmission Rates

This example displays a fork of a hospital readmission rates visualization, loading data from a CSV file and rendering it as raw JSON text. The code uses D3 v7 to fetch and parse the CSV with `d3.csvParse`, converting "Not Applicable" values to NaN and numeric fields to numbers. State management is handled through a custom `setState` function, with the visualization updating whenever data changes. The implementation shows how to progressively load and process tabular healthcare data, preparing it for eventual graphical display.

Loading thumbnail…

Spiral Visualization with D3

This example renders a colorful spiral of 50 circles connected by thin, semi-transparent lines. Generated procedurally using trigonometric functions, the circles vary in size and hue, creating a dynamic, decorative pattern against a dark background. The visualization is built with D3 v7, using selections and data joins to efficiently draw and update both the `<circle>` and `<line>` elements. The code recalculates the layout on window resize to maintain its centered composition.