Vignesh Nallamothu

@VigneshNallamothu·10 public vizzes

Fork of treee

This example displays a hierarchical tree diagram illustrating sleep data for three people, with leaf nodes representing specific attributes like sleep duration, stress level, and productivity. The root node, "Sleep Data," branches to person nodes, which then branch to their respective attributes. The visualization is rendered as an SVG using D3 v7, employing the `d3.hierarchy` and `d3.tree` layout functions to position nodes and `d3.linkVertical` to draw connecting paths. Node colors vary by depth: blue for the root, yellow for person nodes, and red for attribute leaves.

Apr 8, 2025

Loading thumbnail…

Fork of Fork of treee

This network visualization plots twelve fictional individuals in a circular layout, with edges linking them. Node color and size encode reported sleep hours and productivity percentages, and hovering reveals a tooltip with the exact values. The chart is built with D3 v7, using a manual circular layout rather than a force simulation, and renders as SVG with CSS transitions for the hover effect.

Apr 8, 2025

Loading thumbnail…

Fork of Fork of Fork of treee

This example visualizes a hierarchical dataset of sleep-related attributes using a tree layout. Three person nodes branch to attribute leaves such as sleep duration, stress level, and productivity, with circles for persons and rounded rectangles for attributes. Built with D3 v7, it uses `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` to position the SVG elements. Hovering over a node highlights its circle and displays the node's name in an HTML tooltip.

Apr 8, 2025

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This chart visualizes the sleep duration of 17 individuals as a smooth area graph, with the filled region emphasizing the distribution of hours per person. The SVG rendering is built using D3 v6, employing `d3.scalePoint`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveMonotoneX` to generate the shaded area and its boundary line. Custom CSS styles the area and line, while `d3.axisBottom` and `d3.axisLeft` produce rotated and labeled axes for the categorical names and numerical hours.

Apr 1, 2025

Loading thumbnail…

Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This chart visualizes the sleep duration in hours for a list of seventeen named individuals, with each name plotted along the x-axis and its corresponding duration on the y-axis. A single steelblue line connects the data points to reveal the variation across the group. The visualization is built with D3.js v6, using `d3.scalePoint()` for the categorical name axis and `d3.scaleLinear()` for the numeric duration axis. The line is generated with `d3.line()` and rendered as an SVG path, with rotated x-axis labels for readability.

Apr 1, 2025

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between sleep duration and age, using data loaded from a CSV file. The code defines a reusable `scatterPlot` function with configurable properties for width, height, data, accessors, margin, and radius. It renders circles via D3’s data join and uses `d3.axisLeft` and `d3.axisBottom` for axes, with linear scales mapping sleep hours (0–11) and age (10–30). The SVG output fills the browser window.

Apr 1, 2025

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This pie chart visualizes the distribution of productivity levels from a remote CSV dataset, showing the count of each category as a slice. It fetches the data with `fetch`, parses the CSV text, and aggregates the third column into counts. The chart is rendered on a canvas using Chart.js, with a legend on the right and a title. An error message displays if no valid data exists.

Apr 1, 2025

Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between sleep duration in hours and age in years, with each blue circle representing an individual data point. The chart plots sleep duration along the x-axis and age along the y-axis using d3.scaleLinear for both scales, rendering circles as SVG elements through d3.selectAll and data binding. Axes are generated with d3.axisBottom and d3.axisLeft, while data is loaded asynchronously from a CSV file via d3.csv from a GitHub gist.

Mar 25, 2025

Loading thumbnail…

barplot

This bar chart visualizes sleep duration for individuals, with each bar representing a person’s name and the bar height corresponding to their hours of sleep. The visualization uses d3.csv to load data from a remote ICE5dataset, d3.scaleBand for the x-axis categories, and d3.scaleLinear for the y-axis. Bars are rendered as SVG rectangles with a hover effect that changes their fill to orange via d3.select, while d3.axisBottom and d3.axisLeft generate the labeled axes.

Mar 24, 2025

Loading thumbnail…

student

This example displays the file size, row count, and column count of a CSV dataset about sleep quality and productivity. It loads the data from a GitHub gist using `d3.csv`, then calculates the formatted data length in kilobytes with `d3.csvFormat`. The resulting summary is rendered as plain text inside a `<pre>` element, styled with a green background, while the page title uses a yellow heading. The visualization is purely textual, providing a quick metadata overview without any charts or graphs.

Mar 18, 2025