R

rayavarapulokesh3@gmail.com

@loki339·17 public vizzes

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal blank canvas that immediately clears and refreshes its visual state when the underlying code changes, leveraging hot reloading to visualize the update cycle. It uses a plain SVG element with no data source or marks, but the rendering approach relies on the code’s lifecycle hooks to wipe prior content. The implementation uses `d3.select` and `d3.selectAll` to manage elements, with the page’s hot-reload mechanism triggering a full redraw. The example serves primarily as a development template for testing how alterations propagate to the live visualization.

Loading thumbnail…

Energy DashBoard

This dashboard visualizes global energy trends across multiple metrics, including renewable energy share, electricity access, fossil vs. renewable proportion, and GDP versus energy consumption per capita for selected countries. It features four synchronized D3.js v7 SVG charts—a line chart, bar chart, pie chart, and scatter plot—with a dropdown menu for country selection. The visualization uses d3.csv to load data and d3.timeParse for year formatting, while tooltips provide interactive detail on hover. Each chart includes styled titles and axis labels, and the pie chart uses d3's arc generator to display proportional energy sources.

Loading thumbnail…

Activity7_q2_lokesh

This area chart tracks website visits across the months of 2023, using a filled steel-blue path to emphasize volume over time. It loads comma-separated data from a remote CSV file, converts the Visits field to numbers, and renders an SVG with D3 v7. The implementation uses `d3.scaleBand` for the monthly categories, `d3.scaleLinear` for the visit counts, and `d3.area` to generate the path. Axes are produced with `d3.axisBottom` and `d3.axisLeft`, with labeled captions for Month and Visits.

Loading thumbnail…

Activity7_q1_lokesh

This pie chart shows the percentage distribution of programming language usage among developers. The visualization uses D3 v5 (d3.pie, d3.arc, d3.scaleOrdinal) to compute and render the pie slices as SVG paths, with each slice labeled by its percentage. Data is loaded asynchronously from a raw GitHub CSV file using d3.csv. A legend on the right maps each language to its corresponding pie slice color, using various named CSS colors. Both the pie segments and legend are generated procedurally from the same dataset.

Loading thumbnail…

Activity7-Question1-Lokesh

This pie chart displays the proportional usage of different programming languages using arcs sized by percentage from a CSV file. The visualization loads external data via `d3.csv`, applies the `d3.pie` layout to compute angles, and renders slices with `d3.arc` using an SVG `path` element. Each slice’s color is assigned through a `d3.scaleOrdinal` with the `d3.schemeCategory10` palette, based on the index of the data points. The chart is drawn within a fixed 500x500 SVG container.

Loading thumbnail…

Activity6_Task4

This visualization shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble is positioned by horsepower on the x-axis and torque on the y-axis, while its radius and color encode highway MPG using d3.scaleLinear and d3.scaleOrdinal with d3.interpolateTurbo. A tooltip displays the car make on hover. The chart is rendered with SVG in D3 v7, reading data from a CSV file, and includes a legend for MPG and car makes.

Loading thumbnail…

Lokesh Question 1.1

This example shows a horizontal bar chart ranking the populations of ten countries for the year 2000. The bars are sorted by country name, with population values scaled linearly along the x-axis and formatted in billions. The visualization uses React to render SVG elements, with D3 v5 providing the scales (`scaleBand`, `scaleLinear`), axis components, and CSV data loading via `d3.csv`. The underlying data comes from the `Activity6_Population.csv` file, and hovering over each bar reveals a tooltip with the formatted population value.

Loading thumbnail…

Lokesh Question 1.2

This example shows a horizontal bar chart of the populations of 20 countries in 2010, with each bar labeled by country name and the x-axis formatted in billions. The visualization uses React components to render SVG rects for each bar, with axes generated from d3.scaleBand and d3.scaleLinear. Data is loaded asynchronously from a CSV file via d3.csv, and the bars include a native SVG <title> element for tooltips. The styling uses a green fill for bars and blue tick lines.

Loading thumbnail…

Lokesh Question 2

This example shows how iPhone 14 ratings vary across age groups, using a horizontal stacked bar chart where each bar represents an age cohort and segments show the proportion of ratings in five performance bands. The visualization uses D3 v7 to load comma-separated data, apply a d3.stack layout, and render SVG rectangles. A d3.scaleBand positions age groups along the vertical axis, while a d3.scaleLinear maps percentage values horizontally. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment via formatted text.

Loading thumbnail…

Question 4 Lokesh

This bubble chart visualizes the correlation between quantity sold, price per unit, and revenue for a dataset of 20 fruits. Each circle’s position encodes quantity sold (x-axis) and price per unit (y-axis), while its size and color represent revenue and fruit type, respectively. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and includes interactive tooltips on mouseover. A legend communicates revenue scaling, and the data is loaded from a CSV file via `d3.csv`.

Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis while distinguishing species through different symbols. The chart uses D3 v7’s `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom legend module. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, with axes rendered using `axisLeft` and `axisBottom`. The visualization updates dynamically as the data arrives, demonstrating categorical shape encoding for multivariate comparison.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x- and y-axes while encoding species with color (skyblue, lightgreen, orange). The plot also encodes sepal length and width as the horizontal and vertical radii of each circular mark. The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale data, draw axes, and render circles. A legend distinguishes the three species. The SVG renders directly to the browser window, sized to the viewport.

Loading thumbnail…

Lokesh Question 3

This scatter plot visualizes the Seeds dataset, comparing kernel length against kernel groove length across three wheat varieties. Points are rendered as distinct symbols using d3.symbol and symbolsFill, with a shape legend labeling each class. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for shapes, and d3.csvParse to load data from a GitHub repository. Axes and legend components are built with d3.axisLeft, d3.axisBottom, and custom selection methods, all within d3.v7.

Loading thumbnail…

activity 6_Task 1

This visualization displays a horizontal bar chart of the 2020 population for 30 countries, using a light-green fill for each bar. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering includes a formatted tooltip on each bar, with tick labels formatted from grams to billions using `format('.2s')`. Data is loaded from a CSV file via the `csv` function, and axes are composed from custom components that generate tick marks and labels.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the percentage distribution of IMDb ratings across six movie genres, showing the impact of genre on rating levels. Each bar represents a genre, segmented into five rating brackets from below 5.0 to above 8.5. The visualization uses d3.stack() to create stacked data and d3.scaleOrdinal with a custom color palette. Hovering over a segment with the mouse triggers a tooltip displaying the exact percentage. The SVG rendering includes scales via d3.scaleBand for genres and d3.scaleLinear for percentages, with axes and labels configured through d3.axisBottom and d3.axisLeft.

Loading thumbnail…

5 Buddhas

Five colored Buddha silhouettes overlap in a grid-like arrangement, rendered as green-tinted polygons and paths. Each Buddha is drawn from an SVG path with randomized polygon overlays and rotations. The React app uses `ReactDOM` to render the SVG, mapping over arrays to generate polygons with random coordinates, fills, and transforms. The design is built with React 16.10 and SVG, creating a chaotic, layered visual effect.

Loading thumbnail…

6 buddhas lokesh

Six overlapping Buddha silhouettes form a radial, kaleidoscopic mandala rendered as an SVG using React. The React code maps a numeric array to generate hundreds of small, randomly positioned and colored rectangles, creating a dispersed background texture. The central figure is composed from a complex SVG path, scaled and translated within a group element. The composition is presented on a browser page with a floral background image, using the React and ReactDOM libraries.