Skip to main content
Log in
T

trucntx007

@trucntx007·15 public vizzes

Loading thumbnail…

ICE 8: Social Network Graph

This social network graph visualizes interconnected room nodes, with main nodes colored orange or blue based on their checked status, while child and leaf nodes remain transparent. The example uses a simple tree structure where user `trucntx007` defines connectors between rooms, using the `d3.forceSimulation` API with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to simulate physical forces for layout. Rendering in SVG, the graph applies drag interactions and zoom functionality, and clicking a node triggers an alert with a VK profile URL.

Apr 1, 2022
Loading thumbnail…

Fork of ICE-8 (Social Network Graph)

This social network graph visualizes connections among nine individuals, with nodes sized and colored by their degree centrality—larger, darker blue circles indicate more connections. The network uses curved links to show relationships, and users can drag any node to reposition it while the force-directed layout recalculates. Built with D3 v5, the example uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute node positions, while SVG paths and circles render the graph. Node fill colors derive from `d3.interpolateBlues`, and drag behavior is implemented via `d3.drag`.

Apr 1, 2022
Loading thumbnail…

ICE 8: Tree

This visualization displays a simple hierarchical tree with a root node labeled "Truc" and two levels of children, with node names reflecting their depth. Using D3.js 3.5.17, the code constructs the tree layout with the `d3.layout.tree` API and renders nodes as SVG circles with text labels, connected by curved diagonal paths via `d3.svg.diagonal`. Animated transitions, controlled by a `duration` of 750 milliseconds, reposition nodes and redraw links when the tree updates, with each node storing its previous coordinates for smooth movement. The SVG output is styled with CSS for node fill, stroke, and link appearance.

Apr 1, 2022
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This fork of the D3.js collapsible tree visualizes hierarchical data as a set of connected boxes, with each node displaying its name, type, version, and link details. The tree supports interactive collapse and expansion of nodes, with smooth animated transitions between states. The visualization is built using D3 v3’s `d3.layout.tree` for layout calculations, along with SVG rendering for the node rectangles, links, and arrow markers. It also incorporates jQuery and a custom zoom behavior via `d3.behavior.zoom`, plus CSS classes for styling the selected links and tooltips. Data is loaded from the embedded `data-example.json` file.

Apr 1, 2022
Loading thumbnail…

ICE 8: VN Map

This example renders a choropleth map of Vietnam’s states, coloring each polygon according to its area value using a purple ordinal color scale. Built with React and D3 v6, it loads TopoJSON data from a GitHub repository, converts it to GeoJSON via `topojson.feature`, and projects it with `d3.geoMercator` and `d3.geoPath`. The SVG output is generated inside a React component using refs, with `d3.json` fetching the data asynchronously and `scaleOrdinal` mapping values to colors.

Apr 1, 2022
Loading thumbnail…

ICE 8: World Map

This example displays a world map using the spherical Mercator projection, rendered as SVG paths through d3.geoPath. The visualization distinguishes landmasses in dark red, country borders in teal, graticules in light gray, and the ocean sphere in off-white. It loads geographic data from the world-atlas TopoJSON file, converting it with topojson.feature and topojson.mesh. The React component uses the d3.geoMercator and d3.geoGraticule APIs within a marks subcomponent to draw each geographic layer.

Mar 31, 2022
Loading thumbnail…

ICE-7: Area chart

This area chart visualizes the NASDAQ Composite index over time, with a filled teal region under a smoothed curve. The chart uses D3 v5's `area` generator with `curveBasis` for smoothing, along with `scaleTime` and `scaleLinear` for the axes. Data is loaded from a remote CSV file, and tick labels are formatted using the `.1s` format specifier. The SVG rendering includes axis labels and a title, with grid lines styled via CSS.

Mar 24, 2022
Loading thumbnail…

ICE 7: Line Chart

This line chart tracks Upstart’s daily stock price over time, with each line representing a different district and a color legend identifying them. The visualization uses D3 v5 to load CSV data, parse dates with dayjs, and render SVG paths via d3.line with a basis curve. Axes are built with d3.axisLeft and d3.axisBottom, while d3.nest groups data by district and d3.scaleOrdinal assigns categorical colors from schemeCategory10.

Mar 24, 2022
Loading thumbnail…

ICE7 - Pie Chart

This pie chart visualizes the population of ten major world cities in 2022, using data from a JSON file and rendered as an SVG. The D3 v5 code uses `d3.pie` and `d3.arc` to generate the chart, with a custom color scale and a legend that lists each city, its label, and its population value formatted with SI prefixes. The chart is positioned with a transform, and the legend is built using D3’s selection and append methods.

Mar 24, 2022
Loading thumbnail…

ICE-7: Scatter Plot

A scatter plot visualizes the Iris dataset by mapping petal width to the x-axis and sepal length to the y-axis, with each circle colored by species (blue, orange, or green). The SVG rendering uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with circles positioned by projecting data values through the scales. Axis labels are added as SVG text elements. The plot fills the browser window, with data parsed from a GitHub-hosted CSV file.

Mar 24, 2022
Loading thumbnail…

ICE-6: IRIS

This scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Using D3 v6, the code loads CSV data, applies linear scales via `scaleLinear`, and renders circles in an SVG. Axes are generated with `axisLeft` and `axisBottom`, while data parsing converts string values to numbers. The chart fills the browser window, with axis labels added as SVG text elements for clarity.

Mar 24, 2022
Loading thumbnail…

Stock Price

This interactive visualization shows stock prices for various companies over time, using horizontal bar charts grouped by company symbol. Each panel displays the price distribution for a specific stock, with bars representing individual price points and a prominent zero line for reference. The chart is built with React and D3 v6, using D3's `scaleBand` for the categorical date axis and `scaleLinear` for the price axis. Data is loaded from a remote CSV file, and bar heights and positions are computed dynamically using these scales.

Mar 4, 2022
Loading thumbnail…

Parsing csv with D3.js

This example displays a summary of a parsed CSV file, showing the file size in kilobytes, the number of rows, and the number of columns in a large, web-styled text block. It fetches the remote CSV data using the `fetch` API and then parses it with `d3.csvParse` from D3.js v7. The result is rendered onto an HTML page within a React-free setup, with the summary text assigned to a `pre` element via the DOM. The data source is a GitHub-hosted file named `STocks.csv`.

Feb 23, 2022
Loading thumbnail…

Yellow Face

This example draws a simple yellow face in an SVG canvas, centered within a 960 by 500 viewport. The face features two crossed-line eyebrows above each eye and a curved mouth created using the `d3.arc` path generator. The entire composition is built with D3 v5 selection and shape APIs, using basic SVG elements like `circle`, `line`, and `path`, all rendered through React’s `bundle.js` output.

Feb 16, 2022
Loading thumbnail…

smiley face

A smiley face is drawn as an SVG graphic centered on a 960x500 canvas. The face features a circular head, two eyes with green pupils, a purple nose, and a curved mouth, all rendered with black strokes and thick line segments for eyebrows and hair. The visualization uses React for rendering and d3.arc to create the mouth path. All shapes are positioned with absolute coordinates, and the code relies on d3.v7 and React 17 to produce the static vector illustration.

Feb 16, 2022