turker.turk@aselsis.com.tr (@TurkerTRK), VizHub

Fork of Let's make a face with D3.js!

This example shows a smiley face drawn with basic SVG shapes whose eyebrows animate up and down. The face is built using D3 v7 selections to append a circle, eyes, rectangular eyebrows, and a mouth arc to an SVG element. The animation runs via chained `transition().duration()` calls on the eyebrow container's `transform` attribute, moving it between two vertical positions. The mouth is generated with a D3 `arc` generator, and all elements are centered within a 960×500 SVG canvas.

Jun 26, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal SVG canvas that initially appears blank but responds to user interaction by adjusting a large, centered "Hello!" message through hot reloading. The code sets up an SVG element sized 960 by 500 pixels and uses d3.v7 from a CDN, though the main rendering relies on plain container.innerHTML with inline CSS styles. The JavaScript exports a main function that receives the container and writes the text with a configurable font-size property, while a separate stylesheet applies default margins, hidden overflow, and styled path strokes. The visualization highlights fundamental SVG and CSS usage without complex data binding.

Jun 26, 2024

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and style a set of circles using D3.js. It shows a colorful, abstract composition of seven circles with varying positions, radii, and fill colors, rendered on a light green background. The code uses D3's selection and method chaining API to bind data to SVG circle elements, setting attributes like `cx`, `cy`, `r`, and `fill` via the `.attr` method. The data is defined explicitly in a JavaScript array within the `main` function, which is then joined to the SVG using the `select`, `selectAll`, and `join` pattern.

Jun 26, 2024

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and style a set of circles using D3.js. It shows a colorful, abstract composition of seven circles with varying positions, radii, and fill colors, rendered on a light green background. The code uses D3's selection and method chaining API to bind data to SVG circle elements, setting attributes like `cx`, `cy`, `r`, and `fill` via the `.attr` method. The data is defined explicitly in a JavaScript array within the `main` function, which is then joined to the SVG using the `select`, `selectAll`, and `join` pattern.

Jun 26, 2024

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and style a set of circles using D3.js. It shows a colorful, abstract composition of seven circles with varying positions, radii, and fill colors, rendered on a light green background. The code uses D3's selection and method chaining API to bind data to SVG circle elements, setting attributes like `cx`, `cy`, `r`, and `fill` via the `.attr` method. The data is defined explicitly in a JavaScript array within the `main` function, which is then joined to the SVG using the `select`, `selectAll`, and `join` pattern.

Jun 26, 2024