A

Akanksha

@akankshapawar1·36 public vizzes

Loading thumbnail…

Winter Olympic Medals 1924 - 2018

This example visualizes the number of medals won by each country at every Winter Olympic Games from 1924 to 2018. It displays the first record from a CSV dataset containing yearly medal counts per nation, highlighting the parsed values for year and medal types. The code imports the data using a CSV parser, converts the numeric fields from strings to numbers, and renders the first entry as formatted JSON in a pre element. The visualization uses plain JavaScript with the container's innerHTML property to present the data sample.

Loading thumbnail…

Line Chart with Country Dropdown

This line chart displays a country's total medal count each year, with a dropdown menu to switch between countries. The visualization initially draws a line for the selected country, filtering the yearly data accordingly. The chart is built using D3.js, specifically `select`, `scalePoint`, `scaleLinear`, and `line`, along with the `responsive-axes` library for layout. The SVG is rendered directly to the container, and the dropdown listens for a `change` event to trigger a redraw with a filtered dataset.

Loading thumbnail…

data for line graph

This line chart shows the number of medals each country won at the Winter Olympics from 1924 through 2016, with the x-axis representing time (year) and the y-axis showing the total medal count. Each country is drawn as a separate colored line, allowing viewers to compare medal trajectories across nations. The dataset comes from Kaggle’s “Winter Olympic Medals 1924–2018” (source: v3, author: akankshapawar1, MIT license). The chart reveals dominance patterns, such as Norway’s sustained high medal counts and the rise and fall of countries like the Soviet Union and Germany over time.

Loading thumbnail…

Fork of Fork of Winter Olympic Medals 1924 - 2018

This chart visualizes the number of Winter Olympic medals won by each country from 1924 to 2018, using a fork of a fork of an original visualization. Each row represents a country-year combination, with medal counts (Gold, Silver, Bronze) encoded through visual channels. The dataset is sourced from Kaggle. The visualization likely uses a multi-series line chart, bar chart, or stacked area plot to show how each country's medal totals evolve over time, with the "Fork of Fork" title suggesting it is a modified version of an earlier work. The design focuses on highlighting historical performance patterns and country-to-country comparisons across the decades.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart with multiple lines visualizes yearly data across countries, using color-coded lines to show trends over time. The visualization displays the data through D3.js’s `scaleLinear`, `scaleOrdinal`, and `schemeDark2` for color mapping, with a custom `colorLegend` component. Lines are generated with the `line` function and `flatGroup` aggregates data by country. The chart includes axes via `axes` from `@curran/responsive-axes` and a semi-transparent inner rectangle background, with opacity applied to lines for readability.

Loading thumbnail…

Parallel Coordinates with Brushing - Restaurant ratings

This interactive parallel coordinates plot visualizes restaurant ratings and pricing across Chennai neighborhoods, sourced from Zomato data. Users brush along any axis to filter the polylines, revealing patterns in dining and delivery ratings relative to cost. The visualization uses D3’s `brushY` and transitions for smooth filtering, with each axis scaled appropriately for its data type, allowing comparisons of categorical locations and quantitative scores.

Loading thumbnail…

Bar hover

A bar chart shows total Olympic medals for the top ten countries, using a dataset from the `@akankshapawar1/olympics` package. D3’s `scaleBand` and `scaleLinear` position the bars, while hover interactions change their fill color between black and gray via React state. The chart includes axis labels and uses d3’s `axisLeft` and `axisBottom` for ticks, with a ResizeObserver for responsive sizing.

Loading thumbnail…

Winter Olympic Medals

This choropleth map visualizes the total number of Winter Olympic medals won by each country from 1924 to 2018, with color intensity representing medal counts. The map uses a natural Earth projection and colors countries on a red sequential scale, ranging from light (low medal counts) to dark red (highest counts). Hovering over a country displays a tooltip with its total medals and a breakdown of gold, silver, and bronze counts. The visualization also includes a graticule, an outline, and a legend with an axis to map colors to medal totals. Countries without medal data are shown in light gray, and data processing handles historical country name changes (e.g., Soviet Union to Russia, Great Britain to United Kingdom) to ensure accurate representation. The map is interactive, with tooltips providing detailed medal information for each country.

Loading thumbnail…

World Map Winter Olympics

This world map visualizes the medal counts of participating countries in the Winter Olympics, using a natural Earth projection. It shades each country according to the total gold, silver, and bronze medals won, with a sequential color scale (interpolateOrRd) applied to the aggregated medal data. The visualization fetches geographic boundaries from a TopoJSON world atlas and merges them with Olympic medal statistics from a CSV file, normalizing country names to align historical teams like the Soviet Union and East Germany with modern counterparts. The code uses d3’s geoPath for rendering, d3.csvParse for data parsing, and topojson-client for converting TopoJSON to GeoJSON features.

Loading thumbnail…

Map of winter olympics

This example visualizes the locations of past Winter Olympic host cities on a world map. It uses D3 v5 with an SVG rendering approach, drawing geographic boundaries via `d3.geoPath` and plotting points for each host city. The map is generated from a dataset of host city coordinates, with the visualization emphasizing spatial distribution across continents rather than individual data values. The code sets up a blank 960x500 SVG canvas and relies on D3’s projection and path functions to render the map, though no interactive elements or tooltips are included in the provided source.

Loading thumbnail…

Map of Winter Olympic Medals 1924 - 2018

This map visualizes the number of Winter Olympic medals won by each country from 1924 to 2018. Each country is represented by a point on a world map, with the size of the point scaled to the total medals won that year. A year slider allows users to scrub through time, updating the map to show medal counts for each Olympics. The data is sourced from a Kaggle dataset, and the visualization highlights historical medal distributions, making it easy to spot dominant nations and shifts in athletic performance across decades. The map uses a sequential color scale to indicate medal totals, with tooltips providing exact counts and country names. This example demonstrates an effective use of a geographic choropleth with dynamic temporal filtering to explore trends in international sports achievement.

Loading thumbnail…

Interactive Scatter Plot and Responsive Axes

This interactive scatter plot visualizes Olympic participation, showing the number of participating countries per year. The visualization uses D3.js scales and axes, with a ResizeObserver to detect container dimensions and update the chart responsively. Axis tick density is calculated based on the inner width and height, ensuring consistent spacing across different screen sizes. The code includes a complete modular approach with separate files for axes, labels, and resize observation, featuring animation on circle hover.

Loading thumbnail…

Scatter plot interactions

A scatter plot displays the number of participating countries in each Winter Olympic year, using data from a Kaggle dataset covering 1924–2018. Hovering over a point triggers a D3 transition that enlarges the circle radius, providing interactive feedback. The visualization is built with d3-scale for axes, d3-axis for ticks, and custom axis label helpers, all rendered as SVG elements with mouseover and mouseout event handlers.

Loading thumbnail…

Fork of Responsive Axes

This visualization presents a horizontal bar chart ranking the top ten countries by total Olympic medals, using data from the `@akankshapawar1/olympics` package. The chart’s key feature is its responsive axes, which maintain consistent tick mark density as the window resizes. It uses a `ResizeObserver` to capture viewport dimensions and dynamically adjusts the number of ticks passed to `axisBottom` and `axisLeft` from D3, ensuring the axis labels never become overly crowded or sparse. The example highlights a reusable technique for creating axes that adapt gracefully to any screen size.

Loading thumbnail…

Winter olympics bar chart

This bar chart shows the top 10 countries by total medals (gold, silver, and bronze) across all Winter Olympics from 1924 to 2018. The data is aggregated from the `@akankshapawar1/olympics` dataset. It uses d3's `scaleBand` and `scaleLinear` to position bars, with axis labels from `@curran/axis-labels`. The visualization renders green bars on a white inner rectangle, highlighting the leading nations' medal counts.

Loading thumbnail…

Winter Olympics Participants - Iterate

This visualization displays the number of participant countries in each Winter Olympics from 1924 to 2018, with each circle representing a year. The code computes participant counts by aggregating unique country names per year using a JavaScript `Set` within a `reduce` operation. It uses D3.js scales and axes to map years and counts, and renders circles with a fixed radius and reduced opacity to show the trend. Data comes from a Kaggle dataset of Winter Olympic medals.

Loading thumbnail…

Fork of Axis Labels for year

This example demonstrates a simple D3.js visualization that displays a gray inner rectangle with labeled X and Y axes on a white background. It shows how to structure modular code by separating axis rendering into individual files like `xAxis`, `yAxis`, `xAxisLabel`, and `yAxisLabel`. Using D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, the code creates linear scales and renders tick marks, while labels are positioned with SVG text elements, rotated for the Y-axis. The visualization is generated without any external data source, relying on hardcoded axis label strings.

Loading thumbnail…

Winter Olympics Participants

This interactive scatter plot shows the number of countries participating in the Winter Olympics each year from 1924 to 2018. Each circle represents a medal-winning country at a specific Games, with its vertical position reflecting the total participant count for that year. The visualization uses D3.js scale functions and axis components to render the chart, while the data aggregation logic, which counts unique countries per year via JavaScript Set objects, is embedded in the main module. The dataset originates from Kaggle, and the code relies on the `@curran/axis-labels` library for axis annotation.

Loading thumbnail…

Fork of Circles with D3

This visualization displays a simple Christmas tree built from three red, blue, and green circles representing layered tree sections, alongside a brown rectangle for the base, all set against a light blue background. The code uses d3’s selection API, including `selectAll` and `join`, to render the SVG shapes. It employs the `d3` library to dynamically compute circle and rectangle positions based on the container’s dimensions, with the tree’s data defined in an array of objects. The example is based on a forked template, offering a creative, holiday-themed modification.

Loading thumbnail…

Daruma dolls

Three Daruma dolls stand in a row, each composed of layered ellipses for the body, face, eyes, eyebrows, nose, lips, and mustache, rendered in shades of red, white, and black. The code uses D3’s `select` and data join pattern to create an SVG, then binds an array of ellipse objects—containing `cx`, `cy`, `rx`, `ry`, and `fill` properties—to draw each shape. The dolls show variations in mouth and mustache styling, with a soft yellow background.

Loading thumbnail…

Top 5 IDEs

This animated visualization ranks the top five IDEs from a 2023 survey, displaying them as proportionally sized circles arranged horizontally. The circles animate into place with staggered delays, revealing the market share of each tool, with VS Code shown as dominant. The example uses D3.js, specifically the `transition` and `select` APIs to manage enter, update, and exit states for both circles and text labels. Data is drawn from Visual Studio Magazine's report on the Stack Overflow 2023 developer survey.

Loading thumbnail…

Amazon best sellers June 2021

This example displays the first row of the Amazon best sellers June 2021 dataset as a JSON object in a large monospace font. It uses the `main` function to inject a formatted `<pre>` element into the container, with the data parsed to convert ratings, review counts, prices, seller counts, and ranks into numeric types. The source is a Kaggle CSV file, loaded via an ES6 import from `./data.csv`.

Loading thumbnail…

Chennai restaurants

This example reads a CSV of Chennai restaurant data and converts numerical fields like `Price_for_2`, `Dining_Rating`, `Dining_Rating_Count`, and `Delivery_Rating` to numbers. It then displays the first record as a formatted JSON object within a `<pre>` element using the Vega-Lite data loading and export API. The visualization is a static, text-based preview of the dataset, showcasing the raw structure of the data without any graphical encoding. The implementation relies on JavaScript string interpolation to set the font size and inject the JSON string into the container’s HTML.

Loading thumbnail…

Amazon best sellers June 2021

This visualization displays the first record of a CSV dataset representing Amazon best sellers from June 2021. The code uses d3-fetch’s `csv` loader to parse the data, then renders the entire first row as a JSON string inside an HTML `<pre>` element. The example emphasizes raw data inspection rather than graphical encoding, highlighting the parsed quantitative attributes in a fixed-size font. The dataset is sourced from a public repository and loaded via a relative path in the `data.csv` file.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a VizHub project that loads D3 from a CDN and uses ES6 module imports. It shows a simple text message rendered to the page, combining both an external D3 import and a local module. The code uses `select` from D3 to target a DOM element, and imports a custom string from a local `myMessage` module. The project includes a data.csv file, though the visualization only displays static text without reading the CSV data.

Loading thumbnail…

Fork of Penguins

This example displays the first penguin record from the Palmer Penguins dataset as a formatted JSON object in large monospaced text. The Fork of Penguins visualization converts the CSV data into numeric values for bill length, bill depth, flipper length, and body mass using JavaScript’s unary plus operator. It renders the data structure with template literals inside a preformatted HTML element, leveraging the Observable framework’s data import and export syntax. The chart demonstrates a minimal, exploratory approach to inspecting raw quantitative attributes without additional visualization libraries.

Loading thumbnail…

Fork of Fork of Penguins

This example displays a single row of the Palmer Penguins dataset as a formatted JSON object, parsed from CSV using a numeric conversion loop. The visualization presents the data in a monospace preformatted block, with the font size adjustable via a hardcoded variable. It demonstrates a minimal data-loading and rendering pipeline, importing the CSV through a bundled data module and rendering the parsed values directly into the container using template literals. The code explicitly converts quantitative attributes like bill length and body mass to numbers, showcasing a straightforward approach to data inspection.

Loading thumbnail…

Fork of Penguins

This example displays the first penguin record from the Palmer Penguins dataset as a formatted JSON object in large monospaced text. The Fork of Penguins visualization converts the CSV data into numeric values for bill length, bill depth, flipper length, and body mass using JavaScript’s unary plus operator. It renders the data structure with template literals inside a preformatted HTML element, leveraging the Observable framework’s data import and export syntax. The chart demonstrates a minimal, exploratory approach to inspecting raw quantitative attributes without additional visualization libraries.

Loading thumbnail…

Fork of Fork of Blank Slate

This example demonstrates the VizHub V3 Runtime Environment’s “Hello World” pattern. The exported `main` function takes a `container` DIV and injects an HTML string containing the text “Hello World!” with a fixed font size of 212 pixels. It shows the simplest possible data visualization setup, relying on the container-based rendering approach without any external libraries or data files. The code highlights the runtime’s core mechanism for continuous hot reloading and interactive widget support.

Loading thumbnail…

Fork of Blank Slate

This fork of the Blank Slate example demonstrates the minimal Hello World template for the VizHub V3 runtime environment, where the exported `main` function receives a container DIV and populates it with inline HTML and CSS. The code sets a large 212-pixel font size and centers the text “Hello World!” using the `container.innerHTML` API. No external libraries are included, and the example relies entirely on the V3 runtime’s hot reloading and interactive widget support, as described in the accompanying README.

Loading thumbnail…

Fork of Blank Slate

This fork of the Blank Slate example demonstrates the minimal Hello World template for the VizHub V3 runtime environment, where the exported `main` function receives a container DIV and populates it with inline HTML and CSS. The code sets a large 212-pixel font size and centers the text “Hello World!” using the `container.innerHTML` API. No external libraries are included, and the example relies entirely on the V3 runtime’s hot reloading and interactive widget support, as described in the accompanying README.

Loading thumbnail…

Fork of Chennai Restaurants

This fork demonstrates the VizHub V3 Runtime Environment’s “Hello World” template. The exported `main` function sets the container’s inner HTML to display a large, centered text block. It shows how the runtime automatically renders the page without an `index.html`, relying on the `main` function’s `container` argument. The font size is an interactive widget that adjusts via Alt-drag, illustrating the hot-reloading capability. The code uses plain HTML and CSS within a template literal, with no external libraries or data files.

Loading thumbnail…

Chennai Restaurants

This example renders a large "Hello World!" message inside a VizHub V3 Runtime container. The main function from index.js sets the container's inner HTML with a dynamic font size, displaying the text centered with inline styling. It demonstrates the basic structure of a VizHub visualization, where the entry point is the exported main function and no index.html is required, supporting continuous hot reloading with interactive widgets.

Loading thumbnail…

Chennai restaurants

This visualization displays the first record from a penguins dataset as a JSON object in a pre-formatted text block. The code loads data from a local CSV file, converts its quantitative attributes to numbers using unary plus operators, and exports both the parsed data and a main function. The main function sets a large font size and inserts the JSON representation of the first data row into the container. It relies on the browser's native JSON.stringify method and HTML pre element for rendering. The data originates from the palmerpenguins GitHub repository.

Loading thumbnail…

Fork of Chennai restaurants

This fork of the Chennai restaurants visualization displays a single JSON record from the loaded penguins dataset, parsed into numeric attributes. The code imports data from a CSV file, converts measurement columns to numbers using unary plus operators, and renders the first data object as a formatted JSON string within an HTML `<pre>` element. The example uses raw JavaScript string interpolation to build the output, with no external visualization libraries.

Loading thumbnail…

Chennai Restaurants

This example displays the first row of the Chennai Restaurants dataset as a formatted JSON object. The code imports the data from a CSV file, converts quantitative attributes like bill length and body mass to numbers, and uses a preformatted HTML block to render the output. It relies on the D3.js library for data loading and formatting, with the visualization built entirely through DOM manipulation rather than canvas or SVG rendering.