S

SriyaI

@SriyaI·17 public vizzes

Loading thumbnail…

Login & Registration Form

This example presents an interactive login and registration form built with HTML and CSS, featuring a toggle between two views. The interface uses a hidden checkbox (`#check`) to switch between the login and signup forms, with CSS transitions on the submit buttons for hover feedback. The design is styled with the Poppins font from Google Fonts, and the form inputs are purely presentational, with no backend or validation logic. The implementation relies on vanilla JavaScript only for the checkbox interaction, while the visual styling and layout are handled entirely through the included stylesheet.

Loading thumbnail…

Untitled

This example renders an empty HTML page with a linked stylesheet and a Google Fonts import for Cedarville Cursive, but does not display any visual content. The React-based project skeleton includes index.html and style.css files, with the body left blank for future additions. The code demonstrates a minimal starting point for a web visualization, though no JavaScript or data-binding libraries are currently active.

Loading thumbnail…

Draw on Map

This interactive map allows users to draw and edit shapes directly on a geographic canvas, using the Leaflet mapping library and its Leaflet.draw plugin. The example demonstrates how to set up a drawing control with polygon draw enabled and a feature group for managing created shapes. A Mapbox tile layer provides the base map, and the map listens for the `draw:created` event to add newly drawn polygons to the feature group. The visualization also includes sample data files with city names and coordinates, though the current map focuses on the drawing functionality.

Loading thumbnail…

Bar Graph Example

This example creates an interactive map of India showing PM level markers for various cities. When a user clicks a marker, a popup displays a bar chart visualizing the PM level for that location. The map is built with Leafet.js, while D3.js handles both the SVG markers and the Canvas-based bar chart rendering. Marker data comes from a CSV file, and the bar chart is generated by a JavaScript function that draws directly onto the canvas element.

Loading thumbnail…

Bar Graph

This bar graph displays five categorical values (ranging from 10 to 30) as steelblue rectangles. Built with D3 v7, the visualization uses `d3.scaleBand` to position categories along the x-axis and `d3.scaleLinear` for the y-axis, with coordinates mapped to 400-by-300-pixel SVG dimensions. The code renders axes using `d3.axisBottom` and `d3.axisLeft`, drawing the chart into an HTML container.

Loading thumbnail…

Map Example

This map example visualizes a set of latitude and longitude coordinates from a CSV file as markers on an interactive map centered on Delhi, India. It combines Leaflet and the Mappls map SDK, with an extra OpenStreetMap tile layer, to render the geographic context. The code uses D3’s `d3.csv` function to load the data and then creates Mappls markers, binding a popup to each point.

Loading thumbnail…

Map Example

This map example displays geographic markers by loading latitude and longitude coordinates from an external CSV file using D3’s `d3.csv` function. The map itself is rendered with the Mappls API, while an OpenStreetMap tile layer provides the base imagery. Using the `mappls.Marker` class, each data point is placed on the map at its corresponding position, creating a straightforward point-based visualization of the dataset’s locations.

Loading thumbnail…

MapmyIndia Map Example

This example displays an interactive map of India with markers positioned in multiple major cities, including Delhi, Mumbai, Kolkata, and Chennai. The map is built using the MapmyIndia API with a vector layer, and D3.js v7 is used to overlay an SVG circle centered on Delhi with a 10,000-meter radius. The circle’s position updates dynamically on map movement via the `map.on("moveend", update)` event, projecting geographic coordinates to screen space using the `map.project` method. Leaflet, jQuery, and a hardcoded array of latitude-longitude pairs define the marker placements.

Loading thumbnail…

MapmyIndia Map Example

This example displays an interactive street map of India using the MapmyIndia Map SDK, with a set of static markers plotted at major city coordinates. Ten pre-defined latitude and longitude pairs are used to place each marker on the map, and the map itself supports zooming and hybrid (satellite/vector) view. The sample code integrates the D3.js v7 library to draw a circle overlay onto the map, using a hard-coded center point in Delhi and a radius of 10,000 meters. The circle is repositioned dynamically on map pan or zoom events by projecting the geographic center to screen coordinates through the map’s `unproject` and `project` methods.

Loading thumbnail…

MapmyIndia Map Example

This example integrates MapmyIndia and D3 to render an interactive map centered on Delhi, India. It loads a vector tile layer using the MapmyIndia API and initializes a map object to display multiple markers at predefined coordinates. The code also demonstrates combining MapmyIndia with D3 by appending a red SVG circle overlay onto the map container, although the circle's coordinate system is not aligned with geographic space. The map supports zoom controls and hybrid mode for a mixed basemap experience.

Loading thumbnail…

Fork of MapmyIndia Map Example

This example displays a vector map of India using the MapmyIndia (Mappls) API, centered on Delhi, with a collection of red markers positioned over ten major cities including Mumbai, Kolkata, and Bengaluru. The map is initialized with hybrid view and zoom controls enabled. Markers are added programmatically by looping through a hardcoded array of latitude and longitude coordinates. The page loads D3 v7 and jQuery alongside the Mappls map SDK, though D3 is not used for the map rendering itself.

Loading thumbnail…

MapmyIndia Map Example

This example combines D3 v7 with the MapmyIndia (Mappls) API to render an interactive map of India. It initializes a map centered on [28.61, 77.23], enabling hybrid and zoom controls, and then loops through a hard-coded array of latitude/longitude pairs to place markers for ten major cities. The map uses the Mappls JavaScript SDK (`mappls.Map` and `mappls.Marker`) alongside jQuery, with D3 imported but not actively used for the visualization logic. The map is displayed in a large `<div>` occupying 80% of the viewport.

Loading thumbnail…

MapmyIndia Map Example

This visualization showcases a MapmyIndia map with markers placed at multiple Indian cities, using the MapmyIndia Map SDK v3 to render an interactive vector map. The example demonstrates React and D3 integration within a larger starter template, though the map itself is initialized directly in the HTML with the mappls.Map API, and markers are added programmatically via a loop over hardcoded coordinates. The code also includes a separate D3.js scatterplot of the Iris dataset, illustrating decoupled React–D3 patterns, with axes rendered using d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Fork of MapmyIndia Map Example

This example demonstrates a scatter plot visualization of the classic Iris dataset, mapping sepal length against petal length for 150 individual flowers. The visualization overlays semi-transparent circles to reveal data point density and includes labeled axes for both dimensions. Built with React for component structure and D3 v7 for data loading and rendering, the code decouples these concerns through a custom React hook that fetches the CSV data and a separate visualization function that handles scaling and SVG circle rendering. The architecture provides a scalable pattern for projects expecting increasing complexity.

Loading thumbnail…

MapmyIndia Map Example

This example renders an interactive MapmyIndia map centered on India, with a set of markers placed at major city coordinates. It integrates the MapmyIndia map SDK with D3 v7 for data handling and React for component structure. The visualization loads city locations from a hardcoded array and adds corresponding `mappls.Marker` objects to the map. The page also includes commented-out code for loading markers from external CSV or JSON files, demonstrating how the setup could scale to larger datasets. The map is displayed in a full-screen SVG container with a hybrid layer option enabled.

Loading thumbnail…

Fork of MapmyIndia Map Example

This example displays a map of India with markers positioned over major cities, using the Mappls Map SDK (formerly MapmyIndia) for the map rendering and D3.js v7 for additional SVG graphics. The map is initialized with a center point near Delhi and zoom controls enabled, while a loop adds markers for ten specific latitude and longitude coordinates. The code also loads Mapbox GL JS and jQuery, though the primary visualization relies on the Mappls API with a hybrid layer option, and includes commented-out D3 code for potential circle overlays.

Loading thumbnail…

MapmyIndia Map Example

This example displays an interactive MapmyIndia vector map centered on India, with markers placed at ten major cities including Delhi, Mumbai, and Kolkata. The map is rendered using the MapmyIndia JavaScript SDK, while D3 v7 is loaded for potential SVG overlays, though the primary visualization relies on SDK-native marker objects. A hybrid layer provides satellite imagery, and the code demonstrates basic map initialization and marker placement without additional data-driven D3 integration.