Skip to main content
Log in
S

sagar limbu

@sagarlimbu0·12 public vizzes

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a bubble map with a time-series histogram to explore migration incidents. The map displays circles sized by the total dead and missing at each location, while the histogram below aggregates these counts by month. Users can brush over the histogram to filter the map to a specific time range. Built with React and D3 v5, it uses `geoNaturalEarth1` for map projection, `brushX` for interactive selection, and loads data from a CSV of missing migrants alongside World Atlas TopoJSON boundaries.

Sep 23, 2022
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes Fisher's Iris dataset, with dropdown menus that let the user select which attribute is displayed on the x and y axes from options including sepal and petal measurements and species. The plot, rendered as an SVG using React, updates the axes and data points dynamically when the selection changes. The code uses `d3.scaleLinear` for axis scaling, `d3.extent` for domain calculation, and `d3.format` for tick labels, with data loaded from a CSV via `d3.csv`.

Sep 13, 2022
Loading thumbnail…

Stylized_bar_chart

This stylized bar chart displays the population of the top 10 countries from the UN Population 2019 dataset. Orange rectangles, generated through React components, map each country’s population using d3.scaleBand and d3.scaleLinear. The SVG visualization includes labeled axes with tick formatting via d3.format, while CSS styles green tick text and an orange fill. Data is loaded asynchronously with d3.csv and React hooks, with hover tooltips providing formatted population values.

Aug 25, 2022
Loading thumbnail…

bar_chart

This example shows a horizontal bar chart displaying the top 10 countries by population in 2020, based on data from a UN population CSV file. The chart uses React with hooks to load and process the data, and renders bars as SVG rectangles scaled with D3’s `scaleLinear` and `scaleBand`. Axis ticks are drawn using D3’s `ticks()` method, and both countries and population values are labeled directly within the visualization. The bars are vertically centered on each band using the scale’s `bandwidth()` function.

Aug 22, 2022
Loading thumbnail…

Fork of Polished World Map

This world map displays country boundaries and graticules using a natural Earth projection, with landmasses filled in teal and interior borders in a lighter shade. The visualization is built with React and D3 v5, using `geoNaturalEarth1` and `geoPath` to render SVG paths, while `geoGraticule` generates the latitude/longitude grid. Data comes from World Atlas TopoJSON, processed via TopoJSON’s `feature` and `mesh` functions to extract land polygons and country interiors. Styling emphasizes a clean, polished aesthetic with muted colors and hidden page overflow.

Aug 20, 2022
Loading thumbnail…

world ma Points on a Map

This visualization displays a world map with points marking cities whose population exceeds 50,000, sourced from the Simplemaps World Cities Database. It uses a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, interiors, and a sphere outline from World Atlas TopoJSON data. City points are projected and drawn as semi-transparent circles. The React-based implementation, using d3.v5 and SVG rendering, creates a clean, minimal aesthetic with light gray landmasses and teal city markers.

Jun 24, 2022
Loading thumbnail…

Scatter_Plot_IRIS_dataset

A scatter plot of the IRIS dataset displays sepal length against sepal width, with each flower represented as a red circle. The visualization uses React with D3 v7 functions like `scaleLinear` for axis scaling and `extent` for domain calculation. Data loads from a CSV via `d3.csv`, and SVG elements render the axes, grid lines, and labeled data points with tooltips.

Jun 17, 2022
Loading thumbnail…

Fork of Refactored_bar_chart

This bar chart displays the 2020 population estimates for ten countries, using horizontal bars ordered by country name. The visualization is built with React and D3 v7, where `d3.scaleBand` positions the categorical y-axis and `d3.scaleLinear` maps population values to bar widths. SVG rectangles are rendered through the custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. The data originates from a CSV file of UN Population 2019 data, loaded asynchronously and processed to extract the 2020 values.

Jun 1, 2022
Loading thumbnail…

Loading_data_w_React

This visualization displays the CSS named colors as a full-circle pie chart, with each color represented by a wedge around a central point. The data is loaded from a CSV file hosted in a GitHub Gist using D3's `csv` function, then fed into D3's `pie` layout with a static value of 1 per record. The resulting arcs are drawn as SVG `<path>` elements, filled with each row’s `RGB hex value` and positioned using a `d3.arc` generator with an inner radius of zero and an outer radius equal to the canvas width. React manages the state and rendering, showing a loading message until the asynchronous data fetch completes.

May 30, 2022
Loading thumbnail…

viz_plots

This example displays a bar chart of the top 20 countries by population, with each bar colored according to the predominant religion of that country. The visualization is generated using the Vega-Lite API via `vega-lite-api`, which interfaces with the Vega and Vega-Lite rendering engines to create an SVG output. Data is fetched asynchronously from a CSV file hosted on GitHub using D3.js's `csv` function. The chart encodes country on the x-axis, population on the y-axis, and religion as both color and tooltip, with axes configured through a custom config object.

May 27, 2022
Loading thumbnail…

MOUSE cursor

A smiling face composed of SVG circles and an arc path is rendered across a 15-element grid, with each face centered and scaled via a React component hierarchy. The code uses D3’s `arc()` generator to create the mouth, while the face’s background, eyes, and container are separate React components that pass sizing and offset props. The static grid is defined using D3’s `range()` and mapped in a React `App` component, with the SVG group translated to center coordinates for each face.

May 24, 2022
Loading thumbnail…

Hello lads!

This example displays fifteen identical smiley faces arranged in a grid using React components and SVG rendering. Each face consists of modular components for the background circle, eyes, and mouth, with the mouth drawn using d3’s `arc` generator. The `FaceContainer` wraps the SVG and applies a translation transform to center each face, while React maps over a range of numbers to render the repeated elements. The code uses React 17 and D3 v7.

May 24, 2022