xushengwang

@xushengwang·3 public vizzes

Stack Chart Template

This stacked bar chart compares sales by customer segment (consumer, corporate, home office) across product sub-categories. Rendered as an SVG with animated transitions, users can toggle between absolute sales values and percentage shares. The visualization uses D3.js version 3.5.6, leveraging d3.layout.stack for stacking, d3.scale.ordinal for the x-axis, and d3.svg.axis for rendering. Data is loaded from a local CSV file, and hover effects highlight individual bar segments.

May 20, 2020

Loading thumbnail…

Video Dependency Graph

This example displays a dependency graph of video tutorials, mapping nodes that represent individual lessons and the links between them. The visualization uses the D3.js library, version 5, to load the JSON data and render it as a static preformatted text output of the raw structure. The code in `index.js` employs D3’s `json` function to fetch `videos.json` and then uses `select` and `append` to display the data on the page. It does not currently draw a graph, only exposing the JSON content.

May 20, 2020

Loading thumbnail…

Video Dependency Graph

This example displays the dependency structure of a video course as a static graph, listing 14 tutorial nodes with titles and durations, though the link array is initially empty. The visualization loads the JSON dataset and renders it in a `<pre>` element by serializing the data with `JSON.stringify(data, null, 2)`. Using D3 v5's `json()` function and the `select()` API, the code demonstrates a minimal approach to fetching and displaying raw hierarchical data without any interactive or force-directed layout.

May 20, 2020