S

Sharankumar02

@Sharankumar02·30 public vizzes

Loading thumbnail…

Stacked Movie ratings

This stacked bar chart shows the distribution of movie ratings across six genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5.” Hovering over a segment reveals the exact percentage of that rating level within the genre. The visualization uses d3.stack() to compute the stacked segments and d3.scaleBand for the categorical y-axis, rendering the result as SVG rectangles. Data is loaded from a CSV file, and tooltips provide precise values formatted with d3.format.

Loading thumbnail…

Countries Bar chart

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The chart displays horizontal bars with country names on the y-axis and population values on the x-axis, using an orange fill for the rectangles. The visualization is rendered as an SVG using D3 v5, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for layout and axes. Custom axis formatting converts large numbers to abbreviated labels (e.g., "G" replaced with "B"), and the code includes a title and axis label.

Loading thumbnail…

Social Network Graph

This social network graph visualizes relationships between eight people, with varying link thickness indicating stronger connections (value 1 vs. 5) and arrowheads marking directed edges. The SVG rendering uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, which users can drag interactively. Node highlighting via the `.nodeHover` CSS class occurs on mouseover. The code loads D3 v6 from UNPKG and reads relational data from a local `data.json` file, demonstrating ES6 module imports alongside the main visualization logic.

Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset of alcoholic beverages and their subcategories, with nodes representing items like Wine, Whisky, and specific products, color-coded based on their type. The visualization uses the D3.js library, specifically `d3.layout.tree` and `d3.svg.diagonal`, to compute and render nodes and links. SVG elements are transitioned over 1000 milliseconds as new nodes expand from the root, with each node’s fill color reflecting its category. The dataset is defined in ES6 format, and D3 is loaded via a CDN, demonstrating a dynamic, animated exploration of the drink hierarchy.

Loading thumbnail…

Japan Map

This map of Japan displays the country’s administrative boundaries as solid blue regions. Built with D3.js, it uses `d3.geoMercator` for projection and `d3.geoPath` to render geographic features from TopoJSON data. The map supports interactive zooming via D3’s `zoom()` component, which dynamically transforms the SVG group containing the paths. The visualization loads geographic data from a remote JSON source, applies a categorical color scale (`d3.scaleOrdinal`), and styles the regions with a blue fill and white stroke.

Loading thumbnail…

World Map

This example renders a world map using D3.js version 5 and TopoJSON. It displays country boundaries as green-filled paths with a semi-transparent stroke, overlaid on a white sphere representing the globe. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to convert world-atlas data from TopoJSON to GeoJSON. Data is loaded asynchronously from the unpkg-hosted world-atlas dataset.

Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s rating along the x-axis and sodium level along the y-axis, with circle size encoding calories and color distinguishing manufacturers. The data.csv file is loaded via `d3.csv`, and scales including `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1` position and style the marks. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, plus custom legends for bubble size and manufacturer color.

Loading thumbnail…

Scatterplot to determine Alcohol consumption Vs Life Expectancy

This scatterplot visualizes the relationship between alcohol consumption and life expectancy across countries, with each point colored by continent. Built with React and D3 v5, the visualization renders as an SVG and includes interactive highlighting in the color legend that filters the data points. The CSV data is loaded from a GitHub gist using D3’s `csv` function. Axis tick marks, labels, and the legend are generated by custom React components using `scaleLinear` and `scaleOrdinal` scales.

Loading thumbnail…

Reusable Scatter Plot with Menus

This example shows an interactive scatter plot of automotive data from the auto-mpg CSV file, with dropdown menus that let the user switch which columns appear on the x- and y-axes. The plot uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to build axes, while circles drawn in SVG animate into position via a chained `transition().duration(2000).delay()`. The dropdown options are generated by a custom ES6 module, `dropdownMenu`, imported alongside the reusable `scatterPlot` module that handles rendering.

Loading thumbnail…

Network Graph

This example shows a social network graph of friends, with nodes representing people and directed links showing relationships. The graph is rendered as SVG, and users can drag and hover over nodes to interact with the visualization. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position the nodes, while data is loaded from a local `graph.json` file.

Loading thumbnail…

MuscleCars tree

This example displays a hierarchical tree of muscle car models grouped by manufacturer, with nodes color-coded by depth level. Built with D3.js v3, it uses `d3.layout.tree` for layout and SVG rendering with animated transitions on node click. The visualization supports zoom and drag via `d3.behavior.zoom`, and includes custom link arrows and tooltips for interactivity. Data comes from a JSON file containing the car hierarchy.

Loading thumbnail…

Activity 8 Country

This example renders a choropleth-style outline of India as an SVG map using D3 v5 and TopoJSON. It loads world atlas data from a CDN, filters the TopoJSON feature for the country named India, and fits a `d3.geoMercator` projection to the shape with `fitSize`. A `d3.geoPath` generator draws the country boundary onto a 960 by 500 SVG canvas. The code demonstrates a minimal workflow for extracting and projecting a single country from global geographic data.

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using a spherical projection, with countries rendered as filled paths and an ocean backdrop. Panning and zooming are enabled through D3’s zoom behavior, which applies transforms to the entire SVG. The map is built with `d3.geoEquirectangular` for projection, `d3.geoPath` for generating paths, and `topojson.feature` to convert TopoJSON data from the world-atlas dataset into GeoJSON. Countries are colored light green and turn maroon on hover.

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, with a smooth curve overlaid by a light-green filled region. The visualization uses D3 v5 to load CSV data, scale the time-based x-axis and linear y-axis, and render axis labels with custom styling. It employs `d3.area`, `d3.line`, and `d3.curveBasis` to generate the path elements, with axis ticks formatted using `d3.format`. The SVG output is positioned within a 920×400 canvas.

Loading thumbnail…

linechart

This example visualizes the cost of sales from 2000 to 2013 using a line chart rendered as an SVG. The chart, built with D3.js v7, loads data from a CSV file containing yearly cost values. It uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with a light green line drawn via `d3.line`. Axis labels are styled in red, and the chart includes custom margins and tick font sizes.

Loading thumbnail…

Pie Chart

This pie chart visualizes the number of students by major at the University of North Texas, with each slice colored and labeled with counts in thousands. The chart also includes a legend listing each major alongside its corresponding student count. Built with D3 v5, the visualization uses `d3.pie` and `d3.arc` to generate the chart, `scaleOrdinal` for colors, and SVG for rendering. Data is loaded from a CSV file hosted on GitHub, with text labels positioned using arc centroids.

Loading thumbnail…

Reusable Scatter plot Activity 8

This example demonstrates an interactive scatter plot of the Iris dataset, cycling through four different feature combinations on the x-axis every few seconds. The visualization uses the D3.js library to render SVG circles colored by species (setosa, versicolor, and virginica). The scatter plot is constructed with a reusable `scatterPlot` module, which defines the axes and data mapping. The animation is driven by a `setInterval` loop that updates the `xValue` property, while the y-axis remains fixed on sepal length.

Loading thumbnail…

Activity 7

This visualization presents a horizontal bar chart ranking the populations of 20 countries in 2020, from largest to smallest. The data is loaded from a remote CSV file and rendered as an SVG using the React framework with D3 version 5. The code uses D3's `scaleBand` and `scaleLinear` functions to map country names and population values to the chart's axes, with `format` for tick labels. Interactive tooltips, generated from the `Marks` component, display each bar's value on hover.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position reflects its horsepower and torque values, while its radius encodes highway MPG and its color distinguishes the car brand. The visualization uses D3.js with SVG rendering and includes interactive hover tooltips that display the car make, along with a legend for bubble size. Data is loaded from a CSV file using D3's `d3.csv` method. The chart also features axis labels, a color scale using `d3.interpolateTurbo`, and a legend mapping colors to car brands.

Loading thumbnail…

Activity7 Fork of Scatter Plot with Shape

This scatter plot displays the Iris dataset, mapping sepal and petal lengths on the x and y axes while using different shapes to distinguish the three species. The visualization loads data from a remote CSV file and uses D3 v7 APIs including `csvParse`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to render the marks. A custom shape legend, built with `symbol` and `shapeLegend`, shows the species-to-shape mapping, while axes are added using `axisLeft` and `axisBottom`. The chart updates dynamically when the data is fetched and parsed.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot displays the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` for axes and `extent` to set domains from the CSV data. Circle marks are drawn with a fixed radius, and the code includes custom axis labels for petal and sepal measurements. Colors distinguish between setosa, versicolor, and virginica species.

Loading thumbnail…

Activity-7(2)

This visualization shows stacked horizontal bars comparing the distribution of six movie genres across five rating categories, from "below 5.0" to "above 8.5". The chart reads the CSV data using d3.csv and uses d3.stack to create stacked segments, with d3.scaleOrdinal for color mapping and d3.scaleBand for the vertical genre axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment using d3.format. The SVG rendering includes custom axes and a legend built from HTML elements.

Loading thumbnail…

Assignment

This example loads a CSV dataset of student alcohol consumption and displays the first ten rows as formatted text. It uses D3’s `csv` method to fetch and parse the data, then appends two `<pre>` elements to the body, one with a label and one with the JSON-stringified rows. The visualization is rendered as SVG within an HTML page that also includes an embedded background image pattern.

Loading thumbnail…

BMI by Age

This scatterplot visualizes Body Mass Index (BMI) by age using CDC data, binning individual records into age groups and displaying the average BMI for each bin as green rectangles. The chart shows how average BMI trends across the age range, with axes labeled "Age" and "Average Body Mass Index." The visualization uses D3 v7 with ES6 module imports, leveraging `d3.bin`, `scaleLinear`, `axisBottom`, and `axisLeft` to compute bins, scales, and render SVG axes. The BMI values are calculated from weight and height fields using the standard formula, and the rendering is done entirely in SVG.

Loading thumbnail…

5 Buddhas

Five Buddhas is a generative art piece rendered as a chaotic grid of multicolored, rotated polygons, overlaid with a single large, intricate SVG path depicting a meditating Buddha figure. The visualization uses React to compose the SVG elements, with the background generated through deeply nested array maps and `Math.random()` calls to produce vibrant colors, sizes, and positions. The Buddha silhouette comes from a hardcoded path within the SVG. The entire scene is rendered in black and white, creating a stark, high-contrast aesthetic.

Loading thumbnail…

Transforming Data

This example demonstrates how to transform the classic Iris dataset by computing the average sepal length for each species using `d3.flatRollup` and `d3.sum`, then displaying the aggregated results as a JSON summary in a `<pre>` element. The visualization loads CSV data asynchronously via `fetch`, parses it with `d3.csvParse`, and converts numeric fields before processing. Built with D3 v7 and ES6 modules, it showcases lazy state management where data is fetched and transformed only once on initial render.

Loading thumbnail…

Transforming Data

This example displays the average sepal length for each iris species, computed from the classic Iris dataset. It presents the result as a formatted JSON object rendered in a `<pre>` element, showing a concise text-based summary rather than a graphical chart. The visualization loads the `data.csv` file via `fetch`, parses it with `d3.csvParse`, and converts numeric string fields to numbers. It then uses `d3.flatRollup` with `d3.sum` to calculate the mean sepal length per species, and `d3.select` to update the DOM with the resulting summary.

Loading thumbnail…

Activity 6

This example demonstrates loading a CSV dataset from a GitHub gist and displaying the first ten rows as formatted JSON in the browser. The code uses the D3 v5 library’s `select`, `csv`, and `csvFormat` functions to fetch and process the data, then appends the output to a `<pre>` element in the body. The visualization relies on a minimal Vue-free HTML setup with SVG and WebGL rendering capabilities available, though the visible behavior focuses on data inspection rather than graphical display.

Loading thumbnail…

Activity-6

This example demonstrates how to load and parse a CSV dataset (the classic Iris flower measurements) into a D3.js visualization. It showcases a text-based output that reports the average sepal length per species, computed using the `flatRollup` and `sum` functions from the D3 API. The visualization also highlights the process of fetching data with `fetch`, parsing it with `csvParse`, and dynamically updating the display through a simple state management pattern.

Loading thumbnail…

Activity 6

This example loads a CSV file from a GitHub gist and displays the first ten rows as formatted JSON in the browser. It uses D3 v5’s `csv` method to fetch and parse the remote data, then appends the results to the page with `select` and `append`. The code demonstrates importing both D3 utilities and a local ES6 module, though the latter is not actually used in the visible output. The page renders plain text in a `<pre>` element, with the overall frame defined in an SVG background.