K

keerthi.yanala104@gmail.com

@keerthiyanala123·19 public vizzes

Loading thumbnail…

TASK 9

This area chart shows the distance covered by pre-owned cars across model years, using a steelblue filled path with labeled axes and a title. Built with D3 v7, the visualization loads CSV data from a GitHub repository, parses the distance values, and renders the chart as an SVG. The code uses `d3.area()`, `d3.scaleLinear()`, `d3.extent()`, and `d3.max()` to compute the scales and generate the path, with `d3.axisBottom()` and `d3.axisLeft()` adding the axes.

Loading thumbnail…

task 9

This example visualizes pre-owned car sales in India from 2009 to 2019 with an area chart rendered in SVG. It uses D3 v5’s `csv` loader to fetch the data, `scaleTime` and `scaleLinear` for axes, and `axisBottom`/`axisLeft` with custom tick formatting. The chart draws a smooth line and filled area via `line` and `area` generators with `curveBasis`, and labels both axes with rotated text.

Loading thumbnail…

Task9

This pie chart visualizes the distribution of IMDB Top 250 movies released between 1990 and 2000, showing the count of movies for each year. The chart uses a categorical color scheme from `d3.schemeCategory10` to differentiate year slices, with each slice labeled by its corresponding year. A legend on the right lists each year with its movie count. The visualization is built with D3 v7, using `d3.pie()` for layout and `d3.arc()` for rendering the path geometry as SVG.

Loading thumbnail…

Task 9

This visualization displays the top 20 Netflix TV shows and movies as a pie chart, with each slice labeled by its count and accompanied by a color-coded legend. It loads data from a GitHub-hosted CSV file using d3.csv, then sorts and filters it to show only the top entries. The chart uses d3.pie to generate arc data and d3.arc to draw SVG paths, with d3.scaleOrdinal assigning colors to slices. Text labels are positioned using arc.centroid, while the legend is built with SVG rect elements and text in a d3.selectAll pattern.

Loading thumbnail…

Task 9

This example displays the text "Hello VizHub!" centered on a plain background using D3.js to select a DOM element and set its content. It demonstrates how to import D3 functions via UNPKG and local ES6 modules, with the message defined in a separate `myMessage.js` file. The page uses CSS for styling, setting the font size to 12em. The core interaction is minimal, showing a simple text output through D3's `select` and text-setting methods.

Loading thumbnail…

Activity6

This scatter plot compares beverages by glucose levels on the x-axis and beverage ratings on the y-axis, with circle size representing calorie content and color indicating beverage brand. It uses D3 v7 to load CSV data, create SVG circles, and render axes with d3.axisBottom and d3.axisLeft. A legend shows calorie sizes and brand colors, with data from data.csv.

Loading thumbnail…

Activity6

This interactive bubble chart visualizes the correlation between manufacturing cost, selling price, and profit percentage for various car makes, using data from a CSV file. The chart displays circles positioned by selling price on the x-axis and make cost on the y-axis, with bubble size scaled to profit percentage and color encoding brand identity. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color scheme. The visualization includes a legend and animated tooltips that appear on mouseover.

Loading thumbnail…

Activity6

The visualization displays the classic Iris dataset, showing interactions between four flower measurements across three species. It presents an interactive scatter plot where users can select any measurement combination for the x and y axes via dropdown menus. Data points are rendered as animated circles that transition smoothly when axes change, colored by species class with a corresponding legend. The implementation uses D3 v5 with `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes, while a `transition().attr` handles the animated circle placement.

Loading thumbnail…

Activity6

This example demonstrates how to load D3 v5 from a CDN and use ES6 module imports to display a text message in the browser. The code imports `select` from D3 and a local `message` constant, then sets the text content of a `div` element with the ID `message`. The accompanying CSS file styles that element with large, centered text, showcasing a minimal integration of D3, local modules, and external stylesheets.

Loading thumbnail…

Activity6

This stacked bar chart visualizes the proportion of transactions falling into five price brackets for six distinct product categories. The chart displays the distribution of spending across these ranges, with each bar segment color-coded and a legend identifying the price segments. The visualization is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The data is transformed using `d3.stack()` to create stacked segments, and the chart is rendered as SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Activity6

This gallery example presents a force-directed graph visualization of a network dataset. It uses the `d3.forceSimulation` API to compute physics-based node placement and `d3.geoPath` to render curved links between nodes. The visualization dynamically adjusts node positions in response to repulsive and attractive forces, with node color and size encoding additional data attributes. The underlying data is loaded from a JSON structure and rendered on an SVG canvas, providing an interactive exploration of network relationships.

Loading thumbnail…

Activity6

This stacked bar chart displays the percentage distribution of IMDb movie ratings across different genres, with each bar segment representing a rating level. The visualization uses d3.stack() to compute stacked data and d3.scaleOrdinal for color encoding, rendering as SVG rectangles. Hovering over any segment reveals precise percentage values via a custom HTML tooltip with mouseover events. The chart uses d3.axisBottom and d3.scaleBand for categorical genre comparison, with data sourced from a CSV file containing movie ratings by genre.

Loading thumbnail…

Activity6

This stacked bar chart displays the percentage distribution of IMDb rating levels across movie genres, with each genre represented as a horizontal bar. The visualization uses D3.js version 7 to render SVG elements, employing `d3.stack()` and `d3.scaleOrdinal` for color mapping. Interactive tooltips appear on hover, showing precise percentages for each rating category using `event.pageX` and `event.pageY` positioning. The chart reads from a local CSV file and includes axis labels and a title for context.

Loading thumbnail…

Activity6_population

A horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG `rect` elements for bars. Data comes from a remote CSV, loaded via `d3.csv`, with population values converted from thousands. Interactive hover tooltips show formatted values, while styled axes and labels clarify the visualization.

Loading thumbnail…

Activity6_population

This horizontal bar chart displays the populations of 20 countries in 2020, ordered by country name along the vertical axis with population values extending horizontally. Each bar includes a tooltip showing the population in billions. The visualization is built with React and D3 v5, using `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.format` to convert raw values into abbreviated population labels. Data is loaded from a remote CSV file via `d3.csv`, and the chart is rendered as SVG with custom axis and mark components.

Loading thumbnail…

Activity6_population

This example shows a horizontal bar chart of country populations in 2020, using a band scale for countries and a linear scale for population values. The chart is rendered as SVG with React components, using D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format`. Population values are formatted with SI prefixes, converting gigabytes to billions, and each bar includes a native SVG tooltip. The data is loaded via a custom hook (`useData`) from a CSV source.

Loading thumbnail…

Activity6_population

This horizontal bar chart displays the population of ten countries in 2020, sorted by country name on the y-axis and population magnitude on the x-axis using a linear scale. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendered as SVG rectangles. Data is loaded from a remote CSV file via D3’s `csv` function, with population values parsed by multiplying the 2000 column by 1000. Axis ticks are formatted using D3’s `format` with a `.2s` suffix, replacing 'G' with 'B' for readability, and tooltips show the exact formatted population on hover.

Loading thumbnail…

Activity6_population

This example shows the 2020 population of various countries as a horizontal bar chart, with the bars ordered by country name and labeled with abbreviated values in billions. It is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `format` with the `.2s` specifier to convert tick labels from gigabytes to billions. The SVG rendering includes custom axis components and a tooltip format applied to bar labels.

Loading thumbnail…

5 Buddhas

Five concentric circles in a repeating rainbow palette appear over a swarm of random dots on a black field. The work uses React and ReactDOM to generate the SVG, employing `Math.random()` for both dot positioning and color values. A single hand-coded SVG path, traced in an intricate loop, renders the central Buddha silhouette, scaled and translated into place.