beyzadoganay

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js. It displays a grid of horizontal and vertical rectangles that are partially visible through a circular mask, creating an intersecting line pattern. The visualization uses D3’s `select`, `append`, and `join` methods to dynamically generate SVG `rect` elements and mask definitions. The code defines two SVG masks—one circular and one inverted—to selectively reveal the shapes, with the page sized to the full browser window. The rendering is entirely SVG-based, with no external data source.

Aug 31, 2023

Fork of Knowledge Graph

This D3.js v5 SVG visualization maps a knowledge graph of robot components, with 13 labeled nodes (e.g., AGGR, CALC, SNAP) colored by team via `d3.scaleOrdinal` and connected by directed, arrow-headed links showing relationships like "Next -->>" and "Go to ->>". Node positions are fixed in the dataset, not force-directed. A subgraph panel and title annotate the layout, while `d3.select` appends the SVG and a marker definition creates the arrowheads.

Aug 30, 2023

mockup3

A force-directed graph depicts the organizational network of the Kenneth Rainin Foundation, with large colored nodes representing main departments like Coordinacion and Comercial, smaller child nodes for teams, and tiny leaf nodes. The visualization uses D3.js v6 with `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions. SVG circles and lines render the network, with drag interaction enabling manual repositioning. Node and link colors are defined in a separate palette, and node labels display department names.

Mockup2

This example builds a simple force-directed node-link diagram from a JSON dataset. The code uses D3's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to simulate the layout, positioning nodes in a circular arrangement with drag interaction via `d3.drag`. An SVG `line` per link includes an arrowhead marker, and each node is a circle with a text label. Hovering a node changes its stroke color to green via the `focusNode` and `blurNode` handlers. All nodes share the same group value in the source data, and the visual output is rendered using the SVG `viewBox` scaling.

mockup

A hand-drawn-style icon of a face with three dots for eyes sits centered on an off-white background. The mockup is built as a static SVG scene using only React’s JSX markup, with no D3 or other visualization libraries present. The markup defines two overlapping rectangles—a light gray base and a white overlay—plus four circles, three purple dots and one larger lilac shape, all with fixed coordinates. The code demonstrates a bare SVG layout without animation or data binding.

SVG Fundamentals

This example demonstrates SVG fundamentals by rendering a set of geometric shapes including ellipses, rectangles, and paths, which together form a stylized face with a speech bubble and accompanying text. The visualization uses raw SVG elements with inline styling, such as fill colors with opacity values, to create layered visual effects. The code includes hand-crafted path data for drawing text characters and complex shapes, showcasing how SVG paths can be used to construct detailed graphics without external libraries. The white background and fixed viewBox define the coordinate system for all elements.

JavaScript Exp

This example presents a minimal web page that checks the integration of JavaScript and CSS within an HTML document. It displays a large, centered "Hello HTML!" message, demonstrating basic styling applied via a CSS class. The code uses vanilla JavaScript to log the Document Object Model (DOM) to the browser console, illustrating how to access and inspect the page structure programmatically. This serves as a bare-bones starting point for web development, with a linked reference to a separate React-based starter project.

JS Examples

This is a bare-bones web page that serves as a minimal example of how to use HTML, CSS, and JavaScript together. It contains a single `<script>` tag in the body that calls `console.log(document)` to print the Document object to the browser's console, demonstrating basic DOM access. The page uses no external libraries or frameworks, relying solely on the built-in JavaScript API to inspect the current page structure.

Fork of Social_Network_graph_ICE-8

This visualization shows a small social network with nine named individuals organized into five groups, connected by eight weighted links. The graph uses a force-directed layout, where node positions are computed by `d3.layout.force` with gravity, charge, and distance settings, rendering nodes as blue circles and black links with stroke widths scaled to link weight. Draggable node groups display names in red text, and the simulation runs until tick events update link coordinates and node transforms. Data comes from a local `graph.json` file.

Fork of D3 Starter

This example shows a minimal D3 starter template that renders the text “Hello D3 version 7” centered on the page using an oversized 13em font. It demonstrates the basic setup for a D3 v7 project, including loading the library from a CDN and importing the `select` function in an ES module. The code uses `d3.select('body').text()` to set the text content directly on the body element, with a separate `bundle.js` file linking the module to the HTML.