size by column sum

100%

size by column sum

✓ Published0🌍 Public

Last edited Jun 2, 2014

Created on Jun 2, 2014

This visualization shows the cumulative sum of a numerical attribute over time, with point markers growing in size as their aggregated value exceeds thresholds of 10 and 100. The map uses CartoCSS and Torque’s frame-based animation to render 128 time steps, applying a sum aggregation function to the `whatever_column`. Marker width scales from 4 to 14 pixels, and trailing frames become larger and more transparent, creating a motion trail effect. The data comes from a gist by andrewxhill, with styling defined directly in the `cartocss.css` file.

AI-generated description

Similar vizzes

Loading thumbnail…

CartoCSS for Animated Bubble Map

CartoCSS drives an animated bubble map of crime incidents, showing how event density changes over time. The visualization uses Torque’s time-based rendering with 72 frames over a 30-second duration, aggregating counts from the `fromdate` attribute. Bubble sizes scale progressively when aggregated values exceed thresholds (2, 8, 16), with an XOR composite operation blending overlapping markers. The map relies on CartoDB’s Torque API and CartoCSS styling, referencing `cartodb_id` for counting, while marker properties like fill color, line width, and ellipse shape are defined in the stylesheet.

Aandrewxhill

66% match

Loading thumbnail…

Gist 10926650

This map animation shows weather anomaly outliers from 1964, with markers transitioning between white and red based on average temperature type values over 1024 time frames. The Torque visualization library (carto.css) animates the data chronologically using the date_str attribute, while marker size and opacity trail behind each frame through frame-offset styling. Data aggregation applies linear interpolation to smooth the temporal transitions across the 120-second animation duration.

Aandrewxhill

66% match

Loading thumbnail…

Gist 8240756

This visualization displays geolocated social media events as circular markers on a map, with color and size encoding event type and frequency. The primary map uses a simple white marker with red outlines, while the demo layer applies CSS Carto styling with category-specific colors for palm, logging, hunting, and mining activities. Marker sizes scale with event counts, and text labels overlay the counts directly. The visualization relies on CartoCSS properties like `marker-width`, `marker-line-color`, and `text-name`, with conditional rules adjusting marker dimensions for higher event thresholds.

Aandrewxhill

64% match

Loading thumbnail…

Fun with Torque

Torque maps animate Denver traffic accident data using CartoDB’s Torque library, which renders time-series point data as animated markers over a base map. The visualization cycles through 512 frames, with each frame aggregating accident counts per geotemporal bin via SQL aggregation functions like `count(cartodb_id)` or `CDB_Math_Mode(district_i)`. Marker size and opacity vary with frame offset to create motion trails, while categorical coloring uses CSS-like `[value=...]` selectors to distinguish districts. The example demonstrates multiple Torque configurations—category, bubble, discrete continuous, and static “Torque-Zero” modes—all driven by CartoCSS properties such as `-torque-frame-count`, `-torque-resolution`, and `-torque-aggregation-function`.

Aandrewxhill

64% match

Loading thumbnail…

Untitled

This visualization shows the cumulative growth of a dataset from 1949 to 2019, tracking a running total that increases from 5 to nearly 15,000 over seven decades. The data is loaded from a CSV file using D3’s `csv()` function, though the rendering logic is incomplete in the provided `index.js`. The example demonstrates how to import and parse tabular data with D3 v3, including accessing SVG dimensions via `.attr()` and preparing the data for subsequent plotting. The chart’s design and marks are not yet implemented in the visible code.

Eelaine-xiao

64% match

Loading thumbnail…

TP3-p3-3

This visualization displays a stacked area chart of stock prices over time, showing how each category contributes cumulatively to the total. It uses a time-scaled x-axis and a linear y-axis with gridlines, and includes a legend positioned at the right side. The code loads CSV data from a remote gist, parses dates, and nests the data by symbol. It computes the sum of other categories for each point to create the stacked effect, then renders the areas using `d3.area` with a basis curve, filling each series with a categorical color from `d3.schemeCategory10`.

RRade-Mathis

63% match

Loading thumbnail…

Torque runtime example | CartoDB.js

This example displays a Torque animated map of Twitter data from the table `twitter_wowfakta`, showing cumulative point aggregation over time. It uses CartoDB.js with the Leaflet map API, initializing a map centered on Java with a Stamen toner basemap. The Torque layer is created via `cartodb.createLayer` with a custom CartoCSS template that sets cumulative aggregation, a marker width of 4 pixels, and a red fill color. The animation runs through the Torque runtime, which processes the data client-side to render temporal patterns.

Aandrewxhill

63% match

Loading thumbnail…

41. D3 Time Scale

This visualization plots a daily time series from January 2017, showing a semi-random “Amount” value for each date. It uses D3’s `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The SVG renders small circles for each data point, with date labels placed behind them. The data is loaded from a CSV file using `d3.csv` and a row converter that parses dates with `d3.timeParse`.

Aamakanju@nyit.edu

63% match