naisargidave

@naisargidave·18 public vizzes

Number of Space Missions by Company/Country/Status Rocket

This stacked bar chart shows the number of space missions by company, country, or rocket status, with mission status indicated by color. A dropdown lets users switch the x-axis attribute among these three categories. The visualization uses Vega-Lite, registered through the vega-lite-api, with D3 for CSV data loading and React for the interface. Data comes from a GitHub-hosted CSV of space missions, and the chart renders as an SVG with a custom tooltip handler.

Oct 29, 2020

Loading thumbnail…

Country wise Space Missions with Brushing

A world map displays the number of space missions per country, with circle size scaled by mission count using a square-root scale. A time-series histogram at the bottom shows missions per month, and users can brush a date range to filter the map’s circles. Built with D3 v5 and React, the visualization uses `geoNaturalEarth1` and `geoPath` for the map projection, `brushX` for the brushing interaction, and `scaleSqrt` for sizing. Mission data is sourced from Kaggle, and country boundaries come from the World Atlas TopoJSON.

Oct 29, 2020

Loading thumbnail…

Country wise Space Missions with Brushing

This visualization combines a world map with a time-series histogram to explore space missions by country. A natural Earth projection renders country boundaries and graticules, while semi-transparent circles sized by mission count mark each country. Users can brush along the histogram’s time axis to filter the map, updating the displayed circles interactively. The example uses d3.geoNaturalEarth1, d3.geoPath, d3.brushX, and d3.bin, with data from a Kaggle-hosted CSV and country shapes from World Atlas TopoJSON.

Oct 29, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris Dataset displays sepal and petal measurements as circles, with interactive dropdown menus to select which attribute appears on each axis. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, custom React components for ticks and marks, and the `react-dropdown` library for menu controls. The SVG rendering updates dynamically when menu selections change, with axis labels and tick formatting adjusting accordingly.

Oct 29, 2020

Loading thumbnail…

Mountains on a Map

A world map displays space missions as circles, with radius encoding the number of missions per city and color representing the country, overlaid on a Natural Earth projection. Using d3.geoPath for land, graticules, and sphere rendering, the visualization employs d3.scaleSqrt for circle sizing and React for component structure. The data comes from a CSV of space mission coordinates, with country boundaries from World Atlas TopoJSON, styled with muted fills and opacity for overlapping points.

Oct 20, 2020

Loading thumbnail…

Number of Missions by Year and Country with an Interactive Color Legend

This scatter plot displays the number of space missions per year, with each country (USA, Russia, China, Kazakhstan) represented by a distinct color. An interactive color legend allows hovering over a country name to highlight its corresponding circles while fading others. The visualization uses D3 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`) and React components for rendering SVG circles grouped by year. Data comes from a Kaggle CSV file processed with D3’s `csv` and `nest` functions, with axes and legend developed as custom React components.

Oct 14, 2020

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with each point colored by species. Hovering over the color legend dims non-matching points, creating an interactive filter. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage the hovered value. SVG circles render the data, while the legend triggers `onMouseEnter` and `onMouseOut` events to update opacity.

Oct 13, 2020

Loading thumbnail…

Stacked Area Chart showing the number of launches per year

A stacked area chart displays the number of space missions launched per year from 1950 to 2020, with each company represented by a distinct color and mission counts shown via tooltips on hover. Built with the Vega-Lite API, the visualization encodes the launch year on the x-axis and the aggregated mission count on the y-axis, using D3's CSV parser to load data from a GitHub-hosted CSV file. The chart is rendered using Vega-Lite's markArea with tooltip handling integrated through the vega-tooltip library's Handler.

Oct 13, 2020

Loading thumbnail…

Number of Space Missions by Company/Country/Status Rocket

A stacked bar chart shows the number of space missions grouped by company, country, or rocket status, with mission status encoded by color and tooltips revealing exact counts. A dropdown menu lets viewers switch the x-axis dimension among these attributes. Built with React, the visualization uses the Vega-Lite API to render bars and a custom `getData` function fetches CSV data via `d3.csv`, extracting the country from the mission location.

Oct 8, 2020

Loading thumbnail…

Number of Space Missions by Company

This interactive stacked bar chart displays the number of space missions for each company, with the mission status (e.g., success, failure) encoded by color. Hovering reveals the mission count via tooltip. The visualization is built with the vega-lite-api, using vega-lite and vega for rendering, and a react-dropdown component allows toggling between grouping by Company Name or Location. Data is fetched from a remote CSV using `d3.csv`.

Oct 8, 2020

Loading thumbnail…

Number of Space Missions by Company

This stacked bar chart displays the number of space missions per company, with bar segments colored by mission status and a count tooltip on hover. Using the vega-lite-api library with d3.csv for data loading, the visualization aggregates company names to count missions, mapping status to color. The chart reads from a remote CSV file and applies custom axis and label styling via a vega-lite config, rendering with vega and vega-lite in an SVG view.

Oct 7, 2020

Loading thumbnail…

Line Chart shows the number of launches per year

This line chart shows the number of launches per year from 1950 to 2020, with each company represented by a distinct color and a tooltip displaying the company name and mission count on hover. Built with vega-lite-api, vega-tooltip, and d3.v5, it uses vl.markLine, vl.x().timeUnit('year'), and vl.y().count() to aggregate the Space_Missions.csv dataset, which is loaded via d3.csv. The visualization renders in SVG with a custom config for axis styling and fills the viewport.

Oct 7, 2020

Loading thumbnail…

Illusion of rain

A grid of small circles falls steadily down the canvas like rain, while a separate set of static grey circles and one gold circle sit in the upper region as a backdrop. The rain effect is animated with a Canvas 2D context, using `requestAnimationFrame` and `Math.sin` to oscillate each dot’s horizontal position and size. The drop size toggles between blue and light blue fills based on a sine threshold. The SVG defines the fixed circles, and the JavaScript loop redraws the moving grid each frame.

Sep 30, 2020

Loading thumbnail…

Line Chart shows the number of launches per year

Sep 23, 2020

Loading thumbnail…

Changes in INR currency with respect to USD over time

This example visualizes the historical exchange rate of the Indian rupee (INR) against the US dollar from 2001 to 2016 using a scatter plot. It shows the trend of INR values over time, with each data point representing a specific date and the corresponding exchange rate, scaled to a fixed y-axis range of 0 to 80. The visualization is built using the Vega-Lite API and rendered with D3, leveraging the `csv` function from D3 to load remote data. The code explicitly sets circle size and opacity for the marks and includes a tooltip for detailed values.

Sep 23, 2020

Loading thumbnail…

Data Analyst Analysis

This visualization shows the relationship between an organization’s type of ownership, its salary estimates, and its rating, using a scatterplot where each point represents a company. The x-axis encodes ownership type, the y-axis encodes salary range, and the color of each point reflects the organization’s rating. Built with the vega-lite-api, it loads CSV data via d3.csv from a GitHub-hosted dataset. The chart is configured with a custom dark theme, and tooltips display company names and ratings, rendered using SVG through vega-tooltip.

Sep 23, 2020

Loading thumbnail…

Loading and Parsing Currency Exchange Rate data

This example demonstrates how to load and parse a CSV file containing currency exchange rates for multiple countries from December 31, 2000 to September 09, 2020. It displays the file size in kilobytes, the total number of rows, and the number of columns from the dataset. The visualization uses the D3.js v6 library, specifically the `d3.csv` function to fetch and parse the remote CSV file, and the `d3.csvFormat` method to calculate its size. The results are rendered as plain text within a pre-formatted HTML element.

Sep 9, 2020

Loading thumbnail…

Modern Angel

The visualization adapts classic smiley-face iconography into a stylized angel, rendered as a full-window SVG using React components. It shows a golden circular face with wireframe glasses, eyes, a red smile, and a nose arc, all composed with D3 shape generators including `arc()` for the nose and mouth, and `line()` for the glasses’ bridge and temples. D3 v6 handles geometry, while React manages the SVG element hierarchy. The layout is centered via translations, with sizes derived from `window.innerWidth` and `window.innerHeight`.

Sep 3, 2020