jayanthamol99

@jayanthamol99·18 public vizzes

ICE-8(Family Tree)

This family tree visualization presents a hierarchical genealogy using an interactive node-link diagram. Data loaded from `data.json` via `d3.json` populates the tree structure, which is rendered as SVG rectangles and labels. Implemented with `d3.layout.tree`, the visualization uses colored nodes (based on `type`), animated transitions on click, and includes zoom and drag capabilities, with drop shadows and tooltips to enhance the presentation.

Apr 12, 2023

Loading thumbnail…

ICE-8(Network Chart)

This network chart visualizes a small graph of seven people (e.g., Uday, Jayanth, Vishwa) and their weighted connections, rendered as red circular nodes and black links. Built with D3.js v4, it uses `d3.layout.force()` to apply a force-directed layout (with gravity, distance, and charge parameters) and enables node dragging via `force.drag`. Node labels display names, and link thickness reflects each edge’s weight from `graphFile.json`. The SVG canvas is 900×670, with styles defined in CSS.

Apr 12, 2023

Loading thumbnail…

ICE-8(Europe)

This example displays a choropleth-style map of Europe, with each country rendered as a light blue filled polygon outlined in black. The visualization uses the D3.js library's `d3.geoMercator` projection to transform geographic coordinates, and `d3.geoPath` to generate SVG path data from GeoJSON features. The geographic data is fetched from a remote URL using `d3.json`. The entire rendering occurs in an SVG element, and the map is built using React for the page structure while D3 handles the drawing.

Apr 12, 2023

Loading thumbnail…

ICE-8(Europe)

This example displays a map of Europe using a Mercator projection, where individual countries are filled with a muted red-brown color and their internal administrative boundaries are highlighted in cyan. The map is drawn with SVG paths generated from TopoJSON data using D3’s `geoPath` and `geoMercator` functions within a React component. The geographic data for the countries comes from an ArcGIS-hosted source via a gist URL, processed with the `topojson` library to extract features and interior mesh lines. The visualization is rendered at 960 by 500 pixels, with the projection fitted to the canvas extent.

Apr 12, 2023

Loading thumbnail…

ICE-8(World Map)

This interactive world map displays country boundaries using an equirectangular projection, rendered as SVG paths. The visualization loads geographic data from a TopoJSON world-atlas file and converts it to GeoJSON features via the `topojson.feature` API. Countries are drawn with `d3.geoPath` and respond to hover by changing fill color through CSS. The sphere background uses a blue fill, while countries appear in dark green with black strokes, creating clear visual separation between landmasses and ocean.

Apr 12, 2023

Loading thumbnail…

ICE-8 WORLD MAP

This interactive world map uses the Eckert III projection to display landmasses and graticules. Built with React and D3’s geo utilities, it loads country topology from the world-atlas package, rendering SVG paths for land, interiors (borders between countries), and a graticule grid. The code employs `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to project the data, with styling defined in CSS for a pastel color scheme. The map updates dynamically after fetching JSON data via `d3.json`.

Apr 12, 2023

Loading thumbnail…

3D Scatter

This example displays a 3D scatter plot of actors and their Grammy award counts for 2021 and 2022. The visualization uses a green trace and a red trace, both plotting actors on the x-axis, 2022 counts on the y-axis, and 2021 counts on the z-axis, with markers sized at 12 and opacity set to 0.8. It loads CSV data from a GitHub gist using the D3 `d3.csv` function, then renders the plot with Plotly’s `scatter3d` trace type and `Plotly.newPlot` into an HTML `div`. The layout removes margins for a clean presentation.

Apr 3, 2023

Loading thumbnail…

3D Bar Chart

This example visualizes Grammy Award counts for celebrities from 2017 to 2022 using a 3D multi-series bar chart. The chart displays each actor’s annual award totals as vertical bars arranged in a three-dimensional space, rendered with the D3-x3d library and X3DOM for WebGL output. Data is loaded asynchronously from a CSV file using d3.csv and parsed into year-specific values. The visualization uses d3.x3d.chart.barChartMultiSeries to bind the dataset to the chart holder, with axes and scales from D3 v5 providing the spatial mapping.

Apr 3, 2023

Loading thumbnail…

3D Bar Chart

This example visualizes Tollywood actor awards data from 2017 to 2022 as a 3D bar chart, with each country’s awards across six years grouped by year. The code uses the d3-x3d library to render the scene, leveraging D3 v5 for data loading and scales, while x3dom handles the 3D output. Data is fetched from a CSV file via d3.csv and parsed into a multi-series format before being passed to the barChartMultiSeries component. The chart is embedded in an HTML page with a fixed-height container.

Mar 31, 2023

Loading thumbnail…

ICE-7 Pie Chart

This pie chart displays the top 10 countries with the most COVID-19 deaths, with each slice’s color mapped from a categorical scale and labeled in a legend showing country names and death totals in thousands. The visualization loads CSV data from a GitHub gist using d3.csv, then uses d3.pie and d3.arc to generate SVG path segments. d3.scaleOrdinal assigns a fixed color palette, while the legend is built manually with appended SVG rect and text elements. The chart is rendered entirely with d3.v5 and SVG.

Mar 29, 2023

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes YouTube's annual user growth from 2006 to 2012, using a smooth, curved line to connect yearly data points. The area beneath the line is filled, emphasizing the cumulative increase in users over the seven-year period. The visualization is built with D3 v5, employing `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smooth interpolation, and `axisLeft`/`axisBottom` for labeled axes. Data is loaded from a CSV via `csv`, with years and user counts parsed as numbers, while the SVG output includes green axis labels and an orange grid.

Mar 29, 2023

Loading thumbnail…

Line chart Youtube Users

This line chart visualizes YouTube annual users from 2006 to 2012, with the x-axis representing time (parsed as dates) and the y-axis showing user counts. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to render an SVG path, with margins, tick marks, and axis labels. Data is loaded from a CSV file via `d3.csv` from a GitHub gist, and the chart displays a red stroke line with styled tick text and a title.

Mar 29, 2023

Loading thumbnail…

ICE 7 Reuse Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, with points colored by species—virginica in green, versicolor in orange, and setosa in blue. The chart cycles through different attribute pairs every 10 seconds, alternating between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, it uses scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbols to render distinct shapes for each species. The reusable chart pattern supports dynamic updates through setInterval.

Mar 24, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (red, green, or blue). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale scales, and render axes. Circles are drawn using SVG selections with `join('circle')`, positioned via `cx` and `cy` attributes, and colored through a custom switch statement. The chart fills the browser window, with axis labels added as SVG text elements.

Mar 22, 2023

Loading thumbnail…

Scatter Plot Data

This scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, petal width on the y-axis, and coloring each point by species (green, purple, or red). The code uses D3 v6 with `d3.csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` to render SVG circles based on data from a GitHub-hosted CSV file. It also sets custom font sizes for tick text and includes axis labels for both dimensions.

Mar 16, 2023

Loading thumbnail…

ICE-6.js

This bar chart displays COVID-19 death counts by country, with a horizontal layout where each bar's length is proportional to the number of deaths. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map the CSV data to an SVG canvas. A margin-based coordinate system positions the axes and cyan-filled rectangles, while the data is loaded via `d3.csv` and rendered as a static, non-interactive graphic.

Mar 16, 2023

Loading thumbnail…

ICE-5(11528292)

This visualization displays the top 250 movies from IMDb, showing the dataset’s size and structure. A static SVG graphic featuring a star and a red circle serves as a decorative header, while the main content presents the data’s total size in kilobytes, row count, and column count. The code loads the CSV dataset using `d3.csv` and formats the file size with `d3.csvFormat`, then updates the text content of an HTML element using the Document Object Model. The page is styled with basic CSS and includes an embedded YouTube video in the README.

Mar 8, 2023

Loading thumbnail…

Buddha-ICE-4

A generative React visualization renders a decorative Buddha silhouette from an embedded SVG path, layered over a dense field of 8,000 semi-transparent circles with randomized positions and colors. The circles are produced by nested array mappings over a fixed numeric sequence, using JavaScript’s `Math.random()` to vary their coordinates, fills, and opacity. The Buddha path is drawn via a `<path>` element within a transformed `<g>` group, while all shapes are output as SVG through React’s standard component model. The composition combines procedural noise with a static religious icon.

Mar 2, 2023