Tell us what works and what could be better. We read every submission.
@andreaangeli·15 public vizzes
This updating radar chart, built with D3.js and rendered in SVG, animates multi-axis data comparisons through smooth transitions. It visualizes changing values as layered, colored polygons across multiple radial axes, with ring levels, hover interactions, and a configurable legend. The code organizes hover targets and tooltips into separate SVG layers to maintain proper stacking, and exposes accessors for updating data, transitions, colors, and axis ranges, plus array methods like push, pop, and slice for dynamic dataset manipulation.
This example demonstrates a step-by-step process for obtaining a Facebook Page access token that does not expire, using the Facebook Graph API. It shows the sequence of calls, from acquiring a short-lived user token with `manage_pages` permission, exchanging it for a long-lived token via the `oauth/access_token` endpoint, and finally retrieving the permanent page token through the `/accounts` endpoint. The code uses plain HTTP requests to `graph.facebook.com` and includes the necessary parameters such as `client_id`, `client_secret`, and `fb_exchange_token`. The visualization is a textual guide with code snippets, highlighting the exact API endpoints and token transformations.
A Responsive Chord diagram visualizes bilateral trade flows between countries, using curved chords to show the direction and volume of exchanges between pairs of sellers and buyers. The matrix-based layout positions entities around a circular arc, with chord thickness proportional to flow values read from a CSV file. Built with D3 v3, the code employs `d3.layout.chord` to compute the layout, ordinal color scales for categorical grouping, and custom tooltips for hover details. The visualization also implements fade effects on non-hovered chords to focus attention on specific relationships.
A simple Leaflet map displays a set of aircraft positions as clickable markers, each showing a flight identifier in a popup. The map uses Leaflet 0.7 with an OpenStreetMap tile layer, centered on New Zealand. Marker coordinates and labels come from a hardcoded JavaScript array of nine planes. The code initializes the map with `L.map`, adds tiles via `L.tileLayer`, and places markers using `L.marker` with `bindPopup`.
This example displays an interactive web map centered on a specific location in Toronto, with a purple polygon overlaid to highlight a defined area. The map uses the Leaflet JavaScript library version 0.7.3, pulling base tiles from OpenStreetMap. The view initializes at latitude 43.64701, longitude -79.39425, with a zoom level of 15 and scroll-wheel zoom disabled. A polygon is drawn from a hardcoded array of three coordinate pairs using `L.polygon`, styled with a purple color and partial opacity. The map container is a fixed 960 by 500 pixel div.
This example displays an interactive web map centered on a location in Toronto, with a single default marker placed at the map’s center. It uses the Leaflet JavaScript library, version 0.7.3, to create the map object and render base tiles from OpenStreetMap. The map’s initial view is set to latitude 43.64701 and longitude -79.39425 at zoom level 15, with scroll-wheel zoom disabled. The code references the Leaflet CSS for styling and calls `L.map`, `L.tileLayer`, and `L.marker` to construct the visualization.
This example shows an interactive web map centered on a location in Toronto, with a red rectangle overlay marking a specific area. The map uses Leaflet 0.7.3, initializing a map object with a set view at latitude 43.64701, longitude -79.39425, and zoom level 15, while disabling scroll wheel zoom. It loads OpenStreetMap tiles as the base layer with attribution, and adds the rectangle via `L.rectangle()` with defined geographical bounds and basic styling. The map is rendered in a fixed-size div with a width of 960 pixels and height of 500 pixels.
This interactive web map displays a route through downtown Toronto as a red polyline overlaid on OpenStreetMap tiles. The map initializes with a view centered at latitude 43.64701 and longitude -79.39425 at zoom level 15, with scroll-wheel zoom disabled. Using the Leaflet JavaScript library and its CSS stylesheet, the code defines an array of six coordinate points representing the path and renders them via `L.polyline` with red color and full opacity. The base tiles come from OpenStreetMap’s tile server, with attribution included. The map container is a div with fixed dimensions of 960 by 500 pixels.
This example shows the results of the 2014 European Elections in Italy as a bar chart, with each party’s vote percentage labeled above its bar and a red threshold line marking the 4% electoral barrier. It retrieves data from a public Google Sheet using the Tabletop.js library, then renders the chart as SVG with D3.js version 3.5.5. The bars are colored by party via CSS classes, and axes use percentage formatting.
This visualization maps the hometowns of international student-athletes, marking each athlete with a blue icon on a Leaflet map. The map clusters nearby markers using the Leaflet.markercluster plugin to show density. Athlete data, including name, sport, and hometown, is embedded directly in the JavaScript as a static array, rendered with Leaflet’s AwesomeMarkers and Font Awesome icons. The map uses a simple zoomable tile layer to display global distribution.
This bar chart displays the results of the 2014 European Elections in Italy, showing the percentage of votes for each party and a threshold line at 4%. It retrieves data from a Google Sheet using the Tabletop.js library, then renders the chart with D3.js version 3.5.5 as SVG. The chart includes labeled bars, axes, and a red limit line, with colors assigned to individual parties.
This example shows how to build a responsive, mobile-first website using Twitter Bootstrap, based on a NICAR 2015 workshop presentation. It demonstrates setting up a project folder, linking Bootstrap’s CSS and JavaScript via CDN or local files, and adding custom styles with a separate stylesheet. The code uses Bootstrap’s grid system with media queries for extra small, small, medium, and large devices, and includes a basic HTML template with jQuery plugins. The material is presented as a step-by-step tutorial with code snippets and links to Bootstrap’s documentation.
A Leaflet choropleth map shows the GDP per capita of Italian regions, using a color scale from light pink to dark red based on an index where Italy's average equals 100. The map renders on a Stamen Toner background and includes an interactive legend in the bottom-right corner. When the user hovers over a region, it highlights the area and displays the region's name and index value in a control panel. Clicking a region zooms the map to fit its bounds. The choropleth uses five color bins to represent GDP per capita relative to the national average, with hover interactions and a legend indicating the index ranges.
This choropleth visualizes per-capita environmental spending across Italian regions, with values ranging from 19 to 517 euros. A quantize scale maps expense values to a sequential YlGn color scheme, so darker greens indicate higher spending. Region boundaries are rendered as SVG paths, with tooltips showing region names and exact values. Animated transitions highlight regional differences, and major cities are labeled using a cities.tsv file.