L

Lohitha Konidena

@Cosmichovess·20 public vizzes

Loading thumbnail…

socialmediasentiment

This dashboard compares sentiment trends between Twitter and news sources, presenting both a pie chart of sentiment distribution by source and a line chart tracking positive and negative sentiment over time. A dropdown filter allows users to view all data or isolate a specific source. The visualization uses D3 v7 to load CSV data from Google Drive, with d3.pie and d3.arc generating the pie chart, and d3.scaleTime, d3.scaleLinear, and d3.line constructing the temporal trends. Both charts render as SVG elements within styled containers.

Loading thumbnail…

lohithaact7_q2areachart

A single-series area chart shows the distribution of patient diagnoses from a heart disease dataset, with the curve encoding diagnosis categories on the x-axis and case counts on the y-axis. The chart uses a monotone curve to smooth transitions between points, with a steelblue filled area beneath the line. The code loads CSV data via `d3.csv`, aggregates counts with `d3.rollups`, and renders the SVG using `d3.area`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

Loading thumbnail…

lohithaact7_q1piechart

This pie chart visualizes the distribution of diagnoses in a heart disease dataset sourced from a GitHub gist. The chart displays four categorical slices, each labeled with the diagnosis name, and uses a legend to map colors to the categories. Built with D3 v7, the code employs `d3.pie()` for arc generation, `d3.scaleOrdinal()` for color assignment, and `d3.select()` to build the SVG. It calculates counts from the CSV data using `d3.rollups` before rendering.

Loading thumbnail…

lohithaact7_tutorial

This interactive scatter plot animates through the four measurement dimensions of the classic Iris flower dataset. It cycles the x-axis between petal width, sepal width, petal length, and sepal length, while the y-axis shows sepal length. Data points are color-coded by species (Setosa, Versicolor, Virginica) with a legend and axis labels. The visualization uses the D3.js library with custom `scatterPlot` functions and demonstrates SVG animation via a `setInterval` loop to transition between axis variables.

Loading thumbnail…

lohiact6_Task1.2

This bar chart displays the 2010 population of 20 countries, using light green horizontal bars arranged on a categorical scale. The visualization uses D3 v7 to load CSV data, create linear and band scales, and render SVG rectangles via the `Marks` helper. The x-axis formats population values in billions and millions using `d3.axisBottom`, while the y-axis lists country names with `d3.axisLeft`. Both axes include custom labels, and the chart is rendered inside a fixed 900×500 SVG with margins defined in the main script.

Loading thumbnail…

Fork of Lohiact6_Task3.2

This example shows a scatter plot of the Iris dataset, displaying sepal length against petal length with species distinguished by symbol shapes. The plot includes labeled axes and a shape legend indicating species categories. The visualization uses D3 v7 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to map data to positions and shapes. Data is loaded asynchronously from a CSV file via `csvParse` and rendered as SVG paths within a full-window viewport.

Loading thumbnail…

ohiact6_Task3.2

This interactive scatter plot maps iris flower measurements, plotting sepal length on the x-axis against petal length on the y-axis. Each of the three species is represented by a distinct symbol shape, with a legend positioned to the right. Built with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol` generators to create the marks. Data is loaded asynchronously from a remote CSV and parsed with `csvParse`.

Loading thumbnail…

lohiact6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across car makes. Each circle represents a make, positioned by horsepower on the x-axis and torque on the y-axis while its radius encodes highway MPG. Colors distinguish manufacturers, with a size legend and black tooltips on hover. Built with D3 v7, the SVG renders static circles using scaleLinear for axes and size, scaleOrdinal for color, and event listeners for interactive tooltips.

Loading thumbnail…

lohiact6_Task3.1

A scatter plot shows the relationship between petal length and petal width for synthetic flower specimens, with each circle colored by species using a d3.scaleOrdinal mapping to skyblue, lightgreen, and orange. The visualization loads tab-separated CSV data via d3.dsv, converts numeric fields, and renders axes with d3.axisBottom and d3.axisLeft. Circles are positioned using d3.scaleLinear scales and appended as SVG elements with opacity set for readability. The code uses D3 v6 to bind data and draw the chart within an SVG container.

Loading thumbnail…

lohiact6_Task2

This stacked horizontal bar chart shows the distribution of user ratings across eight music streaming platforms, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses D3 v7 with the d3.stack() function to generate stacked series data, d3.scaleBand() for the categorical platform axis, and d3.scaleLinear() for the percentage axis. The SVG renderer displays color-coded segments via d3.scaleOrdinal() with a manually defined color palette, while d3.axisBottom() and d3.axisLeft() create the chart's axes.

Loading thumbnail…

lohiactivity6_Task1.1

This horizontal bar chart displays the populations of ten countries in the year 2000, sorted by country name. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the population axis and `d3.scaleBand` for country categories. Bars are colored lightgreen, with formatted tick labels using `d3.format('.2s')` to display values in billions. Data comes from a CSV file loaded via `d3.csv`.

Loading thumbnail…

Act 6 task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes. Each circle represents a make, positioned by horsepower and torque, with size encoding MPG and color distinguishing brands. Built with D3 v7, it renders as SVG with interactive tooltips on hover and includes legends for both bubble size and color categories. The data comes from a CSV file loaded via `d3.csv`.

Loading thumbnail…

Activity 6 task 2 q1

This chart shows the percentage distribution of IMDb ratings across six movie genres, splitting each genre into five rating bands from “below 5.0” to “above 8.5.” Using stacked horizontal bars, the visualization highlights how action films skew toward lower ratings while documentaries and animations achieve higher scores. Built with D3 v7, the code uses `d3.stack()` to compute the stacked segments, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for the genre axis, with an interactive tooltip displaying exact percentages on mouseover. Data comes from the inline CSV file.

Loading thumbnail…

Activity 6 Task Q 1.2

This horizontal bar chart displays the 2010 population for the top 20 countries, using a light green fill for each bar. Country names appear on the y-axis, while the x-axis measures population in billions, formatted with D3’s `.format` method. The chart is built with D3 v7, using `d3.scaleLinear` and `d3.scaleBand` to map data, and renders as an SVG. Data is loaded from a CSV file hosted on GitHub, filtered to the first 20 rows.

Loading thumbnail…

Activity 6 Task 1 Q1.1

This bar chart displays the top 10 countries by population in the year 2000, using a horizontal layout with light green bars. The visualization employs D3 v7 with SVG rendering, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Data is loaded from a CSV file via `d3.csv`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, with tick labels formatted using `d3.format` to abbreviate large numbers, while axis titles explicitly label the population values and country names.

Loading thumbnail…

Activity 6

This example shows a horizontal bar chart of the top 10 countries by population in the year 2000, with green bars sorted in descending order. The visualization uses D3 v7 with SVG rendering, loading CSV data from a GitHub gist. It employs d3.axisBottom and d3.axisLeft for the axes, d3.scaleLinear for the x-scale, and d3.scaleBand for the categorical y-scale. The chart handles data cleaning by filtering out invalid population values and includes an axis label; the rendering approach uses the join pattern in d3-selection.

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays population sizes for a set of countries, encoded with a linear x-scale and a categorical y-scale. Built with D3 v6, the visualization loads data asynchronously, uses `d3.scaleLinear` and `d3.scaleBand` for scaling, and renders SVG axes and bars via appended groups calling `AxisBottom`, `AxisLeft`, and `Marks` modules.

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

Loading thumbnail…

5 Buddhas

Five abstract Buddha figures emerge from overlapping, randomized polygons rendered across a 960-by-1000 SVG canvas. The visualization uses React to map nested arrays, generating thousands of semi-transparent, rotated shapes with arbitrary RGB colors via JavaScript's `Math.random()`. A single detailed Buddha path is also included, composed of intricate SVG path commands. The background features a floral nature image, while the sparse code suggests an exploratory, generative approach to sacred geometry.