tejasrikotipalli1@gmail.com

Tree graph

Network graph

World Map

Australia Map

Fork of reusable scatter

This visualization shows the trend of automobile sales in India over a ten-year period using a combined line and area chart. The chart emphasizes the sales trajectory with a smooth curve, filling the area beneath the line to highlight the magnitude of change over time. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for smooth rendering, and parses the data from a CSV file. The SVG output includes styled axes and gridlines via `axisBottom` and `axisLeft`.

Fork of Line Chart Tejasri

This example visualizes automobile sales from 2005 to 2021 using a line chart, showing the trend in sales volume over time. The chart displays the data on a time-scaled x-axis and a linear y-axis for sales figures, with axis labels and a title. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the SVG. Data is loaded from a CSV file via `csv()` and parsed to convert the year and sales values into appropriate types for rendering.

Fork of ICE - 7 Pie Chart

This pie chart displays the cost of Amazon Prime subscriptions across different countries. The visualization uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`. The data is fetched from a remote CSV file containing country and price information. Revenue values are shown as black text labels on each pie slice, while a legend to the right maps a country to its corresponding price, with slices colored using a predefined array of ten colors. The pie is rendered using SVG elements appended to a 960x500 canvas.

Line Chart Tejasri

This line chart displays automobile sales from 2005 to 2021, with the x-axis representing years and the y-axis representing sales figures. The visualization uses D3 v5 with SVG rendering, employing scaleTime for the temporal x-axis and scaleLinear for the numeric y-axis. The line path is generated using the d3.line generator, with data loaded from a CSV file hosted on GitHub Gist. Axes are styled with custom tick colors and grid lines, while axis labels and the chart title are added as SVG text elements.

Fork to pie chart

A forked pie chart displays mobile sales brand data from a CSV file, showing each brand's year-to-date sales as a slice with corresponding legends. The chart renders in SVG using D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `select`. Legends show brand names, percentage of total, and sales values in thousands, using `format` for tick labels. Data loads asynchronously via the `csv` method from a GitHub Gist link.

Fork of hulu

This pie chart visualizes Amazon Prime subscription prices across different countries using the Hulu dataset. The visualization renders each country's price as a colored slice, with labels displaying the exact cost in dollars. Built with D3 v5, the chart uses the `d3.pie` and `d3.arc` functions to generate the circular segments, while `d3.scaleOrdinal` assigns distinct colors to each price value. A legend on the right pairs each color swatch with its corresponding country and price, making the data easy to compare at a glance.

Fork of Fork of Responsive Scatter Plot

This example presents an interactive scatter plot of the Penguin dataset, mapping petal width and sepal length with additional dimensions encoded through point size and symbol shape. Built with D3 v6, the visualization uses SVG and animation to cycle through four column pairings every 2 seconds, automatically updating the x-axis and point positions. Species are distinguished by color (Chinstrap, Gentoo, Adelie) and symbol, with a legend and title displayed on screen. The plot is designed as a reusable chart component, making it easy to adapt to different datasets or axes.

Fork of Responsive Scatter Plot

This interactive scatter plot visualizes the Penguin dataset, encoding sepal and petal measurements along the axes while using distinct colors and symbols to differentiate species. Built as a reusable D3 chart, it uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.symbol` for shape encoding, and renders points as SVG paths. A `setInterval` cycles through the four measurement columns every two seconds, dynamically reassigning the x-axis value and updating the chart via the reusable chart function.

TemperatureReport Scatterplot

This visualization presents a reusable scatter plot that maps climate conditions against moisture levels, with each data point rendered as a steelblue circle that turns orange on hover. The plot displays the x-axis as "Climate" and the y-axis as "Moisture," both scaled linearly from zero to their respective maximums. Built with D3.js v7, the code loads a CSV file via `d3.csv` from a GitHub gist, then uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes. Temperature data is visualized using SVG circles appended to the chart, with styling defined in an external CSS file.

Scatterplot for peng bird dataset

This scatterplot visualizes the Palmer Penguins dataset, plotting flipper length against body mass for three penguin species, with each species encoded by color. The chart uses D3 v6 to load CSV data, apply linear scales with `scaleLinear`, and render SVG circles via `selectAll` and `join`. It also displays axes using `axisLeft` and `axisBottom`, with custom labels and a title. The visualization relies on D3’s `extent` for domain calculation and scales for positioning, with data parsed from a remote CSV file.

Bar chart for the Saavan dataset

This bar chart visualizes the top 12 songs from the Saavan (JioMusic) dataset, displaying song durations with a blue-to-red color gradient that encodes duration length. The visualization uses React with D3 v5, employing `d3.scaleBand` for the categorical y-axis of song names and `d3.scaleLinear` for the continuous x-axis of durations. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and bars are rendered as SVG rectangles inside a React component. The chart includes axis tick labels and grid lines, with song names displayed along the vertical axis.

Fork of ICE-6

This example visualizes the top 12 most-played Spotify songs using a horizontal bar chart, where each bar’s length encodes the song’s duration in milliseconds. The visualization loads data from a CSV file via `d3.csv`, then slices it to the first twelve rows before rendering with React and D3 v5. Axes are manually constructed using `scaleBand` for the categorical song names and `scaleLinear` for the numeric duration, with grid lines and tick labels drawn as SVG elements. The chart uses `useState` and `useEffect` for data fetching, and the final output is rendered as an SVG within a React component.

ICE-5 Data Visulaization

This visualization displays metadata about a CSV file containing top 50 employees, fetched from a GitHub gist. It shows the file size, row count, and column count in a large text block, alongside a static SVG image. The page uses D3.js v7’s `d3.csv` and `d3.csvFormat` to load and measure the data, while standard HTML and CSS structure the layout. The code does not include interactive charts or animations, focusing instead on presenting basic dataset statistics.

Piggy smile Face

A gallery of pig-themed smiley faces, each rendered as a distinct SVG component with a pink circular background, two eyes, and a smiling mouth. The code randomly varies face parameters like stroke width, eye offset, eye radius, mouth width, and mouth radius to generate twenty unique faces. Built with React and D3.js, it uses the `arc` API from D3 to draw the mouth path and maps over a `range` array to produce the faces.

TejaSri Birds 4 Question

This visualization renders an animated SVG landscape with a dynamic sky that cycles through a 24-hour color gradient, a sun with a radial gradient, and a stylized tree. Three bird shapes, constructed from SVG paths, are positioned and transformed using scale, translate, and rotate operations. The scene uses JavaScript to create SVG elements via `document.createElementNS`, with CSS animations for the sun’s orbital movement and gradient transitions tied to the `skyGradient` and `radialGradient` definitions.