akhilgupta11

@akhilgupta11·14 public vizzes

MY ICE To Create a Country map

This example renders a choropleth-style map of the United States using the geoAlbersUsaTerritories projection from the geo-albers-usa-territories library, with geographic features drawn as SVG paths via d3.geoPath. The map displays state landmasses in red and state boundaries in yellow using the us-atlas TopoJSON dataset. Built with React hooks, the code fetches the TopoJSON file, converts it to GeoJSON using topojson.feature and topojson.mesh, and renders the result through React components, showing both land and interior boundaries.

Mar 28, 2023

Loading thumbnail…

ICE ON CREATING A WORLD MAP

This example visualizes a world map with countries rendered as yellow shapes on a red spherical backdrop, using D3.js (d3.v5) to project geographic data. The visualization employs `geoEquirectangular` for map projection and `geoPath` to generate the path data, while TopoJSON’s `feature` method converts country boundaries from the `world-atlas` JSON source into GeoJSON features. The map is drawn as an SVG graphic, with CSS hover effects that change country fills to green, and the sphere is styled via the `.sphere` class.

Mar 27, 2023

Loading thumbnail…

ICE ON CREATING TREE WITH DIFFERENT SHAPE FOR DIFFERENT GENERATIONS

The visualization displays a hierarchical tree of plant categories, with nodes rendered as different shaped symbols based on their numeric value. The root and branch nodes use cross shapes, while leaf nodes appear as diamonds. The code uses D3.js version 3.5 to generate the tree layout, with `d3.layout.tree` and `d3.svg.diagonal` creating the node positions and linking paths. SVG symbols are drawn using `d3.svg.symbol` with size and type determined by each node’s `value` property. Link colors correspond to each target node’s `level` attribute, using green and red strokes.

Mar 25, 2023

Loading thumbnail…

my PLANTS tree

This interactive tree diagram visualizes a hierarchical classification of plants, with a root node labeled “PLANTS” branching into categories like FLOWERS, CACTUS, VEGETABLES, and JADES, each with two child species. Users can click nodes to collapse or expand subtrees, with smooth animated transitions. Built with D3.js v3, it uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute positions and draw curved links, rendering nodes as circles and text in an SVG. The dataset is hardcoded as a JavaScript object in the HTML file, with styling defined in embedded CSS.

Mar 25, 2023

Loading thumbnail…

ICE Social Network Graph

This interactive network graph visualizes social connections among six individuals, using a force-directed layout. It shows each person as a colored circle with their name, connected by lines representing relationships. The visualization is built with React and D3 v6, employing `d3.forceSimulation` for physics-based layout, which includes link, charge, collision, and center forces. Users can drag nodes to rearrange the network, and hovering highlights connections. The data, from a JSON file, groups individuals and defines pairwise links, all rendered as SVG elements.

Mar 25, 2023

Loading thumbnail…

ICE 7 - REUSABLE SCATTER PLOT - WITH DIFFERENT SHAPES - IRIS DATASET

This interactive visualization presents the classic Iris dataset as a scatter plot, with each flower species rendered using a distinct D3 symbol shape. Data points plot petal width against sepal length, and the x-axis automatically cycles through the four measurement columns every 15 seconds, updating the visualization with animation. Built as a reusable React component, it leverages D3 scales (scaleLinear, scaleOrdinal), axes (axisLeft, axisBottom), and symbol generators to create the marks. The SVG rendering updates dynamically as the axis changes, offering a live exploration of relationships within the dataset.

Mar 11, 2023

Loading thumbnail…

Chart Area for ICE 7

This example visualizes student GPA versus time spent studying, using a smooth area chart with a red line and blue fill to emphasize the trend in the data. The visualization is built with React and D3 v5, employing `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smooth paths, and SVG rendering. Axis labels are styled via CSS, and the data is loaded from an external CSV using `csv`, then parsed for GPA values.

Mar 11, 2023

Loading thumbnail…

Line Chart FOR TIME AND MARKS

This visualization displays a line chart tracking GPA against time spent studying, with hours on the x-axis and GPA (out of 5) on the y-axis. The chart uses d3.scaleTime for the temporal axis, d3.scaleLinear for the GPA axis, and d3.line to generate the path. Data is loaded via d3.csv from an external gist, parsed with d3.timeParse, and rendered as an SVG with gridlines, axis labels, and a green line. The code also leverages d3.axisBottom and d3.axisLeft for tick marks.

Mar 11, 2023

Loading thumbnail…

ICE - 7 Pie Chart FOR MARkS

This visualization displays a pie chart showing how study hours relate to GPA marks, with each slice representing a GPA value and colored segments corresponding to study time. The chart uses d3.pie and d3.arc to generate the pie geometry and labels, while d3.scaleOrdinal maps section colors. Data is loaded asynchronously from a CSV URL using d3.csv, and the SVG rendering includes a legend showing both study hours and GPA values for each slice, with text labels positioned using the arc generator’s centroid method.

Mar 11, 2023

Loading thumbnail…

Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis and bill length on the y-axis. Colored circles represent three penguin species (Adelie, Gentoo, and Chinstrap), with each point's radius and shape also encoding bill dimensions. The visualization uses D3 v5's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data, map scales, and render SVG axes. Circles are appended via D3 selections, with species-based color mapping defined through a switch statement. The chart includes labeled axes and a title, rendered in a full-window SVG using React-free vanilla JavaScript.

Mar 5, 2023

Loading thumbnail…

ICE-6 Creating Marks And Channels

This bar chart visualizes the relationship between time invested in studying and marks scored for 15 students, using a horizontal bar layout. The chart maps time spent studying to the y-axis against a blue horizontal rectangle for each student, whose width encodes the marks obtained. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.max` to determine the scale domain. The SVG rendering includes custom axis lines and labels, with data sourced from a CSV file.

Mar 4, 2023

Loading thumbnail…

DATA_SUMMARY_ICE_5_SDV

This example displays a web page that summarizes the metadata of a student marks dataset. After loading a CSV file from a GitHub gist, it computes and displays the file size in kilobytes, the number of rows, and the number of columns. The presentation uses styled HTML elements with a background SVG image and custom fonts. The page uses D3 v7’s `d3.csv` and `d3.csvFormat` methods within a React project to fetch and analyze the data.

Feb 26, 2023

Loading thumbnail…

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

This example demonstrates how to construct a smiley face using fundamental D3.js v5 DOM manipulation with SVG elements. The code builds a red circular head with eyes, a nose, ears, eyebrows, a mouth, and teeth through individual shape selections using `d3.select` and SVG attribute chaining. It uses the `d3.arc` generator to create the nose and mouth paths, while static SVG elements like circles and rectangles are positioned manually. The face is centered via a group transform, and the eyebrows are rotated to give the face an expressive, animated look.

Feb 23, 2023

Loading thumbnail…

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

A smiling face is drawn with SVG shapes, including red circular head, eyes, and a mouth created with the d3.arc path generator. The example demonstrates basic D3.js selection and DOM manipulation, using d3.select and chained .append calls to build the hierarchy. Eyebrows animate through a transition sequence, moving up and down via attribute tweening on the eyebrow group's transform. Both the head and eyes use simple shape attributes, while the face layout is centered using dynamic width and height calculations from the SVG element.

Feb 19, 2023