charankumarreddyveeramreddy@my.unt.edu

@Charankrv·17 public vizzes

Activity 7.1_Question 2

This area chart displays the Palmer Penguins dataset, showing culmen depth as a filled area across culmen length for each species. Three overlapping, semi-transparent colored areas represent the species distributions. The code loads CSV data via `d3.csv`, groups by species using `d3.group`, and renders areas with `d3.area` and `curveBasis`. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleLinear` and colors from `d3.scaleOrdinal`.

Nov 2, 2024

Loading thumbnail…

Activity 7.1_Question 1

A pie chart displays the distribution of penguin species from a CSV dataset, showing counts for each species with labeled segments. The visualization uses D3 v6 APIs including `d3.csv` for data loading, `d3.pie` and `d3.arc` for generating the pie geometry, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Each segment is rendered as an SVG path with a white stroke, and text labels using `arcPath.centroid` position the species name and count at the center of each slice.

Nov 2, 2024

Loading thumbnail…

Activity 7.1_Tutorial

This scatter plot visualizes the Palmer Penguins dataset, displaying culmen length against culmen depth with points colored by species (blue for Adelie, green for Gentoo, red for Chinstrap). The code uses D3 v6 to load CSV data via `d3.csv`, scales with `d3.scaleLinear`, and renders SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. Data is parsed from a remote GitHub source, and the plot fills the browser window with labeled axes.

Nov 2, 2024

Loading thumbnail…

Activity 6_Task 1 Q1.1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart, using a linear x-scale for population values and a band scale for country names. Built with React and D3 v5, the chart renders SVG rectangles via a custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. Population data is loaded from a remote CSV using D3’s `csv` function, and the x-axis labels are formatted using `d3.format` to abbreviate numbers (e.g., "1.5B").

Oct 20, 2024

Loading thumbnail…

Activity 6_Task 4_Question

This bubble chart visualizes employee statistics for major tech companies, plotting revenue on the x-axis and employee count on the y-axis. Each circle’s size encodes market capitalization, its color distinguishes companies via a categorical scale built with `d3.scaleOrdinal` and `d3.interpolateViridis`. Data is loaded from a CSV using `d3.csv`. The SVG renders axes with `d3.axisBottom` and `d3.axisLeft`, and a tooltip appears on mouseover. A legend with dashed connector lines explains market-cap ranges, and hover interactions increase opacity.

Oct 20, 2024

Loading thumbnail…

Activity 6_Task 4_Question

This bubble chart visualizes data from a provided CSV file, using a force-directed layout to position circles whose size and color encode the dataset’s quantitative dimensions. The chart is built with D3 v7, leveraging `d3.forceSimulation` for the layout and standard SVG elements for rendering. Interactive hover effects increase opacity and stroke width, and a tooltip provides additional detail. The visualization relies on a local CSV file, with styling defined in an external stylesheet.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 4_Tutorial

This bubble chart visualizes the relationship between average horsepower and torque for various car makes, with bubble size representing highway MPG and color indicating the brand. The D3.js v7 visualization uses an SVG rendering with animated tooltips that display car make on hover. It includes a color-coded legend and size reference circles. The chart reads data from a CSV file and uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal for color encoding, and d3.axisBottom, d3.axisLeft, and d3.interpolateTurbo for styling.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 3.2_Question

This scatter plot displays the relationship between culmen length and culmen depth in the Palmer Penguins dataset, with each species represented by a distinct symbol from `d3.symbolsFill`. The code loads the data via `fetch` and `csvParse`, then uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for shape mapping, while `shapeLegend` renders a custom legend. Axes are generated with `axisLeft` and `axisBottom`, and all marks are drawn using `symbolGenerator.type().size()` within `d3.selectAll('path.mark')`.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 3.1_Question

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between culmen length and culmen depth, with each species—Adelie, Gentoo, and Chinstrap—represented by a distinct color (blue, green, and red). The code uses d3.csv to load data from a GitHub URL, d3.scaleLinear to map data to screen coordinates, and d3.axisLeft and d3.axisBottom to render axes. SVG circles are drawn using a data join, and axis labels are added via d3.select, with the chart sized to the full browser window.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 3.2_Tutorial

This example shows a scatter plot of the Iris dataset, mapping sepal length to petal length and using distinct symbols to differentiate the three species. The visualization loads data from a remote CSV file and uses `csvParse`, `scaleLinear`, and `scaleOrdinal` to position points and assign symbol types. Axes are drawn with `axisLeft` and `axisBottom`, while a custom legend displays the species labels. The chart size and legend placement adapt to the window, demonstrating a modular D3 v7 setup with reusable functions.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 3.1_Tutorial

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample. Points are colored by species, with setosa in blue, versicolor in green, and virginica in red. The code loads the CSV data via d3.csv, then uses d3.scaleLinear with d3.extent to establish the x and y scales, and renders circles with d3.selectAll and .join. Axes are generated using d3.axisLeft and d3.axisBottom, with custom labels added as SVG text elements. The visualization fills the browser window using window.innerWidth and window.innerHeight.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 3.2 Tutorial

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length. Different species are represented by distinct D3 symbols, such as circles and crosses, with a legend annotating each shape. Built with D3 v7, it uses `csvParse` to load data and `scaleLinear` for axes. The code generates the plot using reusable modules for rendering axes (`axisLeft`, `axisBottom`) and the shape legend, with rendering triggered by a simple state-based update cycle.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 2 Question

This horizontal stacked bar chart displays sales figures across five store locations, broken down by Clothing, Equipment, and Accessories categories. The visualization uses d3.stack() with keys for each product category, d3.scaleBand() for the store axis, and d3.scaleLinear() for the value axis. Rendered as SVG via d3.v7, the chart includes axes, labels, and a clickable legend showing category colors from a d3.scaleOrdinal palette, all drawn within a single HTML page.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 2_tutorial

This stacked bar chart visualizes the distribution of IMDb ratings across different movie genres. It shows the proportion of films falling into five rating brackets, from "below 5.0" to "above 8.5," with each genre's total bar summing to 100%. Hovering over a segment reveals the exact percentage for that rating category within the selected genre. The visualization is built with D3 v7, using the `d3.stack` function to create the stacked segments and `d3.scaleOrdinal` for color assignment. It reads data from a local CSV file and renders all elements as SVG. Interactive tooltips are implemented using mouse event handlers on each rectangle.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task 1 Q1.2

This bar chart displays the populations of 20 countries in 2010, ranked along a vertical band scale. React renders the SVG marks while D3 v5’s `scaleBand` and `scaleLinear` position each bar, with axis components using `xScale.ticks()` for labels and a SI format to abbreviate billions. Data loads via `d3.csv` from a remote GitHub URL, and tooltips show formatted population values through native SVG `<title>` elements.

Oct 19, 2024

Loading thumbnail…

6 Buddas

Six overlapping Buddha silhouettes form a kaleidoscopic arrangement on a vibrant floral background. Each Buddha path is rendered as an SVG element using React, scaled and translated to create a layered, repetitive composition. The example relies on React’s declarative component structure to generate the SVG markup, with a hard-coded path data string reused across six groups. CSS styles the page with a background image and hidden overflow, while the visual effect emphasizes symmetry and repetition through simple geometric transforms.

Oct 18, 2024

Loading thumbnail…

5 Buddas

Five overlapping Buddha silhouettes fill a dark SVG canvas, each rendered as a jagged polygon path scaled and rotated to create a psychedelic, kaleidoscopic composition. The image is built with React and ReactDOM, mapping over arrays to generate hundreds of semi-transparent, randomly colored polygon shapes. A central Buddha path is embedded in the SVG, layered with the procedural noise-like polygons. The code uses React’s JSX to declaratively construct the SVG elements, with no external visualization library, relying solely on built-in SVG polygon and path APIs.

Oct 11, 2024