telkapallyrekha@gmail.com

@Rekha-Telkapally·13 public vizzes

RT05_Network Graph

This network graph visualizes the relationships between COVID-19 concepts, including variants like Alpha and Delta, and their associated symptoms. It shows how the central topic connects to variant nodes, which then branch to symptom nodes, with link weights indicating relationship strength. The visualization uses d3.layout.force to simulate the physics of node positioning, while SVG circles and lines represent nodes and links. Data is loaded from data.json, with circle radius fixed at 15 pixels and blue stroke weights encoding connection importance.

Apr 3, 2024

Loading thumbnail…

assignment

This example shows a hierarchical tree layout of Netflix’s organizational structure, branching from the root “Netflix” into “Content” and “Technology” categories, then further into subcategories like “Originals” and “Engineering.” It uses d3.hierarchy and d3.tree to compute node positions, then renders the tree as an SVG with lines for links and circles for nodes. The code assigns coordinates via the tree layout, sets explicit x and y attributes for each element, and labels each node with its name. Text styling and node/link classes are defined in embedded CSS, while the dataset is hardcoded as a JavaScript object.

Apr 3, 2024

Loading thumbnail…

piechart_rt15

This pie chart visualizes mobile phone sales aggregated by brand, using data fetched from a remote CSV file. The chart displays each brand as a colored slice with a label showing the brand name and total sales, alongside a legend with color-coded entries. Built with D3.js v7, the visualization uses `d3.csv` to load data, `d3.rollup` to aggregate sales per brand, and `d3.pie` and `d3.arc` to generate and render the slices as SVG paths. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) assigns distinct colors, and the legend is constructed manually with styled HTML divs.

Mar 28, 2024

Loading thumbnail…

Linechart_AS7_Rekha

This line chart visualizes the average sales of mobile phone brands, using a distinct colored line to show the total sales value for each brand. The chart is created with Chart.js and rendered on an HTML canvas element. The data is fetched from an external CSV file using d3.csv, then parsed and aggregated by brand in JavaScript. The visualization includes axis titles and a main title, both styled in blue, and uses randomly generated colors for the line’s border and background.

Mar 28, 2024

Loading thumbnail…

Rk_ICE 7 Area Chart

This area chart displays the average sales of all mobile phone brands, aggregated from a CSV file and rendered on a Canvas element. The visualization uses D3.js (`d3.csv`) to load and parse the data, then passes the aggregated brand and sales values to Chart.js to create the line chart with a filled area. The chart includes a green title and axis labels, with randomly generated colors for the dataset’s fill and border.

Mar 28, 2024

Loading thumbnail…

Reusable Scatterplot

This scatter plot visualizes the relationship between units sold and sales revenue for mobile devices, with data points colored by brand. The implementation uses a reusable `scatterPlot` module built with D3 v6, employing `scaleLinear` and `scaleOrdinal` for axes and color encoding, alongside `axisLeft` and `axisBottom` for chart annotations. The visualization cycles between two halves of the dataset every five seconds, fetched from a CSV via `d3.csv`, and renders as an interactive SVG with a 12-pixel font for labels.

Mar 28, 2024

Loading thumbnail…

RK7_reusable scatter plot

This example displays a reusable scatter plot of mobile phone data, showing units sold against price. It fetches a CSV file from a GitHub gist, parses the data, and renders the visualization using either Chart.js on a canvas element in the HTML version or a custom D3 module in the JavaScript version, which appends an SVG to the body. Both approaches map price to the x-axis and units sold to the y-axis, with the D3 version utilizing the `scatterPlot` module and CSV parsing functions from the D3 library.

Mar 28, 2024

Loading thumbnail…

ICE-7 Scatter plot

This scatter plot visualizes the relationship between mobile phone price and units sold, with each data point represented by a distinct symbol (circle, cross, or diamond) based on player type and colored by country. The visualization uses D3.js version 6.7.0, employing scaleLinear for axes, scaleOrdinal with schemeCategory10 for colors, and d3.symbol for point markers. Data comes from a CSV file loaded via d3.csv, with dimensions filling the entire browser window. The chart displays axes with tick marks and plots points with a 5-pixel radius, though symbol sizes remain consistent regardless of the radius setting.

Mar 28, 2024

Loading thumbnail…

Main.js

This line chart shows mobile phone sales by brand from 2010 to 2020, with each brand represented by a distinct colored line. The visualization uses d3.csv to load the dataset, d3.scaleBand and d3.scaleLinear for the x and y axes, and d3.line to draw the paths. SVG rendering is used, with the chart including axis labels and a title, while the color scale employs d3.schemeCategory10 to differentiate brands.

Mar 28, 2024

Loading thumbnail…

piechart_rt15

This pie chart displays the number of vehicles seized across different US states, with each slice labeled with its corresponding count and accompanied by a color-coded legend. The visualization uses D3.js v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and text labels, rendering the chart within an SVG container. Data is loaded asynchronously from a remote CSV file containing mobile phone brand counts.

Mar 28, 2024

Loading thumbnail…

RT15

This scatter plot visualizes the relationship between mobile phone price, sales, and rating, with each circle representing a phone. The x-axis shows price, the y-axis shows sales, and color encodes rating, ranging from yellow to blue. Built with D3 v7, it uses `d3.csvParse` to load data from a GitHub gist, `scaleLinear` for axes and color, and appends SVG circles. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Mar 21, 2024

Loading thumbnail…

RT15

The visualization displays cotton production across different countries using a horizontal bar chart, with each bar representing a nation’s output in metric tons. The chart highlights production quantities through bar lengths, colored steelblue with hover effects that lighten the bars. It uses D3 v7 to parse CSV data from a remote URL, then applies `d3.scaleBand` for country categories and `d3.scaleLinear` for production values. The SVG rendering includes labeled axes, a title, and subtitle, with data loaded asynchronously via the Fetch API and parsed manually into arrays.

Mar 21, 2024

Loading thumbnail…

SDV_Assignment

This example displays a summary of the Plants dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a styled `<pre>` element. It uses the D3.js v5 library’s `csv` method to fetch and parse a remote CSV file, then computes the summary using `d3.csvFormat`, `dataset.length`, and `Object.keys`. The page’s visual design includes a decorative landscape with grass and layered CSS trees, while the data text appears centered in a bordered box against a lavender background. The code reads from a GitHub-hosted CSV and renders only textual statistics, with no charts or interactive elements.

Mar 7, 2024