.call()

100%

✓ Published0🌍 Public

Last edited Aug 24, 2021

Created on Aug 24, 2021

This example demonstrates the JavaScript `.call()` method within a D3.js context, showing how a custom function can be invoked with an explicit `this` binding and arguments. An SVG element is selected using `d3.select` and then passed to the function via the selection’s `.call()` method, along with a data object containing numeric properties. The function logs the selected DOM element, the passed object, and concatenated property values to the console. The visualization itself renders a blank SVG canvas, with the primary output being console-based rather than graphical, using D3 v6 and plain JavaScript.

AI-generated description

výpis do konzole

In this example, this represents the object that "owns" myFunction:<br> document.getElementById("demo").innerHTML = myFunction.call({model: 'necosic'});

function myFunction() { return this; }

<b>Functions are Objects</b><br> The typeof operator in JavaScript returns "function" for functions.

But, JavaScript functions can best be described as objects.

JavaScript functions have both properties and methods.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello D3

This example demonstrates the simplest possible D3.js visualization: a single SVG circle centered on a blank canvas. The code imports the `select` function from D3 v6 via an ES module, selects the `<svg id="viz">` element, and appends a circle element with a radius of 200 pixels, rendered as SVG. It showcases the fundamental pattern of selecting, appending, and styling elements using D3’s declarative API. The accompanying README links to a video for beginners, emphasizing the learning-focused intent of the minimal code.

JJacopo Poletto

69% match

Loading thumbnail…

SVG

This example demonstrates how to create an SVG visualization using D3 v6's selection API to append elements directly to the DOM. The code shows a minimal setup with a 960x500 SVG canvas, using `d3.select` and `selection.attr` methods. Commented-out code illustrates an alternative approach using native DOM methods like `createElementNS` for manual SVG construction, including a mask element and rectangles. The current active code simply creates an empty SVG, while the commented section reveals a potential pattern for applying masks to shapes within the SVG namespace.

WWater.Danlei

68% match

Loading thumbnail…

Let's

This example displays a single large circle rendered in SVG, centered within a 960 by 500 viewport. The visualization demonstrates fundamental D3.js v5 selection and manipulation methods, using `d3.select` to target the SVG element and `append` to add a circle with a radius of 200 pixels. The page’s CSS hides any overflow and removes default margins. A console log confirms the loaded D3 library, while the embedded YouTube video suggests related context. The code relies on minimal D3 APIs to show basic SVG shape creation.

Ccatsugly66

68% match

Loading thumbnail…

D3 js

This example demonstrates a minimal SVG canvas that is styled with a red background using D3.js. The code selects an SVG element via `d3.select('svg')` and applies the background color through the `style()` method. It relies on the D3 v7 library loaded from a CDN, with rendering performed entirely through SVG elements. The visualization serves as a bare-bones starting point, showcasing how D3 can interact with and manipulate existing HTML/SVG structures. The data source is not applicable, as the example focuses solely on basic styling operations without any data-driven graphics.

田田伟业

68% match

Loading thumbnail…

JS practice

This example demonstrates the use of JavaScript and D3.js to create an SVG-based visualization, rendering a black rectangle within a 960x500 pixel canvas. The code loads D3 via UNPKG and uses the `select` function to set the text content of a message div, while also importing a local ES6 module. It combines direct SVG manipulation through the Document API with D3’s utility functions.

CCameron Wehr

68% match

Loading thumbnail…

"Javascript Practice"

An example of basic SVG circle placement using D3 version 7. The code creates three circles positioned via groups at different screen coordinates, with contrasting stroke and fill colors. It uses `select` to append an SVG element sized to the window, then applies explicit `attr` calls for circle positions and styling, demonstrating straightforward group transforms and child element creation in a D3 SVG canvas.

Fferneyhoughedward@gmail.com

67% 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

67% match

Loading thumbnail…

D3 select() and selectAll() examples

This example demonstrates how D3’s `select()` and `selectAll()` methods locate and modify SVG elements, showing a simple bar chart whose rectangles change fill colors through chained attribute, style, and class updates. The code uses the D3 v7 library to select the `<rect>` elements by ID and class, then applies a chain of changes to the middle bar—such as setting its height, fill, and highlight class—while also updating the page title text. Console logs reveal the values read back from selected nodes, and the script prints the chart's bounding rectangle and SVG bounding box to inspect its layout.

AAxVa 🐍 💪

67% match