C

chsaisriharsha@gmail.com

@chakravarthulaharsha·31 public vizzes

Loading thumbnail…

Project Line Chart

This line chart visualizes smartphone brand sales across eight quarters from Q2 2021 to Q1 2023, with each brand’s trajectory drawn as a distinct colored line. The example loads a CSV file via PapaParse, parses the data, and renders the chart using Chart.js on a Canvas element. Custom x-axis labels map quarter columns to readable date formats, and random colors are generated per brand to differentiate the datasets. The chart configures a responsive layout with a zero-based y-axis titled “Sales,” demonstrating data import from local files and integration of external libraries.

Loading thumbnail…

Project Brand vs. Avg Cost

This bar chart compares the average cost (x-axis) across various smartphone brands (y-axis), using data from a CSV file loaded with d3.csv. The visualization sorts the data by price and displays the top 500 entries as horizontal bars rendered as SVG `<rect>` elements via React. Axes are built using d3.scaleBand and d3.scaleLinear, with tick labels formatted using d3.format. Hovering over a bar reveals its precise value through an SVG `<title>` tooltip.

Loading thumbnail…

Project Brand vs. Average Cost Bar Chart

This bar chart compares average project costs across different brands, using horizontal bars whose widths correspond to dollar values. The example demonstrates a simple client-side rendering approach: JavaScript parses a hardcoded data object (with placeholder values like “Brand A: $123.45”) and dynamically creates styled `div` elements, each with a width set to twice the cost, appended to a container styled via CSS. The included `index.js` shows a separate, incomplete CSV-processing pipeline using `fs` and `csv-parser` to calculate averages, but that logic is not connected to the chart’s rendering.

Loading thumbnail…

Assignment2 Stacked Bar Chart

This stacked bar chart visualizes sales costs aggregated by department, item category, and sales type using a hardcoded dataset. The chart groups bars by department, with sub-bars representing item categories and segments distinguishing domestic versus international sales. It uses D3.js v7 with SVG rendering, leveraging `d3.group` for data aggregation and `d3.scaleBand` and `d3.scaleLinear` for positioning. Color scales differentiate departments across sales types, while axes and labels clarify the department and cost dimensions, though international segments are stacked alongside domestic totals.

Loading thumbnail…

Assignment 2 7B network graph

This example visualizes a small network of ten named nodes and their connections using a force-directed layout. It shows a simple social or organizational graph where nodes are labeled with names, and links between them are displayed as black lines. The visualization relies on D3.js’s `d3.forceSimulation` API to run the physics-based layout, combining `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces. Node and link positions are updated on each simulation tick via a render function that sets SVG attributes for circles, lines, and text labels.

Loading thumbnail…

Assignment 2 7A Tree graph

This example shows a hierarchical tree graph with a root node "Srinivas" branching into four internal nodes, each with two leaf nodes. The visualization encodes data properties through visual channels: node circles use radius for the value attribute, fill color from the level field, and stroke color from the type field. Links between nodes are colored based on the parent node's level. The code implements this using D3 v5's tree layout (`d3.tree`) and hierarchy function, rendering nodes and curved paths as SVG elements with data-driven styling.

Loading thumbnail…

Assignment_2 Reusable Scatter Plot

This interactive scatter plot visualizes Palmer penguin measurements, using flipper length, body mass, bill length, and bill depth as axes. The chart cycles through these four variables at timed intervals, updating the x-axis while preserving the y-axis. Colored circles represent penguin species, with a legend mapping each category to a distinct color. Built with D3.js (v6), the example demonstrates reusable chart components through local ES6 module imports, scaling axes with `scaleLinear` and rendering SVG elements with data joins. Data loads from a remote CSV file via D3's `csv` function.

Loading thumbnail…

Assignment 2 - Scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping bill length to the x-axis and bill depth to the y-axis while coloring each point by penguin species. It loads data from a CSV file and renders circles as SVG marks using D3 v6. The code defines scales with `scaleLinear`, generates axes with `axisLeft` and `axisBottom`, and includes a legend for species identification. The visualization is displayed across the full browser window with styled axis labels and customized fonts from Google Fonts.

Loading thumbnail…

Assignment 2 _ Bar Chart

A horizontal bar chart displays car sales data for 20 car models in 2022, with each bar's length proportional to the population value. The visualization uses React to render SVG elements, with D3 v5 APIs such as `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` to abbreviate tick labels. The bar marks are rendered as SVG rectangles with tooltips, and data is loaded from a remote CSV via D3's `csv` function, with the 2022 column filtered and sliced.

Loading thumbnail…

Assignment 2 6B USA map

This example renders a choropleth-style map of the United States using an Albers USA projection. The visualization displays each state as a red path with blue strokes, generated from GeoJSON data loaded via `d3.json`. The code uses `d3.geoAlbersUsa` for the projection and `d3.geoPath` to convert geographic coordinates into SVG path data. The map is drawn at a fixed 700×700 pixel size, with all states filled uniformly red rather than encoding a quantitative variable.

Loading thumbnail…

Assignment 2 World map

This example displays a world map using a Mercator projection, with each country as a gray polygon outlined in red. The visualization loads GeoJSON country boundaries from a remote GitHub repository and renders them as SVG paths. It uses D3.js v6 APIs, including `d3.json` to fetch the data, `d3.geoMercator` for the projection, and `d3.geoPath` to generate the path data for each feature. The map is fitted to an 800×600 viewport using the projection’s `fitSize` method, with a light gray background applied via CSS.

Loading thumbnail…

Assignment 2_Bubble chart

This bubble chart visualizes the correlation between make cost, selling price, and profit percentage for various car brands. The data, sourced from `profits.csv`, is rendered as an interactive SVG using D3 v7, where bubble size encodes profit percentage and color distinguishes car brands. Implemented with `d3.csv`, `d3.scaleLinear`, and `d3.scaleOrdinal`, the chart displays axes for selling price and cost, with a legend for profit percentage and brand colors. Hovering over a bubble triggers a tooltip showing the brand name, supported by custom `showTooltip`, `moveTooltip`, and `hideTooltip` functions on `mouseover`, `mousemove`, and `mouseleave` events.

Loading thumbnail…

Assignment 2 Bar Chart

This example shows a bar chart of student enrollment counts across twelve majors at UNT, with each bar’s height encoding the reported value. The chart is rendered as an SVG using D3 v7, with a linear y-scale for counts and a band x-scale for categorical major labels. Axes are added via `d3.axisLeft` and `d3.axisBottom`, with rotated x-axis tick text. The code uses `d3.scaleLinear`, `d3.scaleBand`, and D3’s selection and data-join methods to bind the hard-coded dataset to `rect` elements.

Loading thumbnail…

Activity8_Task6_2

This network graph visualizes a social network of people connected by "Friend with" relationships, with node size and link strength reflecting the data’s value. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interactions are enabled via d3.drag. Nodes are rendered as circles with labels, and links are drawn as lines with arrowhead markers, all in SVG. The graph loads data from a local graph.json file and displays ten nodes with varying connection frequencies, highlighting a central hub named Indu.

Loading thumbnail…

Activity8_Task6_1

This interactive tree diagram visualizes the hierarchy of muscle car models grouped by manufacturer (Ford and Dodge) and their sub-models, using a JSON data source. Rendered with D3 v3 and SVG, the visualization supports zooming and drag interactions. Each node is a colored rectangle, with colors assigned by node type, and animated transitions position nodes in a collapsible tree layout. Tooltips and directional link labels enhance the navigation of the hierarchical structure.

Loading thumbnail…

Activity8_Task5_2

This visualization displays a map of the United States of America as a single geographic entity. It uses D3 version 5 along with the topojson-client library to extract the country’s boundary from a world-atlas TopoJSON file. The map is rendered as an SVG path using a Mercator projection (fit to a 1700×400 size) via `d3.geoMercator` and `d3.geoPath`. The final SVG element is added to the page with a width of 900 and height of 500 pixels.

Loading thumbnail…

Activity8_Task5_1

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as light-green SVG paths with an indigo stroke on a sky-blue sphere. It loads geographic data from the world-atlas countries-110m.json dataset and applies a d3.geoEquirectangular projection with d3.geoPath. Users can pan and zoom the map via d3.zoom, which applies SVG transforms. Countries highlight in maroon on hover, demonstrating basic choropleth-style interaction with projected geographic features.

Loading thumbnail…

Activity8_Task4

This visualization displays the cost of sales from 2000 to 2013 using a smooth line and area chart rendered in SVG. The chart uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with data loaded via d3.csv from a GitHub gist. d3.line and d3.area generators apply curveBasis to create the smoothed paths, while d3.axisBottom and d3.axisLeft add labeled axes with a rotated y-axis title.

Loading thumbnail…

Activity8_Task3

This example visualizes the cost of sales from 2000 to 2013 using a line chart rendered as an SVG. It loads data from a local CSV file and maps years to a band scale along the x-axis and costs to a linear scale on the y-axis. The chart uses D3 v7 APIs, including `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, to draw a thick light-green line with red axis labels and styled text.

Loading thumbnail…

Activity8_Task2

This example visualizes the distribution of student counts across academic majors at UNT, presenting the data as a pie chart with labeled segments and a corresponding legend. It loads student data from a CSV URL and uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate the chart and its labels. The SVG rendering displays each major’s student count in thousands, with color-coded slices and a legend showing major names alongside their values.

Loading thumbnail…

activity 8_Task 1

This interactive scatterplot visualizes the Iris dataset, comparing sepal and petal measurements across three flower species. The visualization cycles through different measurement combinations on the x-axis using a setInterval, dynamically updating the plot. The code uses D3 v5 with SVG rendering, employing scaleLinear scales, axisBottom, and axisLeft for the chart structure. Animated transitions show data points colored by species, with a custom legend displaying the species names and a title. The example loads data from a CSV file, uses a scatterPlot function for modular chart construction, and demonstrates D3's join pattern for data binding.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length and width, with points colored by species. The visualization uses D3 v6 to load CSV data from a GitHub gist, scale the axes linearly, and render circles as SVG marks. The plot includes axis labels for petal and sepal measurements, with a supplementary legend indicating the three Iris species.

Loading thumbnail…

Bar graphs

This bar chart displays the population of 20 countries for 2020, with countries on the y-axis and population on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data to SVG rectangles. The code loads CSV data from a gist, formats population values using D3's `format` function, and includes custom axis components that render red tick lines. The chart title reads “POPULATION-2020,” and hover tooltips show formatted population values.

Loading thumbnail…

Scatter Plot with Shape

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape. The visualization loads CSV data via `fetch`, parses it with `d3.csvParse`, and renders circular, triangular, and other shapes using `d3.symbol` and `symbolsFill`. A custom shape legend, built with `scaleOrdinal`, identifies species, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart updates responsively to the browser window size.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with circle size encoding MPG and color distinguishing brands. Users hover over bubbles to see the make name via a tooltip. Built with D3 v7 and SVG, it uses d3.csv to load data, d3.scaleLinear for axes and sizing, d3.scaleOrdinal with interpolateTurbo for colors, and includes a legend for MPG values.

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5” and expressed as percentages. The visualization uses D3 v7 to load the CSV data, stack the categories with `d3.stack`, map colors via `d3.scaleOrdinal`, and render the SVG output. Interactive tooltips display the exact percentage for each segment on hover using mouse events.

Loading thumbnail…

Batman

A dashboard displays Batman film metadata from a CSV file, loaded via D3's `csv` method. The page renders a poster image in SVG format with a WebGL background, alongside a legend and text describing the DCEU character. The code imports D3 utilities like `select` and `csvFormat` to parse and preview the first ten rows of data as JSON. The example uses D3 v5 within a Vue framework, demonstrating module imports and data loading from an external gist URL.

Loading thumbnail…

BMI by Age

This bar chart displays the average body mass index (BMI) across different ages from a CSV dataset, with age on the x-axis and average BMI on the y-axis. The code uses d3.csv to load data, d3.bin to group ages into bins, and d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes. The chart is drawn as SVG rectangles with a light blue fill, and the BMI is calculated from weight and height fields using the formula (weight/height²)*703.

Loading thumbnail…

Fork of A6_ Transformingdata

This example loads the Iris flower dataset from a CSV file and uses D3’s `flatRollup` and `sum` functions to compute the average sepal length for each species, displaying the result as JSON text. The visualization shows the transformed summary data in a `<pre>` element, demonstrating how to fetch, parse with `csvParse`, and aggregate data using D3 v7 within a VizHub project. It also illustrates ES6 module imports and state management through a custom `setState` pattern.

Loading thumbnail…

Activity 6

This example reads the classic Iris dataset from a remote CSV file and logs the first ten rows to the page in a `<pre>` block. It demonstrates loading D3 via UNPKG, using ES6 module imports like `select` and `csv` from the `d3` package, and importing a local module. The visualization renders static text output using SVG elements in a Vue framework, with styling applied via an external stylesheet.

Loading thumbnail…

Fork of Buddha in colors -overlapping Buddha

This example displays a dense, colorful field of overlapping semi-transparent polygons that build into a chaotic, layered composition, with a single detailed Buddha path rendered on top. The visualization uses React to render SVG elements, generating thousands of polygon shapes across multiple nested loops with randomized coordinates, fill colors, and rotations. The Buddha silhouette is drawn using an SVG path element, positioned and scaled via a transform, while the black background and high opacity values create the overlapping visual effect.