srikkanth05

@srikkanth05·39 public vizzes

Term Deposits based on Marital Status

Three donut charts compare term deposit subscription rates across divorced, married, and single customers. Each chart uses `d3.pie` and `d3.arc` to render the proportions of "yes" and "no" responses, with percentage labels and hover tooltips showing exact counts. The data is fetched as CSV and filtered with `d3.nest`, while an ordinal color scale distinguishes the two outcomes. The visualization is built with D3 v5, rendered as SVG, and includes basic hover interactions via mouseover and mouseout events.

Jul 25, 2023

Loading thumbnail…

Fork of Interactive Streamgraph Template in React

A fork of the Interactive Streamgraph Template recreated in React, this example displays a streamgraph where layered areas show the distribution of categories across a numerical index. The code fetches CSV data from a GitHub gist, parses it manually, and renders the visualization as SVG paths. It leverages React’s `useEffect` and `useRef` hooks, along with D3 v5 utilities including `d3.stack`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to construct the chart, with axes added at the bottom and left.

Jul 25, 2023

Loading thumbnail…

Scatter Plot: Average Balance vs. Number of Contacts

This scatter plot shows the relationship between the number of contacts and the average account balance, with each point colored by marital status and tooltips revealing exact values. The visualization is rendered as an SVG using D3.js v5, with data loaded from a CSV file. The chart computes average balance per contact count using `d3.nest` and `d3.mean`, scales axes with `d3.scaleLinear`, and uses `d3-tip` for interactive hover details. A legend is generated via `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding.

Jul 25, 2023

Loading thumbnail…

Heatmap Chart: Age vs. Balance

This heatmap chart visualizes the distribution of customers’ age versus balance, using a sequential viridis color scale to encode balance values. The D3 v7 code fetches CSV data from a GitHub gist, maps age and balance to linear scales, and renders each record as a circle positioned by those axes. Interactive tooltips appear on mouseover, and SVG axes, labels, and a title are drawn with d3.axisBottom, d3.axisLeft, and text elements.

Jul 25, 2023

Loading thumbnail…

Stacked Bars and Line Chart

This stacked bar and line chart visualizes average balance and duration across different poutcome categories, combining two metrics into a single composition. It loads CSV data via the Fetch API and uses d3.nest with rollup to compute group means. The visualization renders SVG shapes using d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal, with d3-tip providing interactive mouseover tooltips that display precise values.

Jul 25, 2023

Loading thumbnail…

Force-Directed Bubble Chart: Age vs. Balance

This force-directed bubble chart visualizes the relationship between age and financial balance for individual records, using bubble size to encode balance magnitude and color to represent job categories. The chart employs a physics-based layout where circles repel and attract each other using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces, settling into a non-overlapping arrangement after 120 simulation ticks. Data is fetched from a remote CSV file, parsed into objects, and rendered as SVG circles with interactive tooltips that display the exact age and balance on hover. The visualization uses D3 v7 loaded from UNPKG, with circle positions driven by the simulation's x and y coordinates.

Jul 25, 2023

Loading thumbnail…

Force-Directed Bubble Chart: Age vs. Balance

A force-directed bubble chart visualizes the relationship between customer age and account balance. Node sizes are scaled proportionally to account balance, and the simulation clusters circles centrally using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces. The chart is rendered as an SVG with 120 simulation ticks, and interactive tooltips display the precise age and balance values for each bubble on hover. Data is loaded via the Fetch API from a remote CSV file.

Jul 25, 2023

Loading thumbnail…

Duration Heat Map

This heat map visualizes the duration of events across months and days, using color intensity to reveal patterns. The code fetches a remote text dataset, loads D3 v5 from UNPKG, and renders the graphic with SVG. It builds the chart using `d3.scaleBand` for axes, `d3.scaleSequential` with an interpolateBlues color scale, and adds interactive tooltips. Axes, labels, and a color legend are included, all authored as plain D3 code.

Jul 23, 2023

Loading thumbnail…

Time Series Visualization - Search by Country

This interactive visualization displays life expectancy trends from 1960 to 2016 for a user-selected country. The code loads CSV data from a GitHub gist via `d3.csv`, filters rows by matching the entered country name against the 'Country Name' column, and renders a line chart using `d3.line` with `d3.scaleLinear` for the x and y axes. A custom tooltip built with D3 pointer events reveals the precise year and life expectancy value as the user moves over the SVG path.

Jul 22, 2023

Loading thumbnail…

Spiral Graph

This interactive example generates a spiral graph comparing population and life expectancy trends for a user-selected country. After entering a country name, the code fetches World Bank CSV data from two GitHub gists using `d3.csv` and `Promise.all`. It renders two smoothed cardinal curves over time, with population in steel blue and life expectancy in orange, using distinct left and right y-axes. The visualization is built with D3 v7 and SVG, demonstrating data loading, merging, and custom chart construction.

Jul 22, 2023

Loading thumbnail…

Combined Bar Chart

This sample presents a dynamic, user-driven combined bar chart visualization of life expectancy and population data for ten selectable countries. Users input country names via an HTML form, and the visualization fetches data from external CSV URLs using `d3.csv`, merging the datasets by country. The chart is rendered as an animated SVG using D3 v7, with a dual y-axis scale to accommodate the different measurement units. Selecting a country updates the visualization, which draws each country's data as bar glyphs that animate over time to show changes across multiple years.

Jul 22, 2023

Loading thumbnail…

Tree Chart

This hierarchical tree chart displays geographic relationships, branching from continents to countries, cities, and landmarks. The data is hardcoded in JavaScript as nested JSON objects. The visualization uses D3.js version 3.5.17, specifically the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw curved links. Each node is color-coded by hierarchy level: black for continents, blue for countries, red for cities, and green for landmarks. The animation and SVG-based rendering apply a 1000-millisecond transition duration when updating the tree structure.

Jul 17, 2023

Loading thumbnail…

Reusable Scatter Plot

This visualization demonstrates a reusable scatter plot of penguin measurements, comparing body mass against bill length across three species. The chart animates through different x-axis variables—bill length, bill depth, flipper length, and body mass—in a cycling interval. Built with D3.js v6, it loads data from a remote CSV, uses the `scatterPlot` reusable module with `scaleLinear` and `axisLeft`/`axisBottom`, and renders SVG circles with color-coded species. The example also includes manual legend labels and adds rotated axis text.

Jul 17, 2023

Loading thumbnail…

Bubble Chart

This bubble chart compares 77 cereals by sodium level and rating, with bubble size representing calorie count and color indicating the manufacturer (from data.csv). The visualization renders as an SVG via D3 v7, using d3.csv to load the data, d3.scaleLinear for x/y position and bubble radius, and d3.scaleOrdinal with d3.schemeSet1 for color encoding. It also includes a custom calorie-size legend and a manufacturer color legend built with circle and text elements.

Jul 17, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three species of penguins, each colored differently (skyblue, lightgreen, and orange). It reads data from a CSV file using d3.csv and uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to create the axes. The SVG circles are positioned with cx and cy attributes and colored based on the species column.

Jul 17, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the religious composition of populations across multiple countries, with each bar segment representing a different religion’s adherent count. Hovering over a legend item highlights that religion’s segments while dimming others, and tooltips show exact population values. The visualization uses D3.js version 3.5.5 with d3.layout.stack for data stacking, d3.scale.ordinal and d3.scale.linear for axes, and d3.legend for the interactive color legend, all rendered as SVG with hover-based interactivity.

Jul 17, 2023

Loading thumbnail…

Bar Chart

This bar chart displays the elevations of 20 mountain peaks, using horizontal bars to compare their heights. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering includes custom axis components and rectangular marks with tooltips, fed by data loaded from a CSV file via the `useData` hook. The chart labels the axes with a custom format that abbreviates large numbers, and the data is sourced from a gist published by the author.

Jul 17, 2023

Loading thumbnail…

Countries tree

This interactive tree diagram visualizes the hierarchical relationship between continents, countries, and major cities, using color-coded nodes for each type (e.g., purple for root, green for continents). Rendered as an animated SVG, users can click nodes to expand or collapse branches. The implementation leverages the D3.js `d3.layout.tree` API to compute the layout, with custom CSS classes for node styling and tooltips. The data structure is loaded from an external `Tree.json` file, and the interaction supports zooming and dragging through D3's `d3.behavior.zoom`.

Jul 16, 2023

Loading thumbnail…

Social Network Graph

This example visualizes a social network of eight people and their friendship connections as a force-directed graph. Node size is uniform, and relationships are represented as directed links with arrowheads, while labels identify each person. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Interactive drag-and-drop lets users rearrange the layout, and hovering highlights a node with a blue stroke. Data is loaded from a local JSON file, and the SVG rendering updates positions on each simulation tick.

Jul 16, 2023

Loading thumbnail…

Australia-Country Map

This example displays a choropleth-style map of Australia rendered as a single yellow SVG path with black borders. It loads world country boundaries from the World Atlas TopoJSON dataset, filters for Australia, and fits a Mercator projection to the country’s extent. The code uses `d3.json`, `topojson.feature`, `d3.geoMercator`, and `d3.geoPath` to project and draw the shape, with styling applied via CSS.

Jul 16, 2023

Loading thumbnail…

WorldMap Visualization Based on Categories

This interactive world map visualizes countries by economic category, using the natural earth projection to render geographic boundaries. The map is drawn as SVG paths from TopoJSON data enriched with TSV metadata, with each country’s fill color assigned via a d3 ordinal color scale using the Blues scheme. Pan and zoom are enabled through d3.zoom, and hover effects highlight individual countries. The code leverages d3.geoNaturalEarth1, d3.geoPath, topojson.feature, and d3.schemeBlues.

Jul 16, 2023

Loading thumbnail…

Network Graph

This network graph visualizes a small social network of ten people and their friend relationships, with each node labeled by name and connected by directed links. The graph uses a force-directed layout via `d3.forceSimulation` with link, charge, collision, and centering forces, rendering nodes as green circles and links as blue lines with arrow markers. Node colors are assigned using `scaleOrdinal`, and nodes are draggable through `d3.drag`, with hover highlighting. Data comes from a local `graph.json` file, and the visualization is built with D3 v6 and SVG.

Jul 10, 2023

Loading thumbnail…

MuscleCars tree

This visualization displays a hierarchical tree of muscle car models grouped by manufacturer, using a JSON data source to define the branching structure. Built with D3 v3’s `d3.layout.tree`, it renders nodes as colored rectangles with text labels and connects them with directional links. The visualization supports mouse interactions, including click-to-expand/collapse and zoom-and-drag via `d3.behavior.zoom`, while CSS styles control node colors and link appearance.

Jul 10, 2023

Loading thumbnail…

Activity8_Task5_Country

This example displays a choropleth-style map of India, rendered as a single filled SVG path. The visualization loads world country boundaries from the world-atlas TopoJSON dataset, filters the geometry for India, and applies a Mercator projection fitted to the map’s dimensions. Using d3.geoPath and d3.geoMercator, the code draws the country’s outline with a default black fill, demonstrating a minimal geographic data-binding workflow. The map does not include additional styling, labels, or interactivity, focusing solely on projecting and displaying the national boundary.

Jul 10, 2023

Loading thumbnail…

Activity8_Task5 Map

This interactive world map visualizes country boundaries using an equirectangular projection. Users can pan and zoom the SVG viewport via D3’s zoom behavior. The map is rendered with `d3.geoPath` and `d3.geoEquirectangular`, using TopoJSON data from the world-atlas package. Countries appear in light green with indigo borders and turn maroon on hover, while the ocean background is sky blue. The code imports D3 v5 modules and the TopoJSON `feature` method to convert the TopoJSON topology into GeoJSON features for rendering.

Jul 5, 2023

Loading thumbnail…

Area Chart Activity8_Task4

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth curve to show trends over time. The chart renders as an SVG, with a light green filled area beneath a black curved line, and employs red axis tick labels and orange axis titles for readability. Data is loaded from a CSV file, with years parsed as dates and costs as numbers. The visualization uses d3.scaleTime, d3.scaleLinear, d3.area, and d3.line with curveBasis for the smooth interpolation, alongside d3.axisBottom and d3.axisLeft for the axes.

Jul 5, 2023

Loading thumbnail…

linechart Activity8_Task3

This example displays a line chart of sales costs from 2000 to 2013, using a light green stroke to connect annual data points from a CSV file. The chart renders as an SVG with a red title and axis labels, using D3 v7’s `scaleBand` for the year axis and `scaleLinear` for the cost axis. A `d3.line` path positions points by adding half the band width to each year’s x-coordinate, while `d3.axisBottom` and `d3.axisLeft` generate the axes. The data includes a duplicate year (2008), which appears as two plotted points.

Jul 5, 2023

Loading thumbnail…

Pie Chart Activity8_Task2

This pie chart visualizes the count of students from each major at UNT, displaying proportional slices with data labels and a corresponding legend. The visualization uses D3.js v5, specifically the `pie` and `arc` generators to compute and draw the chart, with `scaleOrdinal` assigning colors to each category. Student counts are sourced from a CSV file fetched via `d3.csv`, and the values are formatted using `d3.format`. The chart is rendered as SVG with appended `path` elements for slices and text elements for labels, while the legend is built through grouped SVG elements.

Jul 5, 2023

Loading thumbnail…

Activity8_Task1

An animated scatterplot of the Iris dataset that cycles through attribute pairings on the x-axis. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, with a `setInterval` function rotating the x-axis variable among petal width, sepal width, petal length, and sepal length. Circles are colored by species, and a legend and axis labels are drawn directly via SVG. Data is loaded as CSV from a GitHub repository.

Jul 5, 2023

Loading thumbnail…

Assignment 1-Task10

This example displays the first 10 rows of a dataset fetched from a remote CSV file, rendering the JSON output in a Vue framework. The visualization uses D3.js v5’s `select`, `csv`, and `csvFormat` functions to load and process the data, while `Math.ceil` calculates the data size in kilobytes. The rendered result is shown in a preformatted HTML element, and the page includes an SVG with a WebGL-rendered background image pattern.

Jul 1, 2023

Loading thumbnail…

Activity 7

This bar chart, created with React and D3 v5, visualizes the populations of ten countries in 2010, using a horizontal layout where each bar’s length corresponds to the population value. The visualization loads data from a remote CSV file via `d3.csv`, scales the values with `d3.scaleLinear` and `d3.scaleBand`, and renders axes and bars as SVG elements. The `AxisBottom`, `AxisLeft`, and `Marks` components format ticks with `d3.format`, display population labels, and include tooltips that show the formatted population value.

Jun 28, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and its color maps to the car manufacturer. Built with D3 v7 and SVG, the chart includes interactive tooltips on mouseover, a size legend, and a color legend. Data is loaded from a remote CSV using `d3.csv`, with scales created via `d3.scaleLinear` and `d3.scaleOrdinal`.

Jun 28, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

A scatter plot of the Iris dataset displays sepal length against petal length, with points colored and shaped by species. The visualization uses D3 v7 with local ES6 modules for modularity. It leverages `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to map data values to positions and categorical shapes, while a custom shape legend explains the species encoding. Data is loaded as CSV via `fetch` and parsed with `csvParse`.

Jun 28, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width along the x- and y-axes. Each flower species—setosa, versicolor, and virginica—is distinguished by a unique color (skyblue, lightgreen, and orange, respectively). The visualization is rendered as an SVG using D3 version 6, with data loaded from a CSV URL. It employs D3's `scaleLinear` for axis scaling and `axisLeft` and `axisBottom` for chart axes, alongside custom styling for tick labels and a red italic title.

Jun 28, 2023

Loading thumbnail…

IMDb Movie ratings

A stacked bar chart shows the percentage of IMDb ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5." The visualization uses d3.stack() to create the stacked segments and d3.scaleOrdinal for color mapping. Hovering over any segment displays a tooltip with the precise percentage for that genre-rating combination. The chart reads data from a CSV file and renders with SVG.

Jun 28, 2023

Loading thumbnail…

Activity 6

This example loads CSV data directly from a GitHub gist and displays the first ten rows as JSON-formatted text. It uses D3 v5 loaded via UNPKG, with the `csv` and `csvFormat` functions to fetch and process the data, and `select` to append `<pre>` elements to the page. The visualization is rendered as SVG, while the page also includes a large base64-encoded JPEG background image and demonstrates importing from local ES6 modules.

Jun 14, 2023

Loading thumbnail…

Transforming Data

This example loads the classic Iris flower dataset from a local CSV file and uses D3.js version 7. The visualization demonstrates data transformation by grouping measurements by species and calculating the average sepal length for each group using `d3.flatRollup` and `d3.sum`. The result is rendered as a formatted JSON object inside a `<pre>` element, showing the computed summary statistics. The code also illustrates asynchronous data loading via `fetch()` and uses `d3.csvParse` to convert the CSV text into structured data, while showcasing D3's `select` API for DOM manipulation.

Jun 14, 2023

Loading thumbnail…

BMI by Age

This example visualizes the average Body Mass Index (BMI) by age, using binned age ranges along a linear scale. The chart displays blue bars for each age bin, with axes for age and average BMI, and a title labeling the graphic. The code loads data from a CSV file, computes BMI from weight and height, and uses D3 v7 APIs including `d3.bin`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG. Axes are styled with custom tick marks and labels, while the binning groups individual data points into age intervals.

Jun 14, 2023

Loading thumbnail…

5 Buddhas

Five Buddhas displays a dense, abstract field of randomly generated, multicolored polygons overlaid with a large, predefined SVG path of the Buddha. The background polygons are created through nested React map functions, with each point, fill color, and rotation determined by random values. The central Buddha figure is drawn using an SVG path element, wrapped in a group with a translation and scale transform. The visualization uses React and ReactDOM to render the static SVG composition directly in the browser.

Jun 7, 2023