Skip to main content
Log in
苏

苏巨亮

@sujul·9 public vizzes

Loading thumbnail…

Fork of Chandrapur District Town and Villages

A hierarchical tree visualization displays GitHub repositories grouped under Python machine-learning topics. The D3.js v5 code uses `d3.hierarchy` and `d3.tree` to compute node positions, then renders horizontal links with `d3.linkHorizontal`. Text labels show repository IDs, with font size decreasing by depth. The SVG output supports zooming and panning via `d3.zoom`, and uses the Playfair Display font. Data comes from the static `data.json` file, which contains nested category and repository identifier pairs.

Jun 29, 2021
Loading thumbnail…

Hello HTML

This example shows a force-directed network graph of university courses, where nodes represent courses and links show associations between them with labels describing support and confidence values. The visualization uses D3 v3’s `d3.layout.force` for layout and computes node positions and link paths, which are rendered as SVG curves with arrowheads via a custom marker. Course names are displayed within the network, and link styling and text are set using SVG `path` and `textPath` elements. The data is hardcoded in a JavaScript array, and the page runs as a bare HTML document with React integration.

May 7, 2020
Loading thumbnail…

Apriori

This visualization displays sentiment scores for each day of the week as individual points in an SVG scatterplot. The code loads tab-separated data from a GitHub repository and maps days to ordinal x-axis positions while sentiment scores are scaled linearly on the y-axis. Hovering over a circle reveals a tooltip showing the associated itemset and score, highlighting the point in orange. The implementation uses d3.scale.ordinal and d3.scale.linear with d3.svg.axis for the chart’s axes and event handlers for the interactive tooltip.

May 7, 2020
Loading thumbnail…

Word Cloud Example

This example displays a word cloud of student course names and their credit sizes, loaded from a local JSON file. The visualization uses the D3 layout.cloud plugin to arrange words with randomized rotations and Impact font, mapping the numeric `size` values to font sizes through a linear scale. Words are rendered as SVG text elements within a bordered container, with each word colored using a categorical color scale. The layout algorithm runs asynchronously, and the final words are drawn via a callback function.

Apr 24, 2020
Loading thumbnail…

Smoothed D3.js Radar Chart

A smoothed D3.js radar chart displays a single data series with five axes—subject knowledge, sports, course design, personal qualities, and foundational courses—with values scaled from 0 to 5. It renders as an SVG with a circular grid of five levels, a glowing area path, and dots at each data point, using `d3.scaleOrdinal` for coloring and `d3.scaleLinear` for the radial scale. The chart applies rounded strokes for smooth path transitions and includes an animated glow filter via SVG `feGaussianBlur`.

Apr 23, 2020
Loading thumbnail…

Sunburst

A sunburst chart displays the hierarchical structure of the Flare dataset, with each ring segment representing a category and its subcategories, sized by numeric value. The visualization uses D3 v5’s `d3.partition` and `d3.arc` to compute and draw the radial layout, with SVG paths filled by a rainbow scale applied to top-level branches. Labels are rotated and placed conditionally based on arc size, and each segment includes a hover tooltip showing the full ancestor path and value.

Apr 15, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the hierarchical flare dataset, where clicking a ring zooms into that subtree and clicking the center returns to the root. The code uses D3 v5’s `d3.partition` and `d3.arc` to compute and draw the arcs, with `d3.interpolateRainbow` for color mapping and `transition.attrTween` for smooth animated zooms. Labels rotate and fade based on visibility criteria, and the data is loaded via the Observable `@observablehq/flare` package with the page rendered as SVG.

Apr 15, 2020
Loading thumbnail…

Axis

This example demonstrates how axes and gridlines respond to changing data domains in a D3.js visualization. It shows a simple SVG chart with an x-axis and y-axis spanning a 500×500 pixel area, with dashed gridlines extending from each tick mark. The visualization randomly rescales both axes by generating a new maximum value between 0 and 100, smoothly animating the axis transitions using `d3.transition()` and updating gridlines dynamically. Built with React, the code uses `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to render and update the axes, while the gridlines are appended as `line` elements within each tick group.

Apr 15, 2020
Loading thumbnail…

Hello HTML

A minimal SVG canvas is displayed on a blank HTML page, showcasing the foundational setup for a D3.js visualization. The code initializes an SVG element with a width of 960 and height of 500, and uses `d3.select` from the D3 v5 library to reference it. The page imports the D3 library from an external source and includes a separate CSS file for basic styling. This example demonstrates the simplest possible starting point for building a D3 visualization in a React framework.

Apr 3, 2020