K

Khanin Sisaengsuwanchai

@Khaninsi·40 public vizzes

Loading thumbnail…

Force-Directed Hierarchy Graph with Node2Vec

This example visualizes a large email communication network as a force-directed hierarchy graph, using a Node2Vec-inspired random-walk embedding to compute node similarities. The view displays color-coded clusters of nodes, with edges connecting related individuals, allowing exploration of community structures within the Enron dataset. Built with D3 v7, it employs `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while zoom and drag interactions are enabled via `d3.zoom` and `drag`. The graph is rendered as SVG, with node colors derived from either precomputed community assignments or k-means clustering on the embeddings.

Loading thumbnail…

D3 Force-Directed Graph

This example demonstrates a force-directed network layout, visualizing a small set of nodes and their connections with interactive dragging. The graph dynamically arranges connected circles using a physics simulation, cleanly separating linked nodes while repelling them from one another. The visualization is built with D3 v7, using `d3.forceSimulation` together with its `forceLink`, `forceManyBody`, and `forceCenter` components. The SVG output renders nodes as circles with labels and edges as straight lines, with positions updated on each simulation tick. The code also includes a guard that filters out any edges referencing non-existent nodes, ensuring the structure remains valid.

Loading thumbnail…

Graph Visualization

This graph visualization example accepts a URL pointing to a JSON file containing node and edge data, with an optional second URL for class or group information. It uses the D3.js library, specifically the `d3-force` package, to run a force-directed layout simulation that positions the interconnected nodes. The rendering uses the force simulation to calculate physical-like repulsion and attraction forces between nodes and links, creating a clustered network diagram based on the structure of the input data.

Loading thumbnail…

Force-Directed Graph hierarchy with drill up & drill down

This example demonstrates a force-directed graph hierarchy on top of an email communication network, enabling users to drill up and down between aggregate community clusters and individual nodes. It first applies random-walk-based node embedding and k-means clustering to group nodes by community, then visualizes both the top-level community relationships and the detailed subgraphs within each cluster. The interactive drill-up and drill-down navigation is implemented using D3’s forceSimulation for layout, zoom behavior for pan and zoom, and SVG rendering. Color-coded nodes and edges distinguish clusters, with data parsed from a SNAP-format edge list and department labels.

Loading thumbnail…

Fork of Force-Directed Graph hierarchy with drill up & drill down

This force-directed graph visualization displays the hierarchical structure of the email-Eu-core network, grouping nodes into color-coded communities. Users can drill down into individual clusters to see their subgraphs and drill back up to the full view. The implementation uses D3’s `forceSimulation` for layout, along with `fetch` to load SNAP-format data from GitHub, and custom JavaScript functions for random walk-based node embedding and k-means clustering. Rendered as scalable vector graphics, it supports zoom and drag interactions.

Loading thumbnail…

Force-Directed Graph hierarchy with drill up & drill down

This visualization shows a hierarchical force-directed graph with interactive drill-up and drill-down capabilities, displaying both a high-level community structure and detailed node-level views. The graph renders in SVG and uses D3.js's force simulation APIs, including `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, along with a zoom behavior. Users can navigate between hierarchy levels by clicking on community nodes to expand them into their constituent node networks, or drill back up to the parent level. The data comes from the Les Misérables character network and an email communication dataset (email-Eu-core), parsed from edge-list text files.

Loading thumbnail…

Node2Vec Force-Directed Graph

This example visualizes the character co-occurrence network from Les Misérables as an interactive force-directed graph. Nodes represent characters, colored randomly by group affiliation, with labels and links showing relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute layout, while d3.drag and d3.zoom enable user interaction. Data loads from a remote JSON file containing the miserables dataset.

Loading thumbnail…

Javascript 101

This example presents a static SVG bar chart titled "Javascript 101," rendered with a single white bar outlined in black. It primarily serves as a canvas for commented JavaScript code snippets that demonstrate core programming concepts, including function definitions, object creation, array manipulation with `map` and `splice`, and a simple data storage system using `updateLevelData` and `getLevelData`. The visualization shows how text and basic shapes can be combined with code annotations, using a fixed 960x500 SVG canvas and styled text at 72px.

Loading thumbnail…

Force-Directed Graph hierarchy

A hierarchical force-directed graph displays clustered communities as large nodes, with links connecting them at the top level. Clicking a community navigates to a subgraph of its member nodes, rendered via `d3.forceSimulation`, `forceLink`, and `forceManyBody`. The SVG visualization uses `scaleOrdinal` for node positioning and zoom/pan via `d3.zoom`. Data is parsed from a fetched text file using `parseGraphDataset`, with node and link stroke properties scaled by link weight.

Loading thumbnail…

Fork of Force-Directed Graph

This is an interactive force-directed graph that visualizes the network of characters from *Les Misérables*, based on the classic `miserables.json` dataset. Nodes are colored by their assigned group and can be dragged around the canvas, triggering the physics simulation to recalculate positions. Implemented with D3.js functions `forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, and `drag`, the graph also supports zooming and panning via a `d3Zoom` handler, while node labels appear on hover. The SVG rendering displays nodes and links in full-screen, with node positions updated on each simulation tick.

Loading thumbnail…

Fork of Force-Directed Graph click

A force-directed network graph visualizes character co-appearance data from *Les Misérables*, parsed from a plain-text edge list. Clicking a node reveals its label and updates the visualization, while clicking it again resets the view. The SVG rendering uses `d3.forceSimulation` with link, charge, and center forces, plus `scaleLinear` to map link weights to stroke width and opacity. Custom click, mouseover, and mouseout handlers control label visibility, and a `d3.zoom` behavior supports panning and scaling.

Loading thumbnail…

Force-Directed Graph click

This interactive visualization shows the character network from Les Misérables as a force-directed graph. Users can pan and zoom the SVG canvas, while hovering over nodes reveals character names and dragging nodes rearranges the layout dynamically. The graph uses d3.forceSimulation with forceLink and forceManyBody to position nodes, with link thickness and opacity scaled by connection weight via d3.scaleLinear. Node colors are randomly assigned per group, and the data comes from a text file parsed by a custom graphUtils function that extracts nodes, links, and weights from whitespace-separated values.

Loading thumbnail…

Force-Directed Graph new format

This interactive network visualization displays the connections between characters in the Les Misérables dataset using a force-directed layout. Nodes represent individual characters, colored by their assigned group, while links show relationships with stroke width and opacity scaled by connection weight. The graph is rendered as an SVG that supports zooming, with node labels appearing on hover. The implementation uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCenter for physics-based positioning, and d3.zoom for interactive exploration. Data is fetched from a remote source and parsed into a graph structure with a custom function.

Loading thumbnail…

Fork of D3 Zoom

This example demonstrates interactive zooming and panning on an SVG canvas. A group of circles connected by lines, generated from trigonometric functions in `utils.js`, responds to mouse wheel and drag gestures through the `d3.zoom` API. The zoom behavior applies a scale transform to the container group, respecting a scale extent between 0.5x and 4x. The SVG output is created with the `select` and `append` methods from the `d3` v7 library.

Loading thumbnail…

D3 Zoom

This example demonstrates interactive zooming and panning on a scatterplot of 100 randomly positioned points. Users can scroll to zoom in and out within a scale extent of 0.5x to 4x, or click and drag to pan across the full-window SVG canvas. The visualization uses d3.zoom to attach zoom behavior to the root SVG element and applies the transform directly to that element’s `transform` attribute during the zoom event. Data is generated randomly with the `makeData` utility, and circles are bound and updated using D3’s data join pattern.

Loading thumbnail…

Force-Directed Graph

This interactive force-directed graph visualizes character co-appearance relationships from the *Les Misérables* dataset. Nodes represent characters and are colored by their assigned group, while black links connect characters that appear together. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute physics-based layouts. Nodes and labels are rendered as SVG circles with drag functionality, and a zoom transform is applied via the d3 zoom controller.

Loading thumbnail…

Force-Directed Graph complete

This example shows a force-directed graph of animal taxonomy, with nodes representing categories like mammals, insects, and fish, and links connecting parent groups to their subcategories. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes, while node color distinguishes hierarchy levels (red for top-level, gray for subcategories). The data is defined as static arrays of nodes and links, with link strengths influencing the layout. Node labels are rendered as text elements, and dragging is supported via d3’s `drag` module.

Loading thumbnail…

Force-Directed Graph v2

A force-directed graph visualizes relationships among eleven animal species, grouped into mammals, insects, and fish. Nodes represent animals, colored red for primary groups and gray for subcategories, while links show connections with varying strengths. Built with D3.js, the visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes dynamically. The code renders elements as SVG circles, text labels, and lines, updating their positions on each simulation tick for an interactive, physics-based layout.

Loading thumbnail…

Fork of Network Graph

Four labeled nodes form a small network of three connected links, rendered in SVG and fully interactive through mouse dragging. The graph uses `d3.forceSimulation` with link, charge, and center forces to position nodes, while a `d3.drag` handler lets users move nodes and update their fixed positions. Elements are drawn with D3 selections, appending `line` and `g` elements whose coordinates are updated on each simulation tick. The code relies on D3 v7's `forceLink` and `forceManyBody` APIs, with text labels placed relative to each node.

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically switch the X and Y axes via dropdown menus. Built with D3.js, it uses a reusable chart module and a custom menu component. The plot animates data point transitions and axis rescaling over one second, with a staggered delay. Data is loaded from a remote CSV, and the chart renders as an SVG, filling the browser window.

Loading thumbnail…

Scatter Plot using species

This interactive scatter plot explores the Iris dataset, using dropdown menus to dynamically select which flower measurements (sepal length, petal width, etc.) appear on the x- and y-axes, with the option to treat variables as either numeric or categorical. Built with D3.js 6.7.0, it leverages the library’s scaleLinear and scalePoint functions to map data positions, while the selection.join API manages animated transitions for points and axes. The visualization renders as SVG, with each circle’s opacity set low to reveal overlapping species clusters, and includes a menu component that dispatches change events to update the plot in real time.

Loading thumbnail…

Reusable D3 Scatter Plot with symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, mapping sepal length and width while using different D3 symbols (circles, crosses, diamonds, and squares) to distinguish flower species. The visualization renders as an SVG and leverages d3.scaleLinear for axes, d3.scaleOrdinal for symbol types and colors, and d3.symbol to generate the mark paths. The chart is built with a custom scatterPlot function that accepts configurable accessors and margin settings, making it adaptable for other datasets and variables.

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis using circular marks. The code loads CSV data via `d3.csv`, scales it with `scaleLinear` and `extent`, and renders the points as SVG circles. Axes are generated with `axisLeft` and `axisBottom`, with the visualization sized to the full browser window. The example uses D3 v7 within a minimal HTML page, styling tick text via CSS.

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot displays the relationship between particulate matter (PM2.5) levels in 2010 and 2018 across U.S. counties, with each circle representing a county. Built with a reusable D3.js component within a React application, it renders as an SVG using the `scaleLinear` API for axis scaling and `axisLeft`/`axisBottom` for chart annotations. The visualization leverages D3's `select` and `join` methods for efficient DOM manipulation, making it adaptable to different datasets through configurable accessor functions. Data is sourced from a CSV file containing historical PM2.5 measurements.

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the relationship between U.S. county-level PM2.5 air pollution measurements from 2010 and 2018, using data from a raw GitHub-hosted CSV file. Each point represents a county, with positions mapped through D3’s `scaleLinear` and `extent` functions. The visualization uses D3 v7 to load the data via `csv`, filter rows with null values, and render circles in an SVG. Axes are generated using `axisLeft` and `axisBottom`, all embedded within a React-hosted HTML page that fills the viewport.

Loading thumbnail…

D3 Selection Exploration

This animation demonstrates D3’s data-join pattern by continuously updating a series of colored circles and connecting lines. Each frame, `setInterval` regenerates data with changing positions, radii, and counts, while `selection.data().join()` efficiently creates or updates circles and lines. The SVG uses `selectAll` and `enter/update/exit` behavior, with colors assigned cyclically via a helper function. The example highlights D3’s declarative binding of data to visual elements, using the `vizData` function to apply dynamic geometry and stroke styles.

Loading thumbnail…

JS in HTML

This example shows a minimal web page that combines HTML, CSS, and JavaScript to display a text message. The page uses embedded CSS to style a message with a large font size and centers it. JavaScript executes from an external file, importing a variable from another script and logging a greeting to the console. The code demonstrates basic interaction between HTML structure, CSS styling, and JavaScript file dependencies, while the package file declares D3 as a dependency.

Loading thumbnail…

Network Graph

This example shows a simple network graph with five labeled nodes (A–E) and four links connecting them. D3’s `forceSimulation` with `forceLink` and `forceManyBody` positions the nodes, while the tick event updates line and circle positions. The SVG rendering uses D3 selections with `join` to bind data to `<line>` and `<g>` elements, with node labels placed via appended `<text>`. The simulation runs continuously, repositioning nodes within a 200x200 center area.

Loading thumbnail…

Javascript Arrays

This example demonstrates JavaScript array methods by logging transformations of a hardcoded dataset to the browser console. It uses `filter` to select even numbers, `sort` with a custom comparator and the imported `ascending` function from d3 to order values, and `map` to create objects containing each number and its double. A `reduce` operation converts an array of key-value objects into a single object keyed by the original keys. The example runs entirely in the console without producing any visual output on the page.

Loading thumbnail…

Fork of Refactor of Sol LeWitt Reproduction with D3 - Different shape

This example reproduces a Sol LeWitt-style geometric drawing with a novel shape, using overlapping horizontal and vertical bars of varying blue shades. The composition is created with D3’s `select`, `range`, and `join` operations to generate SVG `rect` elements, while two SVG masks (`mask-1` and `mask-2`) apply contrasting black and white paths derived from D3’s `symbols` and `symbol` APIs to reveal the final pattern. The color palette is produced with `scaleSequential` and `interpolateBlues`, and the rendering is pure SVG.

Loading thumbnail…

Refactor of Sol LeWitt Reproduction with D3 - Different shape

This visualization generates a grid of thin horizontal and vertical black lines overlaid on a canvas. The lines are selectively masked based on the position of a large circular shape, creating a pattern where the horizontal lines appear within the circle’s area and the vertical lines appear outside it. Built with D3.js, the code uses `select`, `range`, and `join` to create the line elements, while `symbols` and `symbol` define the mask’s geometric path. The SVG rendering sets the stroke color and width for the lines.

Loading thumbnail…

Sol LeWitt Reproduction with D3 - Different shape

This example recreates a Sol LeWitt-inspired drawing using D3 to generate a grid of thin horizontal and vertical bars. Two SVG masks, each containing a large star-shaped path created with the `d3.symbol` API, are applied to the grid so the bars remain visible only within the star’s silhouette. The first mask uses a black background with a white star, while the second inverts the pattern, producing contrasting filled and striped regions. The visualization is rendered entirely in SVG, with coordinates calculated from the window dimensions via D3’s `select` and `range`.

Loading thumbnail…

Sol LeWitt Reproduction with D3 - non-class

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical bars in an SVG. The bars are masked by two circular masks with inverted fills, creating a crosshatched grid that appears only within the intersecting circular regions. The visualization uses D3's `select`, `append`, `attr`, `data`, `range`, and `join` APIs to build the SVG structure and apply the mask attributes.

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This D3.js sketch recreates Sol LeWitt’s geometric wall drawing by rendering a dense grid of thin horizontal and vertical bars across the full browser window. The bars intersect within a circular region defined by two SVG masks, producing a stark black-and-white composition. Using d3.select and data joins, the code efficiently draws 100 lines in each direction, while the masks invert visibility—white reveals the horizontal set, black reveals the vertical—creating a precise, layered optical pattern.

Loading thumbnail…

D3 Starter

This example demonstrates a minimal D3.js version 7 starter project. It renders the text “Hello D3 version 7” centered in the browser window using the `select` API from D3 to target the HTML body element. The page loads D3 from an unpkg CDN link and applies CSS styling to set the font size to 13em. The visualization serves as a basic template for initializing D3 projects, relying on the `d3.select` function to manipulate the DOM directly.

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This visualization reproduces a Sol LeWitt-inspired geometric drawing using an SVG scene under a circular mask. It shows a grid of fine black lines—horizontal strokes overlapped by vertical strokes—that remain visible only inside a centered circle, while the surrounding area stays blank. The code uses raw SVG element creation via `document.createElementNS` and `mask` elements to achieve the cutout effect. The rendering consists of 100 horizontal rectangles and 100 vertical rectangles, with the circle mask controlling visibility.

Loading thumbnail…

Fork of SVG

A fork of SVG renders a full-screen canvas of one hundred vertical black bars. The visualization shows a rigid, rhythmic grid that fills the viewport, created entirely through the Document Object Model (DOM) and the SVG `rect` element. The script uses JavaScript’s `document.createElementNS` with the SVG namespace to dynamically generate each rectangle, setting its `x` position, fixed `width`, and `height` equal to the window’s height. The bars are placed sequentially every twenty pixels, resulting in a stark, minimalist composition that directly reflects the numeric loop in the code.

Loading thumbnail…

Pseudo bar chart

A pseudo bar chart represents categorical data with four wide bars labeled A through D, using varying bar widths to encode values. Built as a static SVG, the visualization uses plain `rect` elements for the bars and `text` elements for category labels, with the first bar distinguished by a white fill and thick black stroke. The rendering relies solely on inline SVG styling and HTML, with no JavaScript libraries or data-processing APIs involved.

Loading thumbnail…

Pseudo scatter plot

This example shows a simple pseudo scatter plot: twelve black circles positioned on a white background. The visualization approximates a scatter plot without using axes, scales, or data mapping. The SVG markup directly specifies each circle’s center coordinates and radius using the `circle` element with `cx`, `cy`, and `r` attributes. The fixed size, the positioning, and the uniform styling suggest a hand-authored or generated layout rather than a data-driven projection. The graphic relies entirely on static SVG rendering without JavaScript libraries or interaction.

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes on an HTML page, including circles in varied sizes and colors, a rectangle outline, and a commented-out line element. The visualization uses raw SVG markup within an HTML document, styled with CSS for typography, and is authored for the React framework. It shows how basic geometric primitives such as circle, rect, and line are defined with attributes like cx, cy, r, x, y, width, height, and stroke to compose a static vector graphic.