Skip to main content
Log in
P

prashanth yamala

@prashanthyamala·20 public vizzes

Loading thumbnail…

ICE8 - Company's Tree

An animated, interactive tree diagram visualizes the corporate hierarchy of Reliance and its subsidiary firms, with nodes color-coded by type level and links labeled with connection details. Built with D3.js v3 for rendering, the SVG layout supports click-to-expand, zoom, and drag interactions, while jQuery handles DOM manipulation. The data loads from a nested JSON structure, and custom CSS defines node styling, tooltips, and link highlighting for enhanced readability.

Jul 10, 2022
Loading thumbnail…

ICE 8 (World Map)

This visualization displays a world map using a natural Earth projection, with each country rendered as a distinct SVG path. The map is initially presented as a grey sphere with countries shown in their default color, and hovering over a country highlights it in blue with a white outline. The code uses D3.js v5 and the topojson library to fetch geospatial data from the world-atlas dataset and convert it into geographic features via `d3.geoPath` and `projection`. The rendering approach leverages the `geoNaturalEarth1` projection for a visually balanced earth representation.

Jul 10, 2022
Loading thumbnail…

social Network graphic

This interactive social network graphic visualizes the relationships among ten individuals grouped into four clusters. The visualization uses a force-directed layout, where nodes are connected by weighted links displayed as blue lines. Node labels show names, and circles represent each person. The example employs D3.js, specifically the `d3.layout.force` API for physics-based positioning and drag-and-drop interaction. It loads node and link data from `graphFile.json` and renders the network as SVG elements.

Jul 10, 2022
Loading thumbnail…

Mexico Map

A choropleth-style map of Mexico displays the country's regions as filled polygons, with an overlaid graticule. The visualization uses d3.geoMercator for projection and d3.geoPath to render both the geographic features from a TopoJSON source and the graticule lines. The React-based SVG rendering uses the d3 community module topojson's `feature` function to convert the raw data. The map is styled with CSS, and hovering over a region changes its stroke color, though no tooltip data is shown.

Jul 10, 2022
Loading thumbnail…

3D Bar Chart for bonus ICE

This example displays retail sales data as an interactive 3D bar chart, showing product price, quantity, and tax values. The visualization uses the `d3-x3d` library to render bars in X3D, with D3 v5 handling the data processing and CSV loading from a GitHub-hosted file. The chart is built as a multi-series bar chart, where each product corresponds to a group of bars. The code initializes the chart with random data before replacing it with the actual retail sales dataset.

Jul 6, 2022
Loading thumbnail…

3D Scatter Plot for bonus

This 3D scatter plot visualizes retail sales data by plotting price, quantity, and rating in one trace, and price, quantity, and tax in a second trace. Two sets of markers are rendered in three-dimensional space using Plotly’s `scatter3d` type. The code loads CSV data with D3’s `d3.csv` and unpacks columns into arrays, then constructs the traces with custom marker styling, opacity, and line settings. The chart is displayed inside a div using `Plotly.newPlot` with a zero-margin layout.

Jul 6, 2022
Loading thumbnail…

Reusable D3 Scatter

This example presents a reusable scatter plot that visualizes retail sales data from a supermarket dataset. The plot animates by cycling between two variables—Quantity and Price—on the x-axis every four seconds, while the y-axis remains Price. Data points are colored by product category (blue for Clothing, purple for Gadgets, orange for Appliances). Built using D3 v6, it leverages scaleLinear, axisLeft, axisBottom, and csv loading, with SVG circles for rendering and a setInterval-driven animation.

Jul 3, 2022
Loading thumbnail…

Line_chart_ice7

This line chart displays product sales quantities over time from 2011 to 2020, with the x-axis representing the date sold and the y-axis showing quantity. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render the line via `d3.line` with SVG paths. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while scales (`d3.scaleTime`, `d3.scaleLinear`) map data to the plot area. A blue stroke line connects data points across the time span.

Jul 2, 2022
Loading thumbnail…

Pie_chart_ice_7

This pie chart displays the top 10 company valuations in billions from a CSV dataset. The chart uses a D3.js v5 SVG rendering, with each slice colored via a custom `sectionColors` array and labeled with its value using `d3.pie` and `d3.arc`. A legend to the right maps company names to their respective colors and values. The data is fetched asynchronously from a GitHub gist, and the visualization is generated using `d3.scaleOrdinal` for color assignment and `d3.arc().centroid()` for text placement, all within an HTML page styled with CSS.

Jul 2, 2022
Loading thumbnail…

Area_Chart_ice_7

This area chart by prashanthyamala visualizes product sales quantities from 2011 to 2020. Built with D3.js v5, it renders an SVG with a smooth basis curve for both the line and the filled area beneath it, which is colored orange. The chart uses scaleTime and scaleLinear for its axes, with axisLeft and axisBottom for ticks and labels. Data is loaded from a remote CSV file and parsed using d3.timeParse.

Jul 2, 2022
Loading thumbnail…

resuable scatter plot

This interactive scatter plot visualizes supermarket sales data, plotting Quantity on the x-axis and Price on the y-axis, with points colored by product list category. It demonstrates a reusable chart pattern, using d3.csv to load the dataset and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render axes. An animated loop using setInterval toggles the x-value mapping between Quantity and Price every two seconds, redrawing the chart with smooth SVG transitions. The code follows the “Towards Reusable Charts” methodology, exposing configuration methods like .width, .height, .data, and .radius for flexible customization.

Jul 1, 2022
Loading thumbnail…

ice-7 resuable scatter plot

This example visualizes the Iris dataset, plotting petal length against petal width. Each point is colored by species (setosa, versicolor, or virginica) using a simple switch statement, and the circle’s horizontal and vertical radii are set to the sepal length and width values, respectively. Built with React and D3 v6, it uses the `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, create scales, and render SVG axes and circles. The chart fills the browser window, with large tick text and axis labels for clarity.

Jul 1, 2022
Loading thumbnail…

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

This bar chart displays the top 10 most valuable unicorn companies, with company names on the y-axis and valuation in billions on the x-axis. The visualization is built using React and D3.js, where React manages the component state and rendering of SVG elements, while D3’s `scaleBand` and `scaleLinear` handle the chart’s scales and tick generation. Data is loaded asynchronously from a CSV file via `d3.csv`, filtered to the top 10 entries, and rendered as blue rectangles.

Jun 25, 2022
Loading thumbnail…

Scatter Plot for IRIS dataset

This example visualizes the Iris dataset using a scatter plot of petal length versus petal width, colored by species. It uses D3.js v6 with the `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to fetch data, scale axes, and render the SVG. The plot also encodes sepal dimensions as `rx` and `ry` attributes on circles, though the rendering effect is not configured. Data is loaded from a remote GitHub Gist via D3's `csv` function.

Jun 25, 2022
Loading thumbnail…

ICE-4 CSCE 5320

This example displays metadata about a 2022 football teams dataset, including file size, row count, and column count, alongside a static SVG illustration of a football play scene. It loads CSV data from a GitHub gist using D3 v7’s `d3.csv` and formats the dataset with `d3.csvFormat` to compute information presented in a `<pre>` block. The page is built with plain HTML, CSS, and JavaScript, with the SVG chart drawn manually and styled inline.

Jun 22, 2022
Loading thumbnail…

ICE-4 CSCE 5320

This example visualizes a scatter plot comparing petal length and sepal length from the Iris dataset, using a custom D3 module. The visualization is built with React and renders as an SVG, leveraging D3 v7 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded from a remote CSV via `d3.csv`, and the chart is configured with a custom `scatterPlot` component that adjusts its dimensions. The code also includes a brief message displaying dataset size in kilobytes and row/column counts.

Jun 21, 2022
Loading thumbnail…

Fork of Fork of Smiley Face Part III

This interactive smiley face graphic uses React to render SVG elements whose positions and shapes are calculated with D3.js arc generators. The face features animated eyebrows, eyes, a red nose, and a mouth built from overlapping arc paths, all arranged around a central yellow circle. Lines and circles create the facial details, with transform translations positioning the arcs. The example demonstrates how to integrate React's declarative component model with D3's geometry utilities to produce a static vector illustration.

Jun 17, 2022
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face rendered in SVG with React and D3. The code draws a yellow circular head, eyes with highlights, eyebrows, and a red mouth using D3’s `arc()` generator for curved paths. Additional lines and small circles are positioned via JSX coordinates. The visualization uses React 16.9 and D3 v5, with all shapes transformed around the center point.

Jun 17, 2022
Loading thumbnail…

Fork of Danny Phantom Face

This example renders a stylized portrait of Danny Phantom as an SVG composed entirely of D3-generated shapes and React components. The face, eyes, irises, pupils, eyebrows, nose, mouth, and spiky hair are all constructed from circles, rectangles, polylines, and polygons, with positions and sizes defined by constants. Using React’s declarative JSX, the code maps these shapes to SVG elements, while a D3 arc generator creates the mouth path. The face fills the entire browser viewport, centered dynamically based on window dimensions.

Jun 17, 2022
Loading thumbnail…

Fork of homework smiley face

This example shows a stylized smiley face built from SVG shapes, including a circular head, eyes with green pupils, a purple nose, and a curved mouth rendered as a D3 arc path. It also adds decorative lines for eyebrows, eyelashes, and hair-like strokes. The visualization uses React to define the component structure and D3 v7’s `arc` generator to compute the mouth path, with all elements drawn using SVG primitives like `circle`, `ellipse`, and `line` within a single transformed group. The rendering is fully static, with no interaction or data binding.

Jun 17, 2022