d3 drop shadow example

100%

d3 drop shadow example

✓ Published0🌍 Public

Last edited Mar 19, 2013

Created on Aug 28, 2020

Three steelblue rectangles with drop shadows are drawn on an SVG canvas using D3.js v3. The example demonstrates SVG filter effects, specifically `feGaussianBlur`, `feOffset`, and `feMerge`, to create a blurred, offset shadow behind each rectangle. Data is stored in a simple JavaScript array of coordinates, and `d3.select` and `selectAll` bind this data to the rectangles, applying the filter via the `style("filter", ...)` attribute. The code is based on a gist by ackuser and uses D3’s SVG rendering.

AI-generated description

Similar vizzes

Loading thumbnail…

SVG Foundamentals

This example renders a single white, card-like SVG shape with a drop shadow, demonstrating foundational SVG elements and filters. The code defines an SVG canvas with a 1440×550 viewBox, using a `<path>` with `fill-rule="evenodd"` to create the curved panel. A `<filter>` with `feDropShadow`-style operations (`feOffset`, `feGaussianBlur`, `feColorMatrix`, and `feBlend`) adds a soft gray shadow beneath the shape. The page is a bare HTML document with inline CSS and JavaScript, showing how to embed SVG markup directly.

Ddhou47

76% match

Loading thumbnail…

SVG Fundamentals

This example displays a static SVG visualization of a patterned rectangular canvas with a subtle drop shadow and crisp edge rendering. The code embeds an SVG element directly in HTML, using filter operations like `feDropShadow` and `feGaussianBlur` to create depth, while a `pattern` element references an embedded image via `xlink:href`. It demonstrates fundamental SVG layout with explicit `width`, `height`, and `viewBox` attributes, alongside CSS-free styling through inline XML attributes. The example serves as a minimal introduction to SVG structure and compositing effects.

MMonWas

73% match

Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2

72% match

Loading thumbnail…

D3.js Basic Shapes

This example demonstrates fundamental SVG shape creation and geometric transformations using D3.js v4. It draws circles, lines, and rectangles with various colors and stroke widths, then shows how to apply translation, scaling, and rotation operations to these shapes. The code appends SVG elements directly to the body and uses D3's selection methods to set attributes like `cx`, `cy`, `r`, and `transform`, and includes text labels to annotate each operation.

AAshwathSalimath

71% match

Loading thumbnail…

d3 Bland Canvas

A full-window SVG renders a single rounded rectangle over a light gray background. Using D3 v5, the example selects the root `svg` element, sets its dimensions from the browser viewport, and appends a `rect` with a 40-pixel corner radius via `selection.append` and `attr`. The code draws no data; it demonstrates basic D3 selection, styling, and SVG shape creation in a minimal canvas.

JJohnPaulPagelerJr

71% match

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

71% match

Loading thumbnail…

Face examplle with D3.js

This example renders a simple blue circle on a light blue background using D3.js v5 and SVG. The code selects the SVG element, sets its background color, and appends a circle with a fixed radius of 200 pixels. It demonstrates basic D3 selection, style, and shape creation through the `select` and `append` APIs.

VVadim Jouk

71% match

Loading thumbnail…

D3.js in action!

This example shows a red square with a thick black border rendered inside an SVG canvas, demonstrating basic D3.js DOM manipulation. The code uses `d3.selectAll('svg')` to target the SVG element and appends a `rect` with attributes for position, size, stroke, and fill. It relies on the D3 v5 library loaded from a CDN, and renders the shape as pure SVG geometry without any data binding or interaction. The result is a static visual, illustrating how D3 can directly create and style SVG elements.

SSagar Malviya

71% match