vipin kumar paikra

@vipinpaikra·9 public vizzes

Fork of Choropleth Map with Interactive Filtering

This choropleth map visually encodes countries by economy group using a spectral color scale. Hovering over legend items interactively filters the map, dimming countries outside the selected category while highlighting the chosen group. The visualization uses `d3.geoPath` and `geoNaturalEarth1` for map projections. Data is loaded from the world-atlas TopoJSON and TSV sources, with legend interactions managed through D3 selections and event handlers.

Dec 1, 2022

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

Using D3 v7's `arc` generator, this React-based example constructs a stylized cartoon face composed of modular SVG components for the background circle, eyes, mouth, and teeth. The face is drawn within a centered SVG group using React functional components with configurable props like radius, offsets, and widths. The teeth are rendered as a filled arc with black dividing lines, while the mouth uses an arc path. The code demonstrates component composition and reusable D3 shape generators within a React rendering framework.

Nov 22, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a donut chart displaying six data categories labeled District A through F, with values assigned as static data in a d3 array. The visualization uses `d3.arc` to create the donut shape with an inner radius of 40 and outer radius derived from the viewport, and `d3.pie` to compute the angles for each segment. The chart is rendered as an SVG appended to the body, with each slice filled in steelblue and white strokes, while custom text labels are positioned using `arc.centroid` and rotated based on the slice’s start and end angles. The color scale `d3.scaleOrdinal` defines a range but is not used for slice fills in the code.

Nov 22, 2022

Loading thumbnail…

Fork of Humidity histogram

This example visualizes the distribution of humidity measurements from a 2016 weather dataset as a histogram. The chart displays twelve bins of humidity ranges on the x-axis, with the count of days in each bin represented by the height of blue bars. A dashed maroon line marks the mean humidity value. The visualization is built with React and D3 v5, using `d3.histogram()` to generate bins and `d3.scaleLinear()` to map data to SVG coordinates. The code also implements accessibility features, adding ARIA roles and labels to chart elements.

Nov 21, 2022

Loading thumbnail…

Fork of map of epa data sites

This example shows U.S. Environmental Protection Agency air quality data as a bubble map, with circles representing sites and sized by their AQI value over a geoAlbersUsa projection rendered with d3.geoPath. The visualization combines a state-atlas overlay with data-driven circles, and also includes a date histogram that bins the same dataset by month to show average AQI trends. It uses React hooks to load the data via d3.csv and the U.S. Atlas TopoJSON, while d3.scaleSqrt, d3.bin, and d3.scaleTime handle quantitative scaling and temporal aggregation.

Nov 21, 2022

Loading thumbnail…

Fork of Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation for ward 61 in Mumbai, overlaying building-level dry/wet waste data and population from a GeoServer WFS feed onto an OpenStreetMap basemap using Leaflet. The visualization distinguishes buildings linked to specific waste-collection gates, coloring those associated with a selected gate black while others remain orange. D3.js fetches the GeoJSON building, gate, and mapping data asynchronously, while Leaflet's `geoJSON` and `circleMarker` functions render the spatial layers with popups showing per-building waste statistics.

Nov 19, 2022

Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

This donut chart displays the number of songs per language, showing the top nine languages individually and aggregating the rest into an "Others" slice. Clicking the "Others" segment zooms in to reveal a secondary pie chart with all remaining languages. The visualization uses D3 v6 with the `pie()` and `arc()` generators, scales ordinal colors with `d3.schemeTableau10`, and implements interactive tooltips via mouse events. Data is loaded from a local JSON file, and the SVG is rendered within a Vue-based environment.

Nov 18, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a static HTML page that greets visitors with the text “Welcome to India!”. It demonstrates the basic structure of an HTML document, incorporating embedded CSS styling within a `<style>` tag and JavaScript capabilities. The page uses a simple `<h1>` heading element with a class attribute, though no explicit CSS rules or JavaScript functions are defined in the provided code. It serves as a minimal starter template for web development using standard HTML and CSS technologies.

Nov 17, 2022

Loading thumbnail…

Fork of Basic shapes Element

This example demonstrates a collection of basic SVG shapes—a circle, rectangles, arcs, lines, and a path—rendered with D3 v6. It shows how to construct and position each element using D3 selection methods and the `arc()` and `line()` generators, binding data to drive multiple rectangles. The visualization includes a line chart path built from an array of coordinates, a pink circle driven by a datum array, and a custom path created with the `d3.path()` API. Employee data is available but not visualized.

Nov 11, 2022