fresh block

100%

✓ Published0🌍 Public

Last edited Sep 17, 2017

Created on Sep 17, 2017

This visualization uses kriging interpolation to predict values across a grid from a sparse set of 36 data points with x, y, and t coordinates. The result is shown as a set of filled contour paths, rendered via d3.geoPath and d3.geoIdentity, with each contour colored according to a sequential terrain color scale derived from d3.interpolateHslLong and d3.hsv. The underlying matrix algebra and variogram fitting are handled by a custom kriging.js library, while the contours are computed using d3-contour.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/8b7a607d72e500da0b65ce4fe19c8b68'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example visualizes a geographic or map-based dataset for the year 2018, using a custom JavaScript component embedded in a responsive container. The visualization is rendered through a dedicated script that likely leverages D3.js v4, as indicated by the imported d3.v4.min.js library. It employs D3’s force simulation or projection techniques to display spatial data, though the exact method is not visible in the code snippet. The page uses a full-viewport fixed layout, with the chart container supporting lazy loading and responsive behavior. The data source originates from a GitHub-hosted gist, and the implementation relies on standard DOM manipulation via D3’s selection and data-binding APIs, without additional frameworks like Three.js or Canvas getImageData.

GGerardoFurtado

73% match

Loading thumbnail…

fresh block

This example shows a spinning orthographic globe with continent outlines, rendered as SVG paths. The map rotates continuously using a `d3.timer` that updates the projection’s rotation, while `d3.geoPath` redraws the continent geometry each frame. The globe is styled with a light blue background and uses GeoJSON country data loaded from a remote URL. Although a CSV file with city pollution data is included, it is not referenced in the code. The visualization relies solely on D3 v4’s geographic and timer utilities.

CCanaramour

73% match

Loading thumbnail…

fresh block

A grid of four square rectangles is drawn on an SVG canvas, each positioned along the x-axis with identical y-values, and colored with a cool-tone gradient that shifts based on each square's x-coordinate. The visualization uses d3.v4 and the data-binding pattern `selectAll().data().enter().append()` to create the shapes. The x- and y-positions are mapped through `d3.scaleLinear` domains, while a `d3.scaleSequential` with `d3.interpolateCool` determines the fill color. The static dataset is hardcoded in the script, and margins are applied via a translated SVG group.

RRobertDelgado

73% match

Loading thumbnail…

fresh block

This example displays a simple line chart of six numeric values from a static array, rendered as a single green path on a blank SVG canvas. The visualization uses D3 v4 to create linear scales for the x- and y-axes, with the x domain set to the indices of the data points and the y domain scaled from zero to the maximum value. An SVG path is drawn using `d3.line()` with coordinates mapped through those scales. The chart does not include axes, labels, or gridlines, showing only the raw trend line.

KKacieW

73% match

Loading thumbnail…

fresh block

A map visualizes multiple voyages as colored, animated routes across a Mercator projection, with each year's set of journeys shown as dimmed paths and red markers moving along them, while green and red text labels sort voyages by year and individual trip. Clicking a year toggles its paths' opacity, and clicking a voyage label triggers a transition on the corresponding path marker. The visualization uses D3 v4's `d3.geoMercator`, `d3.geoPath`, `d3.line` with `d3.curveCatmullRom`, `d3.nest`, `d3.queue`, and `d3.csv`, reading voyage data from `multipleVoyages4.csv` to render SVG paths, circles, and text with fading encodings.

SSallyFl

73% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

73% match

Loading thumbnail…

fresh block

A stylized area chart displays layered time-series data using a silhouette offset to show relative values across categories. The visualization uses D3 v2 with SVG rendering and cardinal interpolation to create smooth, overlapping curves in an orange color palette. Users can hover over any layer to highlight it while dimming others, with a tooltip revealing the specific category name and value at the cursor position. The chart loads data from an external CSV file and includes both left and right y-axes with a weekly time scale on the x-axis.

PPardhu448

72% match

Loading thumbnail…

fresh block

A circular boundary is drawn in the center of the SVG canvas with a thick black stroke. Inside this boundary, a blue polyline connects 24 data points, each representing a monthly value from 2010 to 2011. The x-axis is scaled by value and the y-axis by month using ordinal scales, and the line is generated with `d3.svg.line()`. The visualization uses D3.js version 3.5.5 and renders entirely as SVG.

SSokrates86

72% match