Prathyusha Jampala

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

D3.js

trial

Tree chart for cat species

This tree chart displays the taxonomic hierarchy of cat species, starting from the Felidae family and branching into subfamilies like Pantherinae and Felinae, then to genera and individual species. The visualization uses a dendrogram layout with curved bezier links connecting nodes, where each node is color-coded by a `level` property and labeled with the species name. The implementation relies on D3.js v5 functions including `d3.hierarchy` and `d3.tree` to compute node positions, while the dataset is defined inline as a JavaScript object with nested `children` arrays. SVG is the rendering mode, with node circles and link paths styled via CSS classes.

Tree chart for cat species

This tree chart displays the taxonomic hierarchy of cat species, starting from the Felidae family and branching into subfamilies, genera, and individual species like lions and cheetahs. The data is defined as a JavaScript object with nested children, which is processed using `d3.hierarchy` and `d3.tree` to compute node positions. Links are rendered as curved SVG paths with strokes colored by each node's specified level property, while nodes and labels are drawn as SVG groups.

visualizing the China map

This example visualizes the country map of China using a D3.js v4 geo projection. The map renders administrative regions as SVG paths, colored green with aquamarine strokes, beneath a purple header. It uses topojson.presimplify and topojson.feature to process geographic data from a GitHub-hosted JSON file. The visualization applies a d3.geoMercator projection fitted to the SVG dimensions via d3.geoPath, and it dynamically redraws the map on window resize using the draw function. The map’s boundaries are simplified based on a threshold within the d3.geoTransform, though the threshold remains at zero, showing all geographic details. The code relies on d3.select, d3.json, and d3.geoTransform to manage the SVG element and projection.

My Social Network Visualization

This example presents a social network as an interactive node-link diagram, where red circles represent individuals and weighted red lines show connections between them. Seven people, including Prathyusha, Kavi, and Teja, are arranged within a force-directed layout that positions related users closer together. The visualization uses the D3.js v4 library with the older `d3.layout.force` API to simulate physical forces of gravity, charge, and link distance, enabling smooth movement as nodes are dragged. Node labels appear in green, and the diagram is rendered as an SVG, with data loaded from an external JSON file containing node names and link weights.

Task1:ICE-8 world map

This visualization displays a world map using a natural Earth projection and renders each country as a filled green path with an aquamarine stroke. The code loads GeoJSON data from a GitHub gist, converts it using `topojson.feature`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1`. A sky-blue sphere background is added via `pathGenerator` for the globe. The map uses SVG rendering and is styled through CSS classes for the country fills and stroke properties.

ICE - 7(Pie Chart)

This visualization uses a pie chart to display the number of weeks that top Billboard artists have charted, with each slice representing an artist. The chart is rendered as an SVG using D3.js version 5, with the `d3.pie` API calculating arc segments and `d3.arc` generating the paths. A legend lists each artist alongside a color swatch and the corresponding week count. The data is loaded asynchronously from a CSV file hosted on GitHub using `d3.csv`. The code uses a custom ordinal color scale to assign distinct colors to each artist’s slice.

Fork of ICE-7 Reusable scatter plot with different symbol

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length for three species using distinct D3 symbols and colors. Built as a reusable component, it leverages `scaleLinear` for axes, `scaleOrdinal` for symbol and color mapping, and `symbol` generators to render SVG paths. The chart updates to fill the window, with axes drawn via `axisBottom` and `axisLeft`. Data loads from a CSV URL and is parsed with numeric coercion, demonstrating D3’s data-joining workflow with `.join()` and configuration via getter-setter methods.

ICE-7(Area)

This area chart visualizes Taylor Swift listening trends on Spotify during 2001, with months on the x-axis and hours of listening on the y-axis. The pink filled area, generated using d3.area with a curveBasis interpolation, shows the distribution of listening hours across the year. The visualization uses d3.scaleTime, d3.scaleLinear, axisBottom, and axisLeft to render axes with blue labels, while the data is loaded from a CSV file via d3.csv and rendered as SVG with React.

ICE-7(Line Chart)

This line chart shows Taylor Swift’s monthly listening hours on Spotify for the year 2001, with time on the x-axis and hours on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for tick marks, and a d3.line generator to draw the path. Data is loaded from a CSV file via d3.csv, with margins and axis labels styled through CSS. The SVG rendering is driven by React, with the chart’s title and gridlines included.

ICE-7(Line Chart)

This visualization shows electronic sales in India from 2009 to 2022 as a line chart. The code uses D3 v5 APIs including `scaleLinear`, `scaleTime`, `line`, `axisLeft`, and `axisBottom` to render the SVG path representing the sales trend over time. Data is loaded from a CSV file hosted on GitHub, with year values converted to date objects and sales figures parsed as numbers. The chart includes labeled axes, a title, and gridlines, with styling applied via an external CSS file.

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length for individual flowers. The data comes from a CSV file loaded via `d3.csv`, and each species is represented by a distinct symbol using `d3.scaleOrdinal` and the `d3.symbol` API. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while the reusable `scatterPlot` function handles the layout and rendering. The SVG output is sized to the full browser window, with axes and ticks styled via CSS. The plot is built with D3 v6 and focuses on comparing species distributions across two measured traits.

Penguin Data set scatter Plot

This scatter plot visualizes the Penguin Data Set, mapping flipper length to body mass for individual penguins. Each point’s color encodes the penguin species—Adelie, Gentoo, or Chinstrap—using a manual color scale. The axes are labeled to indicate the measured variables. Built with D3 v5 and React, the visualization uses `d3.csv` to load the data and `d3.scaleLinear` to project values. It renders circles as SVG marks, while `axisLeft` and `axisBottom` generate the corresponding axis ticks.

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

This example visualizes the top 15 Spotify songs from 2010-2019 as a horizontal bar chart, displaying danceability scores. The chart uses a pink background with purple accents and includes axis tick marks and labels. Built with React and D3 v5, the code leverages `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and renders SVG rectangles as marks. Data comes from a gist-hosted CSV file containing Spotify track metadata.

Fork of ICE5

This example displays metadata about a dataset of top Spotify songs from 2010–2019, including the file size, number of rows, and columns, in a text message on the page. It uses D3 v7's `d3.csv` and `d3.csvFormat` to load and measure the CSV file from a GitHub Gist, then updates the DOM via `document.getElementById` to show the computed statistics. The page also incorporates a custom CSS background image and Aquamarine background color, with the data link presented as a hyperlink.

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

This animated SVG smiley face demonstrates fundamental DOM manipulation with D3.js. The visualization uses D3's selection and append methods to construct geometric shapes—a pink circle head, two black eyes, rectangular eyebrows, and an arc-based mouth—all centered within an SVG canvas. The eyebrows perform a continuous up-and-down motion through chained `transition().duration(2000)` calls that alternate between two vertical positions. The code relies on D3 v5 utilities including `select`, `arc`, and the transition API to create the looping animation effect.

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

A yellow SVG face with pink cheeks, eyes, a nose, eyebrows, and a toothy smile is built through fundamental DOM manipulation in D3.js. The eyebrows animate up and down using chained `transition().duration()` calls on a group element. The face is composed of SVG primitives like `circle`, `rect`, and `path`, with the mouth and nose generated using the `d3.arc()` shape generator. The page loads D3 v5 from a CDN and renders entirely with SVG and animation.

Fork of Cat smiley

A stylized cat smiley face rendered as an SVG using React and D3 v7. The face features pink circular head, red eyes with black pupils, orange ear shapes, and a black mouth arc created with D3's `arc` generator. Additional decorative lines and white iris arcs are positioned via SVG transforms. The visualization is hardcoded with fixed coordinates and dimensions, with no external data source.

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including circles for eyes, rectangular eyebrows, and an arc-based mouth and nose. The eyebrows animate upward and downward using chained `transition()` and `.attr()` calls, creating a subtle moving expression. The code uses D3 v5’s `select` and `arc` utilities, with the entire face centered on an SVG canvas and rendered in pink and yellow. The animation runs once on page load, with no data source or user interaction.

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

A smiling face rendered with SVG shapes uses D3.js to animate its eyebrows. The code builds the face from circles, rectangles, and an arc path, then applies chained transitions with `transition.attr` to move the eyebrows up and down. The example demonstrates fundamental DOM manipulation with D3's selection and arc methods, showing how to construct and animate a basic graphic using d3.v5.

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

This example animates a cartoon smiley face, with its eyebrows repeatedly moving up and down over a two-second cycle. Built using D3.js version 7, it draws the face with SVG shapes, including a yellow circle for the head, black circles for the eyes, and a path for the mouth. The animation relies on D3's `.transition().duration()` method to tween the eyebrow group's `transform` attribute, while the mouth is generated using D3's `arc()` generator. The code demonstrates fundamental DOM manipulation and selection via D3's `select` and `append` functions.