manasanimmagadda13

@manasanimmagadda13·14 public vizzes

ICE-8: Visualizing Tree with D3.js

This example shows a family tree as a hierarchical node-link diagram, where each person appears as a circular node and relationships are drawn as straight black links. The tree layout is computed with `d3.stratify` and `d3.tree`, positioning generations vertically with distinct fill colors. Nodes and links are rendered as SVG circles and paths, with transitions animating link drawing from the parent outward and text labels fading in per depth. The code uses `transition().duration()` to stagger animations and defines custom colors per generation depth.

Apr 4, 2022

Loading thumbnail…

ICE-8: Social Network graph with D3.js

This example visualizes a small social network of six people, grouped into three clusters, with weighted links indicating connection strength. The graph uses a force-directed layout via `d3.layout.force` to position nodes, which are rendered as orange circles with blue outlines and labeled with purple text. Links appear as black lines whose stroke width reflects each link’s weight. Nodes are draggable, and the simulation updates positions continuously on each tick. Data comes from a local JSON file, and the visualization is drawn as SVG.

Apr 4, 2022

Loading thumbnail…

ICE-8: Fork of Indian map with D3.js

This visualization displays a map of India with individual states and their borders. Using D3.js version 5 and React, it applies a geoMercator projection via d3.geoPath to render the geographic features as SVG paths. The code loads TopoJSON data from a remote URL, using topojson.feature and topojson.mesh to extract state polygons and interiors. State fill is cyan with gray borders, while internal boundaries appear teal. The map fits within a 960 by 500 pixel viewport using projection.fitExtent.

Apr 4, 2022

Loading thumbnail…

ICE-8: Fork of world map with D3.js

This visualization displays a world map with countries rendered as green filled areas outlined by faint brown borders, all set against a blue oceanic sphere. The map is drawn using an SVG canvas and the D3.js library, specifically leveraging the `geoNaturalEarth1` projection from D3's geo module to transform geographic coordinates. Country boundaries are sourced from the `world-atlas` dataset, fetched via a JSON URL, and processed through the `topojson` package's `feature` function to convert the data into spatial features. The code uses `geoPath` to generate SVG paths for each country, dynamically appending them to the canvas.

Apr 3, 2022

Loading thumbnail…

ICE-7: Fork of Line Chart

This example visualizes the population of India from 1955 to 2020 using a line chart. The chart displays population values on the y-axis and years on the x-axis, with a green line tracing the data trend. The visualization is rendered using D3.v5 within a React framework, leveraging the `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` APIs to construct the axes and path. Data is loaded from a CSV file hosted on GitHub via `d3.csv`.

Mar 28, 2022

Loading thumbnail…

ICE-7: Fork of Area Chart

This area chart displays the population of India from 1955 to 2020, using two layered paths to show the data. The black line chart traces the population trend, while a pink area fill beneath it emphasizes the magnitude of values over time. The visualization is built with D3.js v5, using `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for smooth curves, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file via `d3.csv`, with years parsed as dates and populations as numbers, and rendered as SVG within an HTML page.

Mar 28, 2022

Loading thumbnail…

ICE-7: Fork of Line Chart

This visualization shows automobile sales in India from 1999 to 2012 as a single blue line chart, with year on the x-axis and sales volume on the y-axis. The chart uses React with D3 v5, loading data from a CSV file via `d3.csv` and rendering with SVG. Scales are built with `d3.scaleTime` and `d3.scaleLinear`, while axes are generated using `d3.axisBottom` and `d3.axisLeft`. The line path is created with the `d3.line` generator, and gridlines are drawn via negative tick sizes.

Mar 28, 2022

Loading thumbnail…

ICE:7 Fork of Pie Chart

A pie chart displays the top ten most populous countries in 2020, with each slice sized by population and a legend listing each country alongside its population in millions. The visualization loads CSV data from a GitHub gist via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` assigning a distinct color to each slice. A separate legend group renders colored rectangles and text labels using `d3.select` and data joins, while `d3.format` converts raw numbers into readable millions values.

Mar 28, 2022

Loading thumbnail…

ICE-7:Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairings on the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3.js, it employs a reusable chart API with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Points are colored by species via `scaleOrdinal`, and the SVG circles animate through a `setInterval` loop, with a legend and custom Share Tech font styling.

Mar 28, 2022

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the average rent prices for 25 Moscow metro areas, using horizontal bars scaled linearly by price. It is built with React and D3 v5, using `scaleBand` for the categorical metro names on the y-axis and `scaleLinear` for the numeric rent values on the x-axis. The SVG rendering includes custom grid lines and tick labels generated from D3’s `scaleLinear` ticks. Data is loaded asynchronously from a CSV file via d3.csv, with the first 29 rows selected for display.

Mar 7, 2022

Loading thumbnail…

ICE-5: Shapes of Data - Part II

This example summarizes the top 100 Billboard songs of 2021. It displays a message containing the data size in kilobytes, row count, and column count using a preformatted text block. The visualization fetches a CSV file from a GitHub gist using the `d3.csv` method and processes the result with `d3.csvFormat`. The page also includes a Billboard logo image and styled headers using inline CSS, all rendered within a React framework with D3 v7.

Feb 28, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing CSV data using D3.js version 7. The page displays a message summarizing the dataset’s size in kilobytes, row count, and column count, which is extracted from a CSV file hosted on GitHub Gist. The code calls `d3.csv` to fetch and parse the external data, then uses `d3.csvFormat` to calculate the raw data length. The visualization also includes a decorative SVG illustration (City.svg) embedded in the HTML, with an h1 heading and CSS-styled message container.

Feb 23, 2022

Loading thumbnail…

Fork of homework smiley face

This example displays a cartoon smiley face rendered as a static SVG graphic. The face includes pink circular head, brown stroke outline, two eyes with iris pupils, orange elliptical cheeks, green decorative line eyebrows, and black curved mouth and hair-like strokes. The code uses React to create SVG elements and d3’s `arc` function to generate the mouth path. The rendering approach combines basic SVG shapes (circle, ellipse, line, path) with fixed pixel dimensions (960×500) and hardcoded coordinates for each facial feature.

Feb 20, 2022

Loading thumbnail…

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

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall, creating a playful expression. The example demonstrates fundamental D3.js DOM manipulation by using `select` and `append` to construct circles for the face and eyes, `rect` elements for eyebrows, and an `arc` generator for the mouth. Eyebrow motion is achieved through chained `transition` calls on a group element, shifting its vertical position over two-second intervals. The code uses D3 v5 and relies on SVG attributes for positioning and styling.

Feb 16, 2022