Y

yaswanthsen

@yaswanthsen·41 public vizzes

Loading thumbnail…

ICE-8 INDIA

This visualization displays a choropleth map of Indian states, with each state filled by a distinct color from D3’s `schemeCategory10` and labeled with its name. It loads GeoJSON TopoJSON data from a GitHub repository, converts it using `topojson.feature`, and renders the paths via `d3.geoPath` with a `geoMercator` projection. State names are positioned at path centroids using `pathGenerator.centroid`, with SVG text elements styled in CSS. The code relies on D3 v5 and the `topojson` client library.

Loading thumbnail…

World Map with D3.js!

This example renders a world map using an equirectangular projection, with countries filled in pink against a light blue sphere. It loads country boundaries from a TopoJSON file (world-atlas countries-110m.json) and converts them to GeoJSON features using the `feature` method. The visualization employs D3 v5’s `geoPath` and `geoEquirectangular` functions to generate SVG paths, and CSS hover styles highlight each country in green. The sphere and country shapes are appended as SVG path elements with distinct classes.

Loading thumbnail…

ICE-8 Network

A network graph of eight people connected by "Friend with" relationships, with link thickness representing interaction value. The layout uses `d3.forceSimulation` with link, charge, collision, and center forces, rendering nodes as circles and links as red lines with arrow markers. Node positions update on each simulation tick, and dragging is enabled via `d3.drag`. Data comes from a JSON file defining nodes and links, with SVG output generated through D3 v6 selections. Hovering highlights nodes by adding a green stroke.

Loading thumbnail…

ICE-8 Plant Species

A static radial tree diagram visualizes the hierarchy of plant species from a hardcoded dataset. Three root categories—Grasses, Trees, and Flowers—branch into leaf nodes like "Switch Grass" and "Rose." The visualization uses the D3.js library, specifically the `d3.tree()` layout with `d3.hierarchy()`, to position linked nodes. Rendered as SVG, node circles are encoded with varying sizes via `d.data.value`, while color properties from the data are applied to circle strokes and fills, and path links use curve interpolation for smooth connections.

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This example visualizes a small social network graph, showing eight people connected by friendship links and rendered as yellow circles with labels. A force-directed layout using `d3.forceSimulation` positions nodes, with `d3.forceLink` defining edges based on a JSON data file containing source, target, and relationship attributes. SVG elements create nodes and links, while drag interaction via `d3.drag` lets viewers reposition nodes, and mouseover events highlight nodes with a green stroke.

Loading thumbnail…

Fork of Network Graph

This example shows a small network of characters involved in a crime investigation, with nodes named for suspects, victims, and an eyewitness. The graph uses a force-directed layout to position seven nodes and six weighted links, where line thickness corresponds to the link’s weight value. The visualization is rendered as an SVG using D3.js version 4’s `d3.layout.force` API, and nodes are draggable circles with labels. Data is loaded from an external JSON file containing node groups and link weights.

Loading thumbnail…

Fork of ICE8 - Family Tree

A family tree visualization renders hierarchical relationships as a branching SVG chart, with nodes colored by generation (type) and connected by directional links. The D3 v3 layout computes node positions, while custom collision detection prevents overlaps. Interactive zoom-and-drag behavior is enabled via `d3.behavior.zoom`, and clicking a node toggles its children. Node styling includes drop shadows and tooltips, with data loaded from a JSON file. Rendering uses SVG elements and foreignObject for text, with persistent animation during updates.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Tree 7

This interactive tree diagram displays a hierarchical dataset of names, with nodes that can be clicked to expand or collapse their child branches. The visualization uses D3.js version 3.5.17, employing the `d3.layout.tree` API to compute node positions and `d3.svg.diagonal` to draw curved links between parent and child nodes. Nodes transition smoothly over 1100 milliseconds using D3's `.transition()` method, while SVG circles and text labels represent each entry. The data comes from a local JSON file loaded via `d3.json`, and the entire graphic is rendered as an animated SVG.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Tree 7

This interactive D3.js tree diagram displays hierarchical data from a JSON file, with nodes named after individuals like "kamasani" and "prabhakar." Users can click any node to collapse or expand its children, triggering smooth animated transitions that reposition the tree. The visualization uses the legacy `d3.layout.tree` API and `d3.svg.diagonal` for curved links, with nodes rendered as green-stroked circles and bold labels. Animated state changes last 1.1 seconds, and the SVG output adapts its layout dynamically.

Loading thumbnail…

Fork of Fork of Fork of Fork of Tree 7

This example visualizes a hierarchical tree structure from a JSON file, displaying a root node that branches into nested child nodes such as “kamasani,” “lalli,” and “prabhakar.” Each node is represented by a circle and a bold text label, with the layout arranged vertically and expanding from left to right. The visualization uses the D3.js library, specifically `d3.layout.tree`, `d3.svg.diagonal`, and `d3.json`, to compute node positions and draw curved links between them. The SVG rendering includes smooth animated transitions when users click on a node to collapse or expand its children, with node and link movements updating over a 1100-millisecond duration.

Loading thumbnail…

Fork of World Map Simple

This example displays a simple world map rendered with an equirectangular-like Natural Earth projection, including graticule and outline overlays. It uses d3.geoNaturalEarth1 and d3.geoPath to draw country boundaries as SVG paths, with data fetched from the visionscarto-world-atlas TopoJSON file and converted via topojson-client. The visualization fills the browser window and updates reactively through a state-driven render loop.

Loading thumbnail…

Fork of Family Tree

This fork of a family tree visualization uses D3 v6 to display hierarchical relationships among a set of characters. The D3 `stratify()` API constructs the tree structure from parent-child links, while `d3.tree()` calculates the layout. Nodes are rendered as colored SVG circles, with colors indicating generation depth, and are animated via D3's `transition()` API. The connections between nodes are drawn as lime-green paths. The embedded text labels are placed directly on each circle using SVG text elements.

Loading thumbnail…

ICE

This interactive D3.js visualization presents a named character hierarchy as an animated tree, with nodes color-coded by generation depth and lime-colored connecting paths. The chart uses a custom tree layout built through `d3.stratify` to structure parent-child relationships from a flat data array, then renders SVG circles and text labels for each character. Rendering relies on D3 v6 transitions to animate node and path drawing over time, with the layout sized at 900 by 350 pixels and offset within the viewport. The data is hardcoded, and the visualization focuses on showing hierarchical connections through a simple, color-coded branching structure.

Loading thumbnail…

Fork of 2015 Internet Users World Map

This world map shows the percentage of internet users per country in 2015, using a green color scale to indicate adoption levels. Hovering over a country reveals its exact percentage via a tooltip, and users can zoom into the map to inspect small nations. The visualization loads geographic data from a TopoJSON world atlas via `topojson-client`, projects it with `d3.geoNaturalEarth1` and `d3.geoPath`, and joins user statistics from a CSV file. Zooming relies on `d3.zoom`, while the color legend and interactive tooltip are built with D3 selections and a `scaleOrdinal` scale.

Loading thumbnail…

Fork of Polished World Map

This map displays country boundaries from the World Atlas TopoJSON source overlaid with graticules and sphere outlines. It is rendered as SVG with React, using d3.geoNaturalEarth1 for projection, d3.geoPath for path generation, and d3.geoGraticule for the graticule layer. The land polygons are filled teal, interiors drawn in a contrasting stroke, and the graticules in light gray. Data is fetched via d3.json from unpkg and processed with topojson’s feature and mesh functions.

Loading thumbnail…

Sales of cars in Asia Area Chart

This area chart shows car sales in Asia from 2009 to 2019, with a smooth line tracing the yearly sales trend and a grey shaded region beneath it highlighting the cumulative volume. The visualization uses D3.js v5 to load and parse CSV data from a GitHub gist, then applies a time scale for the x-axis and a linear scale for the y-axis to map the data points. The line and area paths are generated using d3.line and d3.area with curveBasis interpolation, while axisBottom and axisLeft render the labeled axes with formatted tick values.

Loading thumbnail…

vehicels sale in USA Line Chart

This line chart displays vehicle sales in the USA from 2005 to 2022, with years on the x-axis and sales figures on the y-axis. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for the axes, and a `line` generator to plot the data. The code loads CSV data from a GitHub gist and formats the year as a date object before drawing. The chart includes axis labels, a title, and an orange line path, with grid lines styled via `tickSize` properties.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes automobile sales in India from 1999 to 2012, with years on the x-axis and sales figures on the y-axis. The chart uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft to render a blue stroke path within an SVG. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with numeric sales values parsed and years converted to Date objects. The visualization includes axis labels, tick marks, margins, and a title, all styled through external CSS.

Loading thumbnail…

Fork of Fork of line chart section 3

This example visualizes car sales data from 2013–2021, plotting total sales against years. The chart uses a red line to show the trend over time, with axes labeled "years" and "totalsales." It loads data from a CSV file, parses dates with `d3.timeParse`, and renders as an SVG using D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. Gridlines are styled with tick sizes, and axis labels are added via appended text elements.

Loading thumbnail…

Fork of Line Chart- Data Visualization

This line chart displays Amazon stock prices over time, using year on the x-axis and price on the y-axis with gridlines. It loads CSV data and parses dates with `d3.timeParse`. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`), axes (`axisBottom`, `axisLeft`), and a `line` generator to draw the path in an SVG. Formatting includes rotated axis labels and styled tick marks.

Loading thumbnail…

Pie Chart of HBO MAX

This pie chart displays the number of movies and shows available on HBO MAX, broken down by country for the top ten entries in the dataset. The visualization uses D3 v5’s `pie` and `arc` generators to create the chart, with colors assigned via `scaleOrdinal` and `schemeCategory10`. Each slice’s value is mapped to the `TotalLibrarySize` field, and a legend lists each country with its corresponding count. The code loads data from a CSV file, sorts it descending, and renders only the first ten rows.

Loading thumbnail…

Fork of Fork of Fork of Fork of Pie Chart

This pie chart displays 2022 US auto sales by brand, sourced from a CSV file hosted on GitHub, with each brand’s YTD sales shown as a colored segment and corresponding legend values in thousands. The visualization uses D3 v5, leveraging `d3.pie` and `d3.arc` to compute the chart geometry, `d3.scaleOrdinal` for the categorical color palette, and SVG `path` elements for rendering. Legends are constructed manually with `rect` and `text` elements, while numerical formatting employs `d3.format` to display abbreviated values.

Loading thumbnail…

Fork of Fork of ICE 7 Pie Chart

This visualization shows the top 10 car-producing countries in the world based on their 2019 total production values, displayed as a pie chart with a color-coded legend. The chart uses D3 v5’s `pie()` and `arc()` functions to generate the SVG segments, with each country’s production value formatted as a label. Data is loaded from a CSV file via `d3.csv`, and colors are assigned using `scaleOrdinal`. The legend includes circles, country names, and production totals, all positioned with SVG transforms.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by deaths from air pollution in 2020 using a pie chart rendered with D3 v5. The chart shows each country’s proportional death count, with section labels formatted in thousands and a legend pairing color swatches with country names and values. The code fetches CSV data from a GitHub gist, then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the pie segments and a custom legend, all drawn as SVG elements.

Loading thumbnail…

Fork of Pie Chart

This visualization displays the top 10 U.S. states by Democratic population, using a pie chart with a categorical color scheme. The chart presents each state’s population in millions via an interactive legend and a labeled SVG arc. The code leverages D3 v5’s `select`, `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to construct the chart from CSV data. Hovering over a segment logs the corresponding state’s population to the console. The data is loaded from a remote CSV file, and the visualization is rendered as an SVG graphic.

Loading thumbnail…

Fork of Pie Chart

This visualization shows the top 10 countries by total Netflix movies and shows, displayed as a pie chart with a color-coded legend listing each country and its corresponding library size. The data is loaded from a CSV file via d3.csv, sorted descending, and sliced to the top 10 entries. The pie layout is computed with `d3.pie`, arcs are drawn using `d3.arc`, and categorical colors come from `d3.scaleOrdinal` with `schemeCategory10`. SVG elements are appended and styled with external CSS, and the legend includes both country names and numeric values.

Loading thumbnail…

Fork of Fork of Fork of Pie Chart ICE-7

This pie chart visualizes monthly expenditures by department, using color-coded slices with department labels positioned at each arc’s centroid. A legend to the right maps each color to its department and expenditure value. The code loads CSV data via `d3.csv` (D3 v5), then uses `d3.pie` and `d3.arc` to generate the SVG paths, with `d3.scaleOrdinal` assigning colors. The visualization is rendered as an SVG with a fixed 960×500 canvas.

Loading thumbnail…

Fork of Fork of Pie Chart ICE-7

This example visualizes monthly expenditures by department as a pie chart built with D3 v5. It fetches CSV data from a remote GitHub gist using `d3.csv`, then applies `d3.pie` and `d3.arc` to generate SVG path segments. A color scale from `d3.scaleOrdinal` assigns section colors, and each slice includes a centered text label. A legend on the right displays department names and formatted dollar amounts using `d3.format`, with all rendering handled through SVG elements in the browser.

Loading thumbnail…

Fork of Pie Chart ICE-7

This example visualizes monthly expenditures by department using a donut-style pie chart, with each slice labeled and a color-coded legend that lists department names alongside their formatted dollar values. The chart is drawn as an SVG using D3 version 5, fetching expense data from a CSV file via `d3.csv`. The code employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for segment geometry and color mapping, and `d3.format` for axis tick labels. A legend group is positioned manually with `transform` translations.

Loading thumbnail…

Pie Chart

This pie chart displays the year-to-date sales distribution across multiple HBO Max brands, with each slice’s size and color encoding the proportional value. The chart also includes a legend showing each brand’s name, its percentage of the total, and the raw sales figure in thousands. The visualization is built using D3.js v5, which loads data from a CSV file hosted on GitHub, computes pie arcs with `d3.pie()`, and renders the SVG paths using `d3.arc()`. Colors are assigned via `d3.scaleOrdinal()`, and the legend labels are formatted with `d3.format()`.

Loading thumbnail…

Fork of Pie Chart

This chart displays 2022 US auto sales by brand as a pie chart, with each slice sized by year-to-date sales and accompanied by a legend showing the brand name, percentage of total sales, and sales volume in thousands. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the segments as SVG paths, while `scaleOrdinal` assigns a fixed color palette to the data values. Data is loaded asynchronously via `csv` from a Gist URL, and `format` is used to abbreviate the numeric labels.

Loading thumbnail…

Reusable scatter plot

This example demonstrates a reusable scatter plot component built with D3.js, visualizing the Iris dataset. The plot maps petal width to the x-axis and sepal length to the y-axis, with species encoded through distinct SVG symbols. The implementation uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and the `join` operator to create a flexible, configurable chart. The iris data is loaded from a CSV file, and the SVG rendering adapts to the full browser window dimensions.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of Fisher’s Iris dataset, cycling every two seconds between four measured features (petal width, sepal width, petal length, and sepal length). Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles in SVG. The chart is implemented as a reusable function via a closure pattern, allowing dynamic updates by re-calling the plot with a new `xValue`. Data is loaded as CSV via `d3.csv` and parsed into numeric values.

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the penguin dataset, showing the relationship between flipper length and body mass, with each point colored by species (Adelie, Gentoo, and Chinstrap). The visualization is built using D3 v5 within a React framework, rendering to an SVG canvas that fills the browser window. The code uses `d3.csv` to load the data, `d3.scaleLinear` to map the data values to pixel coordinates, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. The scatter plot also encodes bill dimensions through the circle's `rx` and `ry` attributes, and the chart is labeled with a title and axis labels.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length to body mass for individual penguins. Each point is colored by species, with Adelie, Gentoo, and Chinstrap penguins shown in yellow, green, and brown respectively. The code loads CSV data via `d3.csv`, scales positions with `scaleLinear` and `extent`, and renders circles using SVG. Additional axes are drawn with `axisLeft` and `axisBottom`, while the chart includes a title and custom tick font sizes.

Loading thumbnail…

ICE-6:Cost of HBO_max

This bar chart shows the cost of HBO Max’s basic plan in 15 countries, using horizontal rectangles to compare prices. The visualization is built with React and D3 v5, loading data from a CSV via `d3.csv` and rendering as an SVG. It uses `d3.scaleBand` for the country axis, `d3.scaleLinear` for the cost axis, and `d3.max` to set the scale domain.

Loading thumbnail…

Fork of ICE-6:Cost of HBO_max

This visualization shows the cost of HBO Max subscriptions across 15 countries using a horizontal bar chart, with each bar’s length representing the basic monthly fee in local currency. The chart uses React for component management and D3 v5 for data loading and scales, specifically `d3.csv` for fetching the dataset and `scaleBand`/`scaleLinear` for positioning bars and axes. SVG rectangles render the bars, while custom tick marks and labels are drawn manually through D3’s scale methods rather than using axis generators. The data is sourced from a GitHub gist and displayed with a dark blue title and blue gridlines.

Loading thumbnail…

ICE-6:products sales between 2018-2019

This visualization shows product sales by country for the top 15 entries between 2018 and 2019, using a horizontal bar chart rendered as an SVG. The chart uses React state to load CSV data from a GitHub gist via d3.csv, then maps each country to a y-scale band and each product’s basic cost to a linear x-scale. Axis ticks and labels are drawn manually with d3.scaleBand and d3.scaleLinear, while bars are simple SVG rectangles. The code relies on React hooks (useState, useEffect) and d3’s max and format utilities for scaling and tick generation.

Loading thumbnail…

ICE5

This example shows the metadata of a product sales dataset, reporting its size in kilobytes, row count, and column count. It loads CSV data from a remote URL using `d3.csv`, then formats a summary message and displays it on the page via the `textContent` property of a `<pre>` element. The page includes a linked dataset reference and a background image styled through CSS. The visualization relies on D3 v7 for data parsing and formatting, with no chart or graphical rendering present.

Loading thumbnail…

ICE5

This example presents a minimal web page that displays metadata about a product sales dataset. The page shows a title and a pre-formatted text block reporting the dataset’s approximate size in kilobytes, the number of rows, and the number of columns. It loads the CSV file from a remote GitHub gist using D3.js’s `d3.csv` function, then strings together the computed metadata into a plain-text message that is injected into the DOM via `document.getElementById`. The page’s background is set using a CSS rule with a remote SVG image.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example builds a smiling face out of SVG shapes using D3.js, animating the eyebrows up and down in a looping transition. The face includes eyes, a nose, a mouth, teeth, a mustache, and a rotated cigarette, all positioned with static attributes. The code uses D3 selections, `arc` for paths, and chained `transition` calls to move the eyebrow group, demonstrating fundamental DOM manipulation with D3 v5.