Skip to main content
Log in
B

Bhavyatulasi

@Bhavyatulasi·28 public vizzes

Loading thumbnail…

SANKEY Experiment

This sankey diagram visualizes the flow of notifications from a total source through matched and scrap categories, with values displayed for each link transition. Built with React and rendered as SVG using D3.js v3, the visualization loads data from a JSON file containing node and link definitions. The diagram employs the custom `d3.sankey` layout API, which handles node positioning and link thickness calculation through iterative layout algorithms, while CSS styling controls the visual appearance of nodes and links.

Dec 4, 2020
Loading thumbnail…

Donut chart

This donut chart visualizes a percentage value (47%) using a segmented arc, with blue segments representing the data portion and grey segments as the background track. The chart is rendered as SVG, with each of the 20 segments drawn as a path using the d3.arc function. The code calculates segment counts and a partial final segment based on the value, and applies stroke spacing between arcs to create the separated ring effect. The visualization uses React with D3 v5 for rendering.

Nov 11, 2020
Loading thumbnail…

Lets make a face!

This visualization uses D3.js to draw a cheerful, cartoon-like face on an SVG canvas. The face is constructed from basic geometric shapes, including yellow circles for the head and eyes, and rectangular eyebrows that animate by shifting their vertical position through a staggered transition sequence. The mouth is rendered as an arc using D3's `arc` function with specified inner and outer radii and angle parameters. The code organizes elements in a central group and uses SVG attributes to position facial features precisely.

Jul 28, 2020
Loading thumbnail…

Lets make a face!

This example builds a smiling cartoon face on a yellow circle, animating its expressive eyebrows. Using React and SVG, the face is constructed with D3 selection methods to append a face circle, eyes, eyebrows, and an arc-based mouth. The code applies a chained `transition().duration(2000)` to the eyebrows group, moving it up and then back down to create a winking-like motion. All facial features are centered within an SVG canvas using a translated group, with D3’s `arc()` function generating the mouth’s curved path.

Jul 28, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. It shows how SVG elements inherit presentation attributes like fill and stroke from parent `<g>` groups, and how CSS classes can override those defaults, as seen with the `.lines` class applying green strokes to the path. The code uses raw SVG markup within React, with explicit positioning and transform attributes to arrange the shapes.

Jul 28, 2020
Loading thumbnail…

Donut chart

A donut chart displays a single numeric value of 47 as a proportion of 100, rendered with 20 equal arc segments around a central hole. Blue segments represent the value, while grey segments show the remainder, with a partial blue arc for the fractional part. Built with React and D3 v5, the code uses the `d3.arc` API to generate SVG paths, setting inner and outer radii from the SVG height, and computes angles via `Math.PI` divisions. The SVG element is selected with `d3.select`, and strokes create separation between segments.

Jul 23, 2020
Loading thumbnail…

Donut chart

A donut chart displays the value 27 as a proportion of 20 total segments, with blue arcs marking each increment of five and a partial blue arc representing the remainder. The visualization renders in SVG using React and D3 v5, calling the `arc` generator to draw each path. The chart is built by looping through 20 equal segments, filling grey arcs for the unselected portion and blue arcs for the selected value, with white strokes separating each slice.

Jul 23, 2020
Loading thumbnail…

Let's make a face with d3.js!

This example uses D3.js to draw an animated face from basic SVG shapes. A yellow circle forms the head, with black circles for eyes and rectangular eyebrows that transition vertically over time. The mouth is built from arc paths generated with D3’s `arc` function. All elements are grouped and translated to the center of the 960x500 SVG canvas, and the code runs within a React starter template.

Jul 22, 2020
Loading thumbnail…

Let's make a face with d3.js!

A yellow smiley face is drawn in SVG and centered on a 960 by 500 canvas. The code uses d3-selection to append shapes and d3-shape’s `arc` generator to create a smile composed of a loop of arc paths. The face includes a static circle, while commented-out sections would add eyes, eyebrows, and animated transitions, though only the smile and head are rendered.

Jul 22, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates multiple ways to style SVG shapes using both inline attributes and CSS classes. It shows circles and rectangles arranged in a grid, with some shapes using default black fills and others explicitly colored red and green via fill attributes. The visualization also includes a grouped set of shapes with a light blue fill and black stroke, plus a polygon path with rounded line joins defined in the stylesheet. The code leverages React, SVG elements like circle, rect, line, and path, along with CSS transform properties to scale and translate the entire composition.

Jul 22, 2020
Loading thumbnail…

My first chart using FusionCharts Suite XT

A horizontal linear gauge displays server CPU utilization for food.hsm.com at 80 percent, with a color-coded range from low (0–35) to moderate (35–70) and high (70–100). Dashed trend lines mark thresholds at 70 and 85 percent, while a semi-transparent trend zone highlights the region between them. The chart is rendered using FusionCharts Suite XT, configured via the `FusionCharts` constructor with a JSON data source and the “fusion” theme. A blue annotation rectangle with white text appears at the bottom, indicating completed QNLIs.

Jul 17, 2020
Loading thumbnail…

Untitled

A horizontal linear gauge displays server CPU utilization, with a color-coded range from low to high and a pointer indicating the current value at 75%. The visualization uses the AnyChart library via its core, base, and linear-gauge modules to render the gauge, while FusionCharts handles the chart configuration and rendering. The data source is embedded inline as JSON, defining the gauge’s limits, color ranges, pointer, trend points, and annotations, which include a recommended utilization range highlighted as a shaded zone.

Jul 16, 2020
Loading thumbnail…

Untitled

This interactive zoomable sunburst diagram visualizes the hierarchical structure of the Flare software package, using nested arcs sized by file metrics. Built with D3 v3 and SVG, it employs `d3.layout.partition` to compute the layout and `d3.svg.arc` for rendering. Clicking a node triggers `transition.attrTween` to smoothly zoom into that subtree, recalculating scales and updating text labels. The color scale `d3.scale.category20c` distinguishes parent categories, while labels rotate based on their angular position.

Apr 20, 2020
Loading thumbnail…

Untitled

An interactive zoomable sunburst chart displays the hierarchical structure of the Bible, with arcs representing books grouped by testament and genre. Clicking a slice zooms into that segment, and radio buttons switch between linear and grouped sizing modes. The visualization uses D3 v5 with the `d3.partition` layout, `d3.stratify` for hierarchy construction, and `d3.arc` for path generation, animating transitions via `transition.attrTween` on SVG paths and text elements. Data comes from JSON files defining the book structure and verse counts.

Apr 20, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

Apr 17, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

This example demonstrates a zoomable sunburst visualization of the Flare dataset using D3 v5. It uses `d3.hierarchy` and `d3.partition` to compute the layout, with `d3.arc` for path generation. Interactive zoom transitions are implemented through click handlers and `transition.attrTween` to animate arcs and labels. The visualization renders as SVG with color scales from `d3.scaleOrdinal` and `d3.interpolateRainbow`. The data is loaded asynchronously via an Observable notebook library, with the dataset containing hierarchical filesystem-like size values.

Apr 8, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, allowing users to click on any segment to zoom in and explore nested categories. Built with D3 v5, the visualization uses an arc partition layout with a radial layout, where the inner ring represents the root and outer rings show deeper levels. The code leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, and employs `d3.interpolateRainbow` for color coding. Animations are handled via `d3.transition` and `transition.attrTween`, smoothly interpolating arc positions and labels during zoom transitions.

Apr 7, 2020
Loading thumbnail…

SANKEY Experiment2

This example shows a Sankey diagram tracing the flow of total notifications into matched or scraped categories, then breaking matched notifications into subcategories like XRM, Prodc, PN OTD, and CRB. The diagram uses D3.js version 3.5.17 to render nodes and links as SVG elements with cubic Bézier curves. The layout algorithm iteratively assigns node x-positions by breadth and y-positions by value, using a relaxation process to resolve collisions. The custom `d3.sankey` library handles the node positioning and link depth calculations, while the data is stored in a JSON file with explicit node and link arrays.

Apr 2, 2020
Loading thumbnail…

SANKEY Experiment

This example shows a sankey diagram tracking notification flows, using D3.js 3.5.17 with custom `d3.sankey` layout functions and SVG rendering. The diagram visualizes how 65,205 total notifications split into matched and scrap categories, with matched items further distributed across XRM, Prodc, PN OTD, and CRB targets. The code defines the sankey layout, node width, padding, and link curvature, while styling node rectangles and semi-transparent links. Clicking or hovering is not implemented; the visualization primarily demonstrates the classic D3 sankey layout with data loaded from a JSON file.

Apr 2, 2020
Loading thumbnail…

SANKEY Experiment

This visualization uses a D3.js Sankey diagram to show the flow of notification volumes through processing stages. It tracks 65,205 total notifications, which split into matched and scrap categories, with matched items further distributed across XRM, Prodc, PN OTD, and CRB destinations. The SVG rendering uses D3's custom `d3.sankey` layout API, which computes node positions and link depths through iterative relaxation. The diagram employs curved paths for links and semi-transparent black strokes, with nodes rendered as draggable rectangles.

Apr 1, 2020
Loading thumbnail…

SANKEY Experiment

This sankey diagram visualizes greenhouse gas emissions, showing flows from energy and industrial sources to various sectors and ultimately to specific gases like carbon dioxide and methane. The interactive visualization is built with D3.js v3, using the custom `d3.sankey` layout to position nodes and compute link paths. Users can drag nodes to rearrange the diagram, with the `sankey.relayout` method updating link curves in real time. The data comes from a JSON file describing emission sources, intermediate sectors, and final greenhouse gas outputs.

Mar 31, 2020
Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays flow quantities between six named stages—Scrap, Matched, CRB, Prodc, XRM, and PN OTD—with link thickness scaled to numeric values. The D3.js v3 library’s `d3.sankey` plugin computes node positions and link paths, while `d3.behavior.drag` enables interactive node repositioning with automatic relayout. SVG rendering uses color-coded rectangles and bezier curves, with hover tooltips showing exact link and node values.

Mar 30, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data from the Observable Flare dataset, with each ring segment representing a node and its value. Clicking a segment smoothly zooms and scales the visualization to focus on that subtree, using D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`. Animated transitions via `transition.attrTween` and `d3.interpolate` update arc paths and labels, while `d3.scaleOrdinal` with an interpolated rainbow palette colors top-level branches.

Mar 30, 2020
Loading thumbnail…

Let's make a face with d3.js!

A simple animated face is drawn with SVG inside a React component. D3 v5 selections create a yellow circle for the head, black circles for eyes and eyebrows, and an arc path for the smile. Transitions animate the eyebrows upward and the smile downward over two seconds each, then return them to their original positions. The example demonstrates layering groups with `svg.append('g')`, applying translation transforms, and using `transition().duration()` for sequential movement.

Mar 24, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—within a React application. It shows how CSS classes can control stroke, fill, and line-join properties, while inline attributes and nested `<g>` elements apply transformations like scaling and translation. The code renders static shapes without data or interaction, using the SVG API directly in JSX to illustrate layering and styling techniques.

Mar 23, 2020
Loading thumbnail…

cars report

This example displays a static text message, "hello js," rendered in a large font within a preformatted HTML element. Built with React and JavaScript, the visualization’s code imports car data from a separate module (`cars1.js`) but currently uses a hardcoded string for output, not the imported JSON array. The page structure is defined in `index.html` with a styled `<pre>` tag, and the logic in `index.js` sets the text content via `document.getElementById`. The data source includes Honda and Nissan car records with year, make, model, and price fields, though no chart or graph is generated.

Mar 23, 2020
Loading thumbnail…

cars report

This example displays the make of the first car from a two-record JSON dataset, rendering the text “Honda” in a large HTML `<pre>` element. The code imports the car array from `cars1.js`, accesses `cars[0].make`, and writes it to the DOM using `document.getElementById('message_element').textContent`. The visualization uses vanilla JavaScript with no external libraries, relying on a parsed JSON constant defined in the `cars1.js` module and a minimal React README for context. The page is built with a static `index.html` and a bundled script.

Mar 23, 2020
Loading thumbnail…

cars report

This example displays a single data point from a car dataset, showing the make “Honda” from the first entry in a JSON array. The React-based code parses the static JSON data in `cars.js` and uses plain JavaScript DOM manipulation to write the value into the `message_element` of the HTML page. The visualization is minimal, relying on native `getElementById` and `textContent` APIs rather than any charting library. The approach is a straightforward text output, with the dataset containing two car records (Honda and Nissan) but only the first being rendered.

Mar 23, 2020