S

Samir Nandardhane

@Samic25·19 public vizzes

Loading thumbnail…

Interactive Visulization

This interactive visualization shows the number of bike rides, broken down by rideable type, filtered by user type (casual or member), quarter, and year. The chart updates dynamically, rendering a horizontal bar chart for each selected combination. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the categorical and quantitative axes, and renders the bars as SVG `<rect>` elements within a `<g>` transform. A `<title>` element provides tooltips on each bar, while the data is loaded from a CSV file.

Loading thumbnail…

End Station

This bar chart displays the top ten end stations for bike rides, with a dropdown menu to toggle between casual and member riders. The horizontal bars show the number of rides per station, sorted by station name using a band scale. The visualization uses React for the interface, d3.scaleBand and d3.scaleLinear for positioning, and d3.csv to load the ride data from a GitHub gist. SVG rendering and React dropdown menus handle the interactive filtering.

Loading thumbnail…

Start Station

A horizontal bar chart ranks the ten most popular start stations for a selected member type, casual or member, based on the number of rides. The visualization uses React with D3 v5 scales and SVG rendering, loading data from a CSV via `d3.csv`. A dropdown menu filters the dataset, while `scaleBand` and `scaleLinear` position bars and axes, with tooltips showing ride counts.

Loading thumbnail…

Route

This visualization displays the number of rides for different bike types, filtered by member type and season through two dropdown menus. The horizontal bar chart, rendered with SVG in a React component, uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Data comes from a CSV file loaded via `d3.csv`, and the interactive dropdowns update the chart by filtering the dataset. The bars include a native SVG `<title>` tooltip on hover to show exact ride counts.

Loading thumbnail…

Fork of Aggregated, Interactive Common Cocktail Ingredient Pairings

This visualization presents a horizontal bar chart of the 20 most common cocktail ingredients, with bars scaled to the number of cocktails containing each ingredient. A dropdown menu filters the data by the main alcohol type. The chart uses React for state management and rendering, with D3 version 5 for data processing, including `nest()` and `rollup()` from `d3` to aggregate, and `scaleBand` and `scaleLinear` for axes. Data originates from a CSV of the Hotaling & Co. cocktail dataset.

Loading thumbnail…

Fork of Aggregated, Interactive Common Cocktail Ingredient Pairings

This interactive bar chart shows the 20 most common ingredients found in cocktails that contain a selected main alcohol, with bars representing the number of cocktails each ingredient appears in. Users choose the main alcohol from a dropdown menu, which filters the underlying dataset of cocktails collected by Hotaling & Co. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, `nest()` and `rollup()` for aggregation, and SVG `rect` elements with native `title` tooltips for each bar.

Loading thumbnail…

Untitled

This example demonstrates how to build an interactive pie chart using D3 version 6. The chart displays the distribution of bike ride types (classic or electric) within a selected year (2021 or 2022) and user type (casual or member), with data parsed from a hardcoded CSV string via `d3.csvParse`. Users select values from two dropdown menus, triggering the `updateChart` function to filter the data and redraw the SVG using `d3.pie` and `d3.arc`, with text labels placed using `arc.centroid`.

Loading thumbnail…

Bike

This interactive visualization displays bike ride data as an arc diagram, with each arc representing a ride type. Users can filter the data by year and membership type using dropdown menus, which updates the visualization dynamically. The chart is built using Vega-Lite API within a React framework, with Vega and Vega-Lite handling the rendering. Data is loaded from a CSV file using D3’s `csv` function, and the visualization computes quantitative theta values from the ride type field, encoding color by the same nominal attribute.

Loading thumbnail…

Ride Count per Quater as per year

This stacked bar chart displays the estimated religious breakdown of the 20 most populous countries, with each bar representing a country’s total population segmented by religion. Hovering over bars reveals tooltips with exact counts, while hovering over the legend highlights specific religions by dimming others. The visualization uses D3 v3 with `d3.layout.stack`, `d3.svg.axis`, and `d3.legend.color`, rendering in SVG. Data comes from the Pew Research Global Religious Landscape project.

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows the size of a CSS named colors dataset by displaying its byte count, row count, and column count as large text. It loads the data from a local CSV file using the `csv` function from D3 v5, then uses React hooks `useState` and `useEffect` to manage the asynchronous data loading and trigger a re-render. The `message` function computes the statistics with `d3.csvFormat` and `data.columns`, displaying a loading message until the data arrives. The visualization relies on React 16.9 and D3 for data parsing and formatting.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API. It displays a summary of the dataset’s size, row count, and column count in a large text block. The code uses `d3.csv` to fetch and parse the file, then `d3.csvFormat` to measure its size, and also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`. The data source is a CSV file containing CSS named colors.

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays per-capita liters of pure alcohol consumption by country, with values shown via colored bars and a formatted x-axis. Built with React and D3 v5, it loads CSV data from a GitHub gist, uses d3.scaleBand and d3.scaleLinear for positioning, and renders SVG marks. d3.format abbreviates large numbers.

Loading thumbnail…

Mouse Follower

A mouse-controlled circle follows the cursor across an SVG canvas, changing its fill color randomly with every mouse movement. Built with React and D3, the component tracks client coordinates through an `onMouseMove` handler and updates the circle’s `cx`, `cy`, and `fill` attributes via state. The example demonstrates reactive SVG rendering with D3’s `rgb` color generator.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the relationship between three numeric attributes (age, bmi, and charges) from the insure.csv dataset. Two dropdown menus let users select which attribute appears on the X and Y axes, and the axes labels update accordingly. The visualization uses D3 v5 scaleLinear and extent functions to compute domains, maps data to SVG circles, and renders axes with custom tick formatting. The React app leverages the useData hook to asynchronously load and parse the CSV data via D3's csv function.

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays the average avocado price over time, using a smooth natural curve to connect data points. The visualization is built with React and rendered as SVG, with D3 v5 handling the scales and axis generation through components like AxisBottom and AxisLeft. The chart uses a time-based x-axis and linear y-axis, with the dataset loaded via d3.csv from a GitHub gist. Styling is applied through CSS classes, including a teal stroke for the line path and a Poppins font for text elements.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot uses a responsive React component and D3 scales to map age against income from a CSV dataset. The visualization employs D3’s `scaleLinear` and `extent` functions to compute domains, with custom `AxisBottom` and `AxisLeft` components rendering SVG tick marks and labels. Each data point is an SVG circle with a `title` tooltip showing formatted values via D3’s `format`. The chart features rotated axis labels, a Poppins font, and a clean color palette, with styling applied through CSS classes.

Loading thumbnail…

Menus with React

This example demonstrates a dynamic dropdown menu for selecting a pet, with the current choice displayed via React state. The interface uses a styled `<select>` element and a custom `Dropdown` component, which maps over an array of pet options and triggers state updates through the `onSelectedValueChange` prop. The app is built with React and ReactDOM, utilizing the `useState` hook to manage the selected value. The page is rendered in a clean, full-screen layout, with the selection logged to the console for debugging purposes.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading, parsing, and summarizing a CSV file using the D3.js library’s `d3.csv` method. It displays the data’s size in kilobytes, total row count, and column count in a large text element. The data originates from a GitHub-hosted CSS named color dataset. The code also includes commented-out alternatives using `fetch` with async/await and the `d3.csvParse` function, though the active path uses `d3.csv` and `d3.csvFormat` to calculate the file size.

Loading thumbnail…

Fork of Hello HTML

A gallery of randomly generated cartoon faces rendered as React components in SVG. Each face combines a colored background circle, two offset eyes, and an arc-based mouth, with dimensions and colors generated using `Math.random()` and `d3.rgb`. The `d3.arc` API creates the mouth path, while React's component structure composes `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` into a scalable SVG scene. A `range` from d3 instantiates multiple faces simultaneously.