SWK testing

100%

✓ Published1🌍 Public

Last edited Nov 9, 2020

Created on Nov 9, 2020

This chart displays daily dry-waste totals after segregation for lanes in the SWK dataset, with bars colored by lane name and tooltips showing the number of houses performing segregation. Built with the vega-lite-api, it uses `vl.markBar()` and encodes the sum of `drywaste_af` against the date field. Data loads from a CSV via `d3.csv`, with the view sized to the window and rendered as SVG.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

SWK testing 3 month

This visualization displays a bar chart of dry waste before segregation for the HiraSethChawl – Waras Lane over a three-month period in 2020. The chart uses a vega-lite-api specification with a single bar mark encoding a quantitative y-axis and temporal x-axis. Data is loaded asynchronously from a TSV file via `d3.tsv`, filtered to a single lane, and parsed for numeric values. Custom axis and label styling are applied through a config object, while the chart is rendered with vega-tooltip for interactive hover details.

AAnimesh Nautiyal

87% match

Loading thumbnail…

Untitled

This example visualizes municipal waste segregation data for three lanes in Mumbai, overlaying lane polygons on a map with a dark fill and white borders. The map uses `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON features from `dummy_lane_polygon_swk.json`. A related CSV file `dummytracksheet.csv` provides daily tracking metrics such as houses reached and dry/wet waste amounts, though the visible code loads the data without drawing the linkage lines. The visualization is built with D3 v4 and React, rendering to an SVG element.

SShweta-tech

70% match

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation and building population data across Ward 61, using colored circular markers to represent buildings and their associated waste metrics. The visualization displays building-level details such as dry/wet waste amounts and total population in popups upon clicking. Built with Leaflet for map rendering and D3.js (v5) for fetching GeoJSON data from a GeoNode server, the example layers building and gate locations over OpenStreetMap tiles. It also incorporates a mapping file that links buildings to waste collection gates, allowing for dynamic restyling of markers based on gate assignments.

DDing

65% match

Loading thumbnail…

Scatter Plot - RDG2018

This scatter plot displays monthly waste measurements in kilograms (WasteKgs) for 2018, sorted by month. The visualization uses React with D3 v6 for scales and SVG rendering, loading CSV data from a GitHub gist. It employs `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with reusable axis components and circle marks that include native SVG tooltips via the `<title>` element. Custom Poppins typography and teal circle styling give the chart a clean, modern appearance.

AAndres de la Garza

65% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Ssofia-martinovich

63% match

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.

Vvipin kumar paikra

63% match

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map displays building-level waste generation data in a Mumbai ward, using Leaflet to render an OpenStreetMap base layer with circle markers. Each building marker is color-coded and clickable, revealing a popup with population, dry waste, wet waste, and total waste values from GeoJSON fetched via D3.js. The visualization overlays building-to-gate mapping data, highlighting which buildings are connected to specific waste collection gates. The code uses `d3.json` to load GeoJSON data from a GeoNode WFS service and a GitHub-hosted mapping file, with Leaflet's `L.geoJSON` handling dynamic styling and interactive popups.

AAndre J Denais

63% match

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation data for buildings in Ward 61, Mumbai, using Leaflet for the base map and D3.js (d3.v5) to fetch GeoJSON data from a GeoNode server. Orange circle markers represent buildings, each with a popup showing population and waste metrics (dry, wet, and total). A linked dataset from a JSON file maps gate IDs to building numbers, allowing the visualization to likely highlight buildings associated with a specific gate by recoloring them black, as demonstrated in the styling function.

MMunisbek-design

63% match