v-dkantale@microsoft.com

@DK-Microsoft·3 public vizzes

D3 progress

This example demonstrates how to load and visualize JSON data as a basic node-link diagram using D3.js. It reads `data.json` containing nodes and links, then renders circles for nodes and lines for connections, with link thickness scaled by a `torque` value. The visualization uses D3’s `d3.json` method to fetch data and simple SVG selections to bind data to circles and lines via `selectAll().data().enter()`. The resulting SVG shows five evenly spaced nodes connected by links of varying stroke widths.

Jul 9, 2024

Loading thumbnail…

D3 progress 1

This interactive force-directed graph visualizes relationships between claim records and associated attributes like phone numbers, addresses, and email addresses. Using custom D3 API calls `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter`, the simulation positions nodes while links connect each claim to its shared attributes. The SVG renders circles, text labels, and connecting lines, with node size and color distinguishing main claim nodes from attribute nodes. Data originates from a sample CSV file describing the source-target relationships.

Jul 9, 2024

Loading thumbnail…

SVG Practice

This example demonstrates a minimal HTML page that uses CSS for styling and JavaScript for behavior, rendering the text “Hello HTML!” centered in a large font. The page is a bare-bones starter template, showing how to structure a basic web document without any external libraries or frameworks. It uses a `<style>` block to define a `.message` class with a font size of 13em and center alignment, and the content is placed directly in the body. This serves as a foundational example for HTML and CSS practice, with no data sources or complex rendering involved.

Jul 9, 2024