S

SonuSriN

@SonuSriN·41 public vizzes

Loading thumbnail…

USA Air Pollution

This dashboard visualizes USA air pollution data through an interactive Tableau embed. It shows pollution metrics across the United States, with the visualization displayed via the Tableau JavaScript API. The code uses `tableau.Viz` to load the public Tableau workbook, while the `initViz()` function and `dashboard.js` manage the embed. The dashboard is rendered in a HTML container, with styling handled through CSS and interactivity through JavaScript. The embedded view supports full dashboard controls, including toolbar and animations, as configured in the embed parameters.

Loading thumbnail…

Network Graph

This network graph visualizes relationships among characters in a murder case dataset, with nodes representing roles like victims, suspects, and witnesses. The force-directed layout uses `d3.layout.force()`. Links are styled with purple strokes and scaled stroke widths based on each link’s weight, while nodes are circles with labels, rendered as SVG. The code loads data from `graphFile.json` using `d3.json` and enables dragging via `force.drag()`.

Loading thumbnail…

Family Tree

A family tree visualization displays blood group types in a hierarchical layout, with circles representing each group and subgroup generation. Using D3.js v6, the code employs `d3.stratify()` to convert flat data into a hierarchy and `d3.tree()` to compute node positions. SVG elements render the circles, text labels, and animated paths that transition from collapsed to expanded states via `transition().duration()`. The root node appears dark red, with lighter shades for subsequent generations, all centered on the page.

Loading thumbnail…

World Map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in green and a blue sphere background. Hovering over a country highlights it in orange. It uses d3.geoPath with the d3.geoEquirectangular projection to draw the map, and TopoJSON’s feature method to convert country boundaries from the world-atlas dataset. The code selects the SVG element, appends a sphere path, then joins country features to path elements.

Loading thumbnail…

USA Country Map

This choropleth-style map displays the 50 United States using an Albers equal-area conic projection, with each state filled in green and white borders defining state boundaries. Hovering over a state changes its fill to orange. The visualization is built with React, D3.js v5, and TopoJSON, using `d3.geoPath()` to render geographic shapes and the `geoAlbersUsaTerritories()` projection. State geometry is loaded from a US Atlas TopoJSON file, and the map is rendered as SVG.

Loading thumbnail…

Tree Example

This interactive tree diagram displays a hierarchical data structure for blood groups, starting with a root "Blood Group" node that branches into types A and B, each further divided into positive and negative variants. Built with D3.js version 3.5.17, it uses SVG rendering and animation, implementing a collapsible tree layout where users can click nodes to expand or collapse child branches with smooth transitions via the `d3.layout.tree` and `d3.svg.diagonal` APIs.

Loading thumbnail…

Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries organized by continent and subregion, rendered as an interactive SVG. The root node labeled "Blood Group" branches into major regions such as Western Asia and South-Eastern Asia, with country names as leaf nodes. Using D3 v5, the code applies a `d3.tree()` layout and `d3.linkHorizontal()` to draw curved links between parent and child nodes. Panning and zooming are enabled through D3's `d3.zoom()` behavior on the SVG element, with text labels sized dynamically based on depth.

Loading thumbnail…

Untitled

This visualization presents a hierarchical tree diagram depicting a family lineage, where each node is represented by a colored circle and labeled with a name. The size of each circle corresponds to a numeric value, while the stroke and fill colors indicate the node's type and level. The diagram, rendered as an SVG, uses the D3.js library, specifically the `d3.tree()` layout and `d3.hierarchy()` function to structure the data. Curved links connect parent and child nodes, with their stroke color also reflecting the level of the child node. The data is embedded directly within the JavaScript code as a JSON object.

Loading thumbnail…

Fork of Interactive Tree Updated

A hierarchical tree visualization presents user interaction outcomes, from visits to question attempts, with colored nodes representing states like correct or incorrect. Users collapse and expand branches by clicking nodes, triggering animated transitions that reposition links and nodes using d3’s `tree` layout and `linkHorizontal` path generator. Data is defined in a static JavaScript object, while rendering relies on SVG elements and the `zoom` behavior for panning and scaling.

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical tree structure as collapsible boxes, with each node representing a named entity and its connections labeled with synchronization details (SYNC or ASYN). Built with D3.js v3 and jQuery, the tree uses SVG rendering and animated transitions for expand/collapse interactions. The code implements custom layout calculations, including collision detection to prevent node overlap, and enhances usability with zoom and drag capabilities via `d3.behavior.zoom`, while tooltips provide additional node information. Data is loaded from a JSON file defining the tree structure and node attributes like type and version.

Loading thumbnail…

Fork of another Tree

This example shows a family tree visualization representing blood group inheritance, with names organized hierarchically by blood type. The tree layout is computed using `d3.tree` and `d3.hierarchy`, and rendered as an SVG with `d3.linkHorizontal` paths connecting parent and child nodes. Text labels for each descendant are positioned dynamically based on node coordinates, and `d3.zoom` enables panning and zooming of the entire diagram. The styling uses the Playfair Display font and a custom text shadow for readability. Data comes from the `family.json` file.

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot explores the Iris dataset, cycling through different feature pairs on the x-axis via a timed animation while keeping sepal length on the y-axis. Points are colored by species using a legend. Built with D3 v6, it leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and a custom `scatterPlot` module for reusable chart construction. The animation uses `setInterval` to update the x-value mapping, demonstrating a flexible SVG-based approach to multivariate data exploration.

Loading thumbnail…

Area chart

This area chart displays the life expectancy of the USA across years, with a smooth curve filling the space beneath the line. The data is loaded from a CSV file via a GitHub gist. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` functions within an SVG rendering, including labeled axes and a title. The y-axis tick labels are formatted using `format`, and the chart includes grid lines via axis tick sizing.

Loading thumbnail…

Line Chart

This line chart shows the life expectancy of the USA from 1800 to 2016, with the years on the x-axis and expectancy values on the y-axis. The React-based visualization uses D3 v5 scales and the `d3.line` generator to create the SVG path, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file using `d3.csv` and parsed with `d3.timeParse`. Gridlines, axis labels, and a green stroke line are styled through CSS.

Loading thumbnail…

Pie Chart

A pie chart displays the total deaths from COVID-19 across Oceania countries and regions, with each slice labeled by its death count and accompanied by a legend showing the country and corresponding value. The chart uses d3.pie and d3.arc to generate SVG paths, a scaleOrdinal color scale for slice fills, and a second d3.arc for label positioning. Data is loaded asynchronously from a GitHub-hosted CSV file via d3.csv, and the legend is built with appended SVG groups, rectangles, and text elements.

Loading thumbnail…

Pie Chart

This pie chart visualizes COVID-19 death totals across Oceania countries and regions, with each slice labeled with the death count in thousands and accompanied by a color-coded legend listing country names and exact values. The chart renders as an SVG using d3.pie and d3.arc to generate the segments, with d3.scaleOrdinal assigning colors from a fixed palette. Data is loaded asynchronously from a CSV file via d3.csv, and the code uses d3.format to shorten large numbers for tick labels.

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements with points colored by species. The visualization cycles through different x-axis dimensions every few seconds using `setInterval`, updating the axes and labels accordingly. Built with D3 v6, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot, while SVG circles with custom `rx` and `ry` attributes create elliptical data markers. A legend displays species colors, and the plot title and axis labels are added dynamically.

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, with each point colored by species. The visualization cycles through different x-axis variable mappings every two seconds, animating transitions between petal width, sepal width, petal length, and sepal length. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `setInterval` to update the chart. The reusable `scatterPlot` function encapsulates the chart logic, while SVG circles and legend elements render the data, which is loaded via `d3.csv` from a GitHub Gist.

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length and width to x and y positions while coloring each point by species (setosa, versicolor, and virginica). The axes are labeled "Petal length" and "Sepal length," and the plot renders in an SVG using D3 v6, with d3.csv, scaleLinear, extent, axisLeft, and axisBottom. Circles are drawn with fixed radius and fill colors based on species, using the data loading and margin conventions from the React starter template.

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of an ICE 7 area chart visualizes car sales in India from 2009 to 2019, combining a black line and an orange filled area to show the trend over time. Using D3 v5, the code loads CSV data, parses years with `d3.timeParse`, and renders the chart as SVG. It employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with `line` and `area` generators using `curveBasis` to smooth the paths.

Loading thumbnail…

Fork of Fork of Fork of ICE-7 question 4: Area chart

This area chart displays death rates in India from 2000 to 2012, with years on the x-axis and the death rate on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` generator with `curveBasis` to render a smooth filled path in SVG. Data is loaded via `csv` from a GitHub gist, and the chart includes labeled axes and a title.

Loading thumbnail…

Fork of World Population Area Chart

This visualization shows the global rise in life expectancy over time, plotting yearly data points as a filled area chart. The area's height encodes the maximum recorded expectancy in the dataset, with the curve smoothed using `d3.curveBasis`. The SVG is rendered via D3 v5, using `scaleTime` and `scaleLinear` for axes, `area()` for the path, and `axisLeft`/`axisBottom` for labeled tick marks. Data comes from a CSV of life expectancy values loaded with `d3.csv`, and the chart includes custom axis formatting to abbreviate large numbers (e.g., replacing 'G' with 'B').

Loading thumbnail…

Area Chart

This area chart visualizes life expectancy in the United States over time, using a smooth, filled curve to show the trend. The D3 code (v5) loads data from a CSV file and uses `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` to generate the smooth area path, and `axisBottom` and `axisLeft` for gridlines and labels. The title and axis labels are added as SVG text elements.

Loading thumbnail…

Area Chart

This area chart displays the life expectancy of the USA over time, with a blue line tracing the trend and an orange filled area beneath it, using a smooth curve. The visualization loads CSV data from a GitHub gist and renders as SVG via D3 v5, employing `scaleTime`, `scaleLinear`, `csv`, `area`, and `line` generators with `curveBasis`. It includes labeled axes for year and life expectancy, gridlines via tick sizes, and formatted tick labels.

Loading thumbnail…

Area Chart

This area chart displays the sales of cars in India from 2009 to 2019, with a smooth curve and a shaded region beneath the line to emphasize trends over time. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` and `d3.area` generators with `curveBasis` to create the smoothed path. Data is loaded from a remote CSV file using `d3.csv`, with axes formatted via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Area Chart

This area chart displays the life expectancy of the USA over time, using a smooth, filled curve to emphasize the upward trend. The visualization uses D3 v5, loading data from a CSV file hosted on GitHub. It implements a time-scaled x-axis and a linear y-axis, with the area rendered using the `area` and `curveBasis` functions. Axis labels and a title are added via SVG text elements.

Loading thumbnail…

Line Chart

This line chart visualizes temperature changes over time using a dataset of Oceania COVID-19 reports. The chart employs smooth, natural curves to connect data points across a time-series axis. Built with React and D3 v5, it renders as an SVG, with the `line()` and `curveNatural()` functions from D3 generating the path. Axes are constructed using `scaleTime()` and `scaleLinear()`, with tick labels formatted via `timeFormat()`. The dataset is loaded asynchronously from a CSV file using D3’s `csv()` function.

Loading thumbnail…

Pie Chart

This pie chart displays the top 10 countries by deaths from air pollution in 2020. It uses D3 v5 with SVG rendering, fetching CSV data from a GitHub gist. The visualization applies d3.pie and d3.arc to generate colored segments, with labels showing values in thousands. A legend lists country names and corresponding totals, using d3.scaleOrdinal for color assignment.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through different x-axis variables—petal width, sepal width, petal length, and sepal length—for the classic Iris dataset, with y-axis fixed to sepal length. Each flower species is color-coded (steelblue, fuchsia, green) and rendered as circles with distinct radii and fill properties. Using D3 v6 (d3.csv, d3.scaleLinear, d3.axisLeft, d3.axisBottom), the visualization updates every interval via setInterval, rebuilding the axes and labels for each dimension. The code also includes a custom legend and axis titles, with SVG rendering for all marks and text.

Loading thumbnail…

Fork of Pie chart Test

This visualization displays a basic pie chart of browser usage shares, with segments colored by a sequential ordinal scale and labeled with their names. The chart is rendered as an SVG using D3 v6, with data hardcoded in the script rather than loaded from the included CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal()` for color mapping, while labels are positioned using an inner arc's centroid. The SVG is centered via CSS, and the visualization is based on a tutorial by FrontendTips.

Loading thumbnail…

Fork of [TEST] Pie Chart

This pie chart displays the percentage distribution of local and international credit ratings, with slices sized proportionally to each category’s value. The chart is rendered as an SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs, with data loaded from a JSON file and values converted from strings to numbers. Each slice is colored via an ordinal scale, and a legend lists the rating labels alongside their formatted percentages.

Loading thumbnail…

Fork of Pie chart RDW

This example shows a simple pie chart of four data points representing yearly values from 2013 to 2019. Each slice is labeled with its corresponding year, and the chart uses a categorical color scheme to differentiate the segments. The visualization is built using D3 v6, with `d3.pie()` computing the arc angles, `d3.arc()` generating the SVG path shapes, and the `centroid` method positioning the year labels at the center of each slice. The data is hardcoded in the script, and the SVG is centered on the page via CSS.

Loading thumbnail…

Fork of Interactive Color Legend

A fork of the Interactive Color Legend visualizes the Iris Dataset as a scatter plot of petal length against sepal width. Built with React and rendered as SVG using D3 scales, circles are colored by species via a `scaleOrdinal` mapping. Hovering over the custom `ColorLegend` groups highlights the matching species by filtering the data and applying a fade opacity to unrelated marks. The implementation uses `AxisBottom`, `AxisLeft`, and `Marks` components, with data loaded asynchronously via D3’s `csv` parser.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot visualizing the Iris Dataset. The plot maps petal width to the x-axis and sepal length to the y-axis, with data points rendered as SVG circles. Every two seconds, the x-axis mapping automatically cycles through different Iris measurements (petal width, sepal width, petal length, sepal length), animating the scatter plot. The visualization uses d3’s scaleLinear, axisLeft, axisBottom, and the join operation to update marks, and it loads the data via d3.csv. The code is adapted from the "Towards Reusable Charts" pattern.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris Dataset in a scatter plot where users see the relationship between two measurements. The plot cycles through different x-axis variables every two seconds, animating between petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and a reusable chart pattern where `scatterPlot` is configured with method chaining. SVG circles render the data points, animated via `setInterval`.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis against sepal length on the y-axis for individual flower specimens. Using D3 v6, the code loads CSV data, scales the values with `scaleLinear`, and renders each sample as a steelblue circle via SVG. The axes are generated with `axisBottom` and `axisLeft`, while axis labels are added as rotated text elements. The visualization directly displays the raw data points without color or shape encoding, emphasizing the correlation between these two measurements across the dataset.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows COVID-19 deaths in Oceania until March 2022, with a horizontal bar chart ranking the top 10 countries by total deaths. The visualization uses React to render SVG marks, while D3 v5 provides the `csv` loader, `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and manually generated gridlines and tick labels. Data is loaded from a GitHub-hosted CSV file and styled with CSS hover effects that change bar colors.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing comma-separated value (CSV) data using the D3.js library. It displays information about Iris flower petal and sepal measurements in a styled HTML page with an accompanying SVG illustration. The code uses `d3.csv` to fetch and parse the data, then renders it into a `<pre>` element. The visualization combines CSS styling, an external image, and custom SVG shapes to create an educational interface for learning data loading workflows.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This visualization demonstrates how to load and parse CSV data using D3.js v7. It displays the dataset’s size in kilobytes, row count, and column count in a prominent text element. The code fetches the Iris dataset from a GitHub gist using `d3.csv`, formats the data with `d3.csvFormat`, and updates the page content via the DOM. A static SVG image is also embedded on the page.

Loading thumbnail…

Fork - ICE 4

Built with React and D3, this example renders a smiley face as an SVG using geometric primitives such as circles, ellipses, and an arc path. The face is centered with proportional coordinates, and D3's `arc` generator creates the mouth, while React manages the component structure and rendering. Reusable constants define dimensions, colors, and offsets, and standard SVG elements like `<circle>` and `<ellipse>` are used for features like eyes, ears, and a nose. The code runs in a browser with React 17 and D3 v7, outputting a static vector illustration.

Loading thumbnail…

Fork of Let's make a face: part 3

This example shows a smiley face rendered as a scalable vector graphic using React and D3. The face is composed of a yellow circle for the head, two black eyes, and a curved mouth drawn as an arc path. The code uses React to create SVG elements and the `d3.arc` function to generate the mouth shape, with coordinates centered on the middle of the canvas. React 17 and D3 v7 are loaded via CDN, and the SVG is drawn with fixed dimensions of 960 by 500 pixels.