Skip to main content
100%

Gist 092aa2e48ca8ac4518b5b5c39e1c1682

✓ Published0🌍 Public
YYousefED
Last edited Dec 10, 2016
Created on Dec 10, 2016

This example demonstrates a performance stress test for rendering a large collection of paths in a Cesium geospatial scene. The visualization displays 1,000 red glowing polylines, each spanning a fixed geographic area. The code uses the Cesium `PolylineCollection` primitive to aggregate all lines into a single rendering object, with each line created via `Cesium.Cartesian3.fromDegreesArray` for coordinate conversion. The visual style applies `Cesium.Material.PolylineGlowType`, a glow material with a specified `glowPower` and `Cesium.Color.RED`, and a fixed line width of 10 pixels. The scene is hosted in a `Cesium.Viewer` container, with all polylines added programmatically in a loop.

AI-generated description

Similar vizzes

Loading thumbnail…

polyline

This example renders 1000 randomly generated 3D points as a single SVG `<polyline>` element, using a `<marker>` to draw small line segments at each point. The code demonstrates high-performance SVG rendering by updating the polyline’s point coordinates directly via the `SVGPointList` API instead of re-serializing string attributes. It also shows CSS styling of markers and a static pseudo-3D projection (rotation is commented out). The visualization highlights that SVG `transform` updates are not GPU-accelerated, unlike HTML elements, as noted in the README.

SSaminu
62% match
Loading thumbnail…

Gist ec930412e72d913bffbb04219457e593

A single, continuous polyline forms a zigzag pattern across the SVG viewport, alternating between the top and bottom edges. The line, defined by a single `polyline` element, uses coordinates that increment horizontally by roughly 9.7 units, creating a regular sawtooth wave. The rendering relies on raw SVG, with the polyline’s points explicitly listed in the markup. The visualization demonstrates a minimal, purely geometric data trace, showing how a sequence of values can be encoded as alternating high and low positions. No external libraries are used; the example relies on the native SVG polyline API.

EEelsie
61% match
Loading thumbnail…

Gist 85a75203bb9327d5704c

This example visualizes a single blue polygon with a semi-transparent fill and a bold outline, rendered from GeoJSON coordinate data. The visualization relies on a custom rendering approach, likely using d3.geoPath to project and draw the polygon onto an SVG or canvas element. The code applies explicit styling properties—fill, fill-opacity, and stroke-width—directly from the feature’s style object, demonstrating how geographic features can be styled programmatically. The rendering is static, with no animation or interaction, and the polygon’s vertices span longitude and latitude values to illustrate basic map-projection output.

CCliffordAnderson
61% match
Loading thumbnail…

Gist 8b620912223c40ebf1ddf9d163f54f9e

The visualization depicts a geometric star-like shape formed by interconnected lines and polygons, overlaid with a white linear network that traces a distinct path across the canvas. It renders an abstract, minimal composition in black and white, using SVG elements such as polygons, polylines, and paths. The code specifies explicit coordinate points and stroke properties, with the main structure defined by a filled polygon and additional lines drawn using SVG’s line and polyline primitives. The rendering relies on static SVG markup, likely generated in Adobe Illustrator, rather than a dynamic JavaScript library.

Aantoinedejonckheere
61% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
60% match
Loading thumbnail…

random-simple-poly-circle

This visualization shows a grid of 24 simple polygons, each constructed from 100 random points. Every polygon is composed of semi-transparent circles and a connecting path, creating a varied, organic geometric pattern across the canvas. The code uses D3.js, specifically `d3.scale`, `d3.select`, and `dataAppend`, along with a custom `randPoly` function. The polygons are positioned via SVG `g` elements and translated using a `translate` method, with points rendered as circles with a radius of 1.5. Rendering is done through SVG paths and elements in HTML.

11wheel
60% match
Loading thumbnail…

Gist 8393715

This example visualizes a set of geolocated points in the Matera, Italy area as a static scatterplot. The code loads a GeoJSON GeometryCollection of point coordinates and plots them using D3’s geographic projection, with `d3.geoPath` to render the geometry. The points represent recorded signals or reports, and their spatial distribution reveals clusters around certain urban zones. The visualization uses D3’s data-binding to draw circles for each coordinate, with no interactive or animated behavior, relying solely on the projection and canvas rendering to communicate the location pattern.

Aadkatrit
60% match
Loading thumbnail…

Pipeline test

This example displays pipeline routes over a geographic area, distinguishing high-pressure (green) and transmission (gold) lines. The D3 map uses a Mercator projection fitted to the high-pressure pipeline data, which sets the map’s scale and center. SVG paths render the GeoJSON line features, with the transmission layer added after the high-pressure layer. The background is plain white, with no street grid visible, and the pipelines appear as thin, colored lines. Hover effects are commented out, so the visualization is static. The map is sized at 800×600 pixels.

Aajzeigert
59% match