More basics of JS

100%

More basics of JS

✓ Published0🌍 Public

Last edited Jan 15, 2020

Created on Jan 12, 2020

Rendering five circles in an SVG via a React-started D3 v5 data join, this example demonstrates enter, update, and exit selections over time. It uses `d3.select` to manage the SVG, `d3.range` to generate an array of objects, and `d3.scaleOrdinal` to map domain values like "baseball" and "cube" to fill colors. After two timed `setTimeout` calls, one circle exits with a thick black stroke while another updates its fill from white to dark green.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

86% match

Loading thumbnail…

Ep5 D3Selections JS Arrays

Circles move vertically in a wave-like pattern, with their size and vertical position oscillating sinusoidally, creating a flowing, animated composition. The number of circles varies over time, dynamically increasing and decreasing, which demonstrates D3's enter, update, and exit behavior for managing the SVG circle elements. The code uses D3's `select`, `range`, and the `join` API to handle the data binding and transitions, with a React import pattern visible through modules like `vizData` and `makeData`. The animation runs via a `setInterval` loop, rendering as an SVG with a 60 FPS refresh rate.

JJun Alvarado

82% match

Loading thumbnail…

Rendering dynamic data

Five circles, colored by a D3 ordinal scale, animate across an SVG canvas as JavaScript modifies an array of fruit objects. The example uses the D3 version 5 API to demonstrate data joins with `enter`, `merge`, and `exit` selections, plus `transition().duration()` to animate radius and position changes over time.

Ppplomith

82% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page with SVG rendering, featuring three concentric circles drawn at two horizontal positions and a closed blue curve through a diamond-shaped path. It shows how D3.js version 6 can select DOM elements, bind data arrays, and append shapes with dynamic attributes. The circles use transparent fills with black strokes, while the line graph employs d3.line() with curveBasis interpolation. The code mixes vanilla JavaScript with D3 selections, logging "Hello JavaScript!" to the console after rendering.

JJulianWgs

82% match

Loading thumbnail…

D3 Selection exploration

This example demonstrates D3 selection and data-join patterns by animating a series of circles and connecting lines across a full-screen SVG. As time progresses, the circles oscillate vertically along sine waves while lines link consecutive points. The code uses `d3.select`, `d3.range`, and the `selection.join` method to bind and update elements each frame. Rendering is driven by a `setInterval` loop that regenerates the data and re-applies the `makeCircle` and `makeLine` functions, highlighting how D3 manages enter, update, and exit states.

Rrwata97

82% match

Loading thumbnail…

React Starter

This example demonstrates how D3’s data-join pattern can be used within a React application to render circles that change color based on value. It shows a minimal setup where two arrays of numbers are passed to an `updateVis` function, which appends circles to an SVG using `d3.select`, `selectAll`, and `enter`. Each circle’s radius and vertical position are fixed, while horizontal placement is calculated from its index. Circles with values greater than 30 are filled blue, otherwise red, using D3’s `attr` method. The code relies on React 16.10, D3’s `select` and `range`, and a bundled JavaScript file.

JJanet Chen

82% match

Loading thumbnail…

D3 Selection Exercise

This animated visualization demonstrates D3’s data-join and selection pattern by continuously updating a set of circles and connecting lines in an SVG scene. The code uses `selectAll` and `.join()` within `drawCircles` and `drawLines` to bind and update elements based on procedurally generated data from `makeCircleData` and `makeLineData`. Circle positions, radii, and colors oscillate with a time counter `t`, while lines link adjacent circles and inherit their stroke colors. Running at 60fps via `setInterval`, the example highlights how D3 v7’s `range`, `select`, and join methods handle dynamic, frame-by-frame updates in a React context.

Mmax-31

81% match

Loading thumbnail…

Circles with D3 and React

This example shows a collection of pastel-colored circles positioned across a white SVG canvas. It demonstrates how to integrate D3's data-join pattern with a React component. The code uses a `useRef` hook to access the SVG element, then calls a D3 `viz` function in a `useEffect` to bind data from a static array via `selection.data()` and `.join('circle')`, setting each circle's `cx`, `cy`, `r`, and `fill` attributes directly. The data is hardcoded in a separate `data.js` module, and rendering is done through React's `createRoot` with plain `React.createElement`.

223100098@lums.edu.pk

81% match