V

VarshithMurakonda@my.unt.edu

@Varshith0496·17 public vizzes

Loading thumbnail…

Area chart_monthly avg temp

This area chart visualizes monthly average temperatures in New York City, using a steel-blue filled area with a black stroke to display temperature trends across the months of the year. The chart is rendered as an SVG built with D3.js, using `d3.area()` to generate the area path and `d3.scalePoint()` and `d3.scaleLinear()` for the x and y axes respectively. Data is loaded from a CSV file containing average temperature readings, and the visualization includes labeled axes for month and temperature in degrees Celsius.

Loading thumbnail…

Pie chart_world population

This D3.js v7 example visualizes world population by continent as a pie chart, with each slice labeled and a color-coded legend to the right. It reads population data from a CSV hosted on GitHub, converting the Population_Millions values to numbers. The chart uses `d3.pie` for slice geometry, `d3.arc` for rendering, and a categorical color scale via `d3.scaleOrdinal` with `d3.schemeCategory10`. Slices are drawn with white stroke separation, and the SVG output includes concise continent labels positioned at arc centroids.

Loading thumbnail…

ACTIVITY6_T4_Q4

This bubble chart visualizes the relationship between market capitalization and employee count for major technology companies, with bubble size encoding market cap and color representing industry sector. The chart uses D3's scaleLinear for both axes, scaleSqrt for radius mapping, and scaleOrdinal with schemeSet2 for categorical colors. Data is loaded via d3.csv and rendered as SVG circles using the join operation. A custom legend renders colored rectangles with industry labels alongside the plot.

Loading thumbnail…

ACTIVITY6_T3_Q3

This example shows a scatter plot of phone battery life versus weight, with each phone brand represented by a distinct symbol shape. The plot encodes battery life on the x-axis and weight on the y-axis, while a legend identifies each brand’s symbol. The visualization uses D3 v7 with SVG rendering, leveraging `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbol` for categorical shapes, and custom ES6 modules for axes and legend rendering. Data comes from a CSV file listing ten phone models and their specifications.

Loading thumbnail…

ACTIVITY6_T3.2

This example visualizes the Iris dataset as a scatter plot, showing the relationship between sepal length and petal length across three species—setosa, versicolor, and virginica. Each species is distinguished by a different geometric shape (circle, square, or triangle), rendered via SVG paths using `d3.symbol` and `d3.scaleOrdinal`. A legend explains the shape-to-species mapping. The code uses D3 v7 to load the CSV data, build linear scales with `scaleLinear`, and render axes with `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

ACTIVITY6_T4

This interactive bubble chart visualizes vehicle performance characteristics across 31 automotive brands, plotting horsepower on the x-axis, torque on the y-axis, and highway MPG encoded by bubble size. Each brand's bubbles are color-coded using d3.scaleOrdinal with the Tableau10 color scheme, with hover tooltips displaying exact values. Built with d3.v7, the visualization loads data from a local CSV file via d3.csv and uses d3.scaleLinear for all three encoding dimensions, rendered as SVG with axis labels, legend, and smooth hover transitions.

Loading thumbnail…

ACTIVITY6_T3

This scatter plot visualizes the Iris dataset, showing each flower's petal length on the x-axis and petal width on the y-axis. Each point is colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica), and a legend identifies these color groupings. Built with D3 v6, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axis scaling, and `d3.axisLeft`/`d3.axisBottom` to render axes. The code also loads sepal dimensions into the dataset, though these are not visually encoded.

Loading thumbnail…

ACTIVITY_6_T2_Q2

This stacked bar chart shows the distribution of movie ratings across six genres, using proportional segments to compare the share of films falling into five rating ranges from “Below 5.0” to “Above 8.5.” Each genre bar is divided into colored, percentage-labeled segments, with a tooltip revealing exact values on hover. The visualization uses D3.js v7 with SVG rendering, applying the `d3.stack()` function with a `d3.stackOffsetExpand` offset to normalize all bars to full width. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while colors come from `d3.scaleOrdinal`.

Loading thumbnail…

ACTIVITY6_T2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of titles in five rating brackets from "below 5.0" to "above 8.5." The chart uses d3.stack() to compute the stacked series and d3.scaleOrdinal with a custom color palette to differentiate rating categories. Interactive tooltips display exact percentages on mouseover using d3's event handling. The SVG rendering includes custom axes, tick styling, and genre labels via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

ACTIVITY6_T1_Q2

A horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name. Bars are rendered as SVG rectangles using React components, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded from a CSV file using `d3.csv`, and population values are formatted with `d3.format`.

Loading thumbnail…

Activity6_T1_Q1.1

A horizontal bar chart ranks the top ten countries by population for the year 2000, with green bars extending from a shared baseline and country names on the y-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Data loads from a CSV file via `d3.csv` in `useData.js`, while the axes and marks are rendered as reusable React components. SVG rectangles display the bars, and each bar includes a native `<title>` tooltip showing the formatted population value.

Loading thumbnail…

ACTIVITY6-T1

A bar chart displays the population of the first 10 countries from a dataset for the year 2000. The visualization uses D3.js version 7 to load CSV data from a remote gist, filter it by year, and render SVG bars with a steelblue fill that turns orange on hover. The code constructs a band scale for country names on the x-axis and a linear scale for population on the y-axis, with tick labels rotated for readability.

Loading thumbnail…

ACTIVITY6 Q1

This example shows a horizontal bar chart of the ten most populous countries in the year 2000, sorted in descending order. The visualization is built using React and the D3.js library (d3.v7), rendering bars as SVG rectangles. Data is fetched from a remote CSV file, parsed to convert population values from strings like "M" to actual numbers, and filtered to the top ten. The chart uses a linear x-scale for population and a band scale for country names, with axes generated by D3's `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

ACTIVITY6-QUESTION1

This example shows a horizontal bar chart comparing the populations of the top 10 countries in the year 2000, using light green bars on an SVG canvas. The visualization loads data from a remote CSV file via the `useData` async function, which parses and sorts the values. It uses D3 v7’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `d3.axisBottom` and `d3.axisLeft` for labeled axes, with population formatted in millions. The bars themselves are appended as SVG `<rect>` elements, and the chart is styled using CSS classes from the linked stylesheet.

Loading thumbnail…

Activity 6 tutoral 1

This visualization presents a horizontal bar chart ranking 28 countries by their 2020 population, sorted in descending order from China to Colombia. The chart displays population values on the x-axis in millions, with country names on the y-axis. Built with D3 v7, the code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom`/`axisLeft` for rendering tick marks. Sample population data is embedded directly in the JavaScript, with SVG rectangles representing each bar and light green styling applied via CSS.

Loading thumbnail…

ACTI-6 T1

This histogram visualizes the frequency distribution of byte values from a data source, binning values into 16-unit intervals from 0 to 255. The code uses d3.histogram to create bins and d3.scaleLinear for both x and y axes, rendering bars as SVG rectangles. The chart includes labeled axes for byte value (in hex) and frequency, with light green bars matching the specified styling. The sample data contains repeated byte values like 0x00 and 0xf8, demonstrating how the histogram groups and counts occurrences across the full byte range.

Loading thumbnail…

Fork of Hello VizHub

This bar chart visualizes the population of the top 30 countries in 2020 using a horizontal layout, with country names on the y-axis and population values on the x-axis. The data is loaded from a Gist CSV file via d3.csv, then sorted and sliced to select the top entries. The visualization uses d3.scaleLinear and d3.scaleBand to map values, while SVG rectangles render the bars. Interactive hover effects change bar colors from light green to orange, and axes are generated using d3.axisBottom and d3.axisLeft.