GOPI MUPPURI

DV_Project_13

This dashboard displays Boston incident data through three interactive charts: a horizontal bar chart of the top ten offense types, an area chart showing incident distribution across the 24 hours of the day, and a pie chart of incidents by police district with percentage labels. Built with D3 v7, the code uses `d3.rollup` for data aggregation, `d3.scaleBand` and `d3.scaleLinear` for the bar and area charts respectively, and `d3.area` with `curveMonotoneX` for the hourly trend. A responsive CSS grid arranges the chart cards, with data loaded from a remote CSV file.

dv_project

This example presents five coordinated crime data visualizations—a scatter plot, stacked bar chart, heat map, line graph, and pie chart—rendered as SVGs using D3 v7. It loads CSV data from a GitHub gist and demonstrates multiple D3 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, `d3.stack`, `d3.group`, `d3.rollup`, and `d3.axisBottom`. The scatter plot maps longitude and latitude coordinates, while the stacked bar and heat map show top offense categories by year using `d3.schemeCategory10` and `d3.interpolateBlues` color scales.

Activity_7_Q2

This visualization displays BMI distribution across age groups using a smooth area chart with interactive hover effects. The D3.js code loads CSV data, processes BMI values into High and Normal categories, and renders an SVG with gradient-filled areas. Users can hover to see a dashed line, circular marker, and tooltip showing age, BMI, and category. The implementation uses d3.area, d3.scaleLinear, d3.bisector, and d3.axisBottom/axisLeft for the chart structure.

Activity_7_Q1

This visualization displays the distribution of car classes in a dataset using a donut-style pie chart. The chart renders four categories—unacc, acc, vgood, and good—with colored arcs and percentage labels, alongside a legend showing class names and counts. Built with D3 v7, it loads CSV data externally, uses `d3.pie` and `d3.arc` for slice geometry, and applies `d3.scaleOrdinal` for categorical colors. Labels are positioned via arc centroids, and the SVG output includes a title and styled legend.

A7_Q1

A pie chart visualizes the distribution of car classes (unacc, acc, good, vgood) from a small dataset, showing proportions as labeled slices and a color-coded legend. Built with D3.js (version 7.8.5 loaded via UNPKG), the SVG rendering uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate arcs and assign colors. Percentage labels are positioned via `labelArc.centroid`, and the chart adds a title and legend. The code also imports a local ES6 module (`myMessage.js`) to demonstrate modular usage, while the stylesheet applies styling to the container, labels, and legend text.

Fork of Activity_7_Q2

This visualization displays the relationship between age and BMI, using a gradient-filled area chart with interactive hover effects. It highlights data points categorized as "High" or "Normal" BMI, and the hover interaction reveals a tooltip with age, BMI, and category details. Built with D3.js (v7.8.5), the code fetches a CSV from a GitHub gist and uses scales, axes, gridlines, and a Catmull-Rom curve for smoothing. An invisible overlay rectangle enables mouse tracking, which drives the tooltip, a dashed hover line, and a marker circle.

Activity_7_Q2

This example demonstrates a minimal D3.js setup that loads D3 v5 via UNPKG and imports both D3 functions and a local ES6 module. It uses `select` from D3 to set the text content of a `#message` div, pulling the string from an exported `message` constant in `myMessage.js`. The page includes a CSS file for styling the centered, large text. The code shows how to combine external libraries, local modules, and basic DOM manipulation in a single VizHub project.

Fork of Activity_7_Q1

This visualization shows the distribution of car classes in a dataset, displaying the proportion of each category as a donut chart with percentage labels on each slice. The chart uses D3.js version 7.8.5, loaded via CDN, to create the pie layout and arc generators, with a categorical color scale mapping four classes—unacc, acc, vgood, and good—to distinct colors. Data is loaded remotely from a CSV file hosted on GitHub Gist, and a legend on the right side displays each class with its raw count. The SVG rendering includes white strokes between slices to visually separate the segments.

Activity_7_Q1

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN via UNPKG and import specific API functions, such as `select`, from the library. The code also illustrates local ES6 module imports by importing a `message` constant from `./myMessage`, and includes a global regular expression and number variable. The rendering approach uses D3’s `select` method to set the text content of an HTML div element, with styling controlled by an external CSS file.

Activity6q1

This horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The chart uses React and D3 v5, with scaleBand for the categorical y-axis and scaleLinear for the quantitative x-axis. Population values are formatted using D3's `format` function, converting values like "G" (giga) to "B" (billion). The data is loaded asynchronously from a CSV file via d3.csv, and bars are rendered as SVG rectangles with native tooltips.

Activity6q1

This bar chart displays population estimates for the year 2000 across ten selected countries, using horizontal bars where length encodes magnitude. The chart is rendered as an SVG via React, with scales built by `d3.scaleBand` and `d3.scaleLinear`. The `Marks` component draws each `<rect>` with a `<title>` tooltip; axes are generated by custom `AxisBottom` and `AxisLeft` components. The data is loaded from a CSV file using `d3.csv`, applying a custom row parsing function that multiplies the raw value by 1000 before slicing the top ten entries.

Activity6_Task1

A horizontal bar chart displays the 2020 population estimates for the top 30 countries, sorted by country name. The visualization uses React with D3 v5 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are formatted with D3's `format` function to abbreviate large numbers (e.g., B for billions). Data loads from a remote CSV file via D3's `csv` method, and each bar includes a native SVG tooltip showing the formatted population value.

q4

This bubble chart visualizes the correlation between movie ratings across genres, plotting the percentage of ratings in the 5.0–6.5 range against the percentage in the 7.5–8.5 range. Bubble size encodes the proportion of ratings between 6.5 and 7.5. The D3 v7 SVG graphic uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for categorical genre colors, and `d3.axisBottom` and `d3.axisLeft` for labeled, percentage-formatted axes. A CSS-styled tooltip appears on hover, displaying genre-specific details. Data comes from the embedded `data.csv` file.

DV Question_4

This visualization shows the correlation between movie rating ranges across six genres using a bubble chart, with each circle representing a genre and its position mapped by the percentage of ratings between 5.0-6.5 on the x-axis and 7.5-8.5 on the y-axis, while the circle size encodes ratings between 6.5-7.5. The chart uses D3 v7 scales including d3.scaleLinear and d3.scaleOrdinal to map data values to position, size, and color. Hovering over each bubble displays a tooltip with the corresponding genre and rating percentages.

Q6

This scatter plot visualizes car performance by plotting horsepower against highway MPG for various makes, with points colored by category (Economy, Standard, Luxury, Sports). The visualization uses D3 v7 to create SVG elements, including axes, labels, and a legend, with data initially defined as a sample array. The example demonstrates basic D3 data binding, scales, and SVG rendering, but does not load the provided CSV dataset or use the separate canvas-based bar chart code in index.js.

Activity6_Task4

DV Question_3

This example visualizes car performance by plotting a scatter plot of horsepower against highway MPG, with points colored by car category such as Economy, Luxury, or Sports. The visualization uses D3.js v7 to render SVG circles, axes, and a legend, while the data comes from a static array of car models. The chart also groups car makes by category using a helper function to assign colors, demonstrating how D3 scales and selections create a clear comparison of vehicle performance across brand segments.

DV Question_2

This visualization displays car performance metrics, showing average horsepower and torque alongside highway MPG for various car makes using a horizontal stacked bar chart. The data is loaded from a CSV file using PapaParse and rendered with Chart.js on a canvas element. The chart groups vehicles by manufacturer and sorts them by total performance, with each metric represented by a distinct color segment. The tooltips display precise numeric values for each metric when hovering over individual bars.

question2

A horizontal stacked bar chart displays average horsepower, torque, and highway MPG for car makes, grouped from CSV data. The chart uses Chart.js with the PapaParse library to load and parse the bubblechart.csv file. Each bar segment is colored differently to represent the three metrics, and the makes are sorted by their combined performance values. The visualization renders on a canvas element, with tooltips showing numeric values to two decimal places.

Activity6_Task3.2

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each data point is rendered as a distinct shape, with the categorical species determining the symbol type, as shown in a legend. The visualization is built with D3 v7 and uses a modular JavaScript approach, importing utilities from the `d3` library. Key APIs include `scaleLinear` for axes, `scaleOrdinal` for shape mapping, and `symbolsFill` to generate the glyphs. The `csvParse` function loads and processes the remote CSV data, which is then drawn using the `path` element.

Activity6_Task3

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each flower species is distinguished by color: setosa appears skyblue, versicolor lightgreen, and virginica orange. The circles also encode sepal length and width through elliptical scaling via the rx and ry attributes. Built with D3 v6, it uses `d3.csv` to load data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for rendering, with SVG circles and custom axis labels.

Activity6_Task2

This stacked bar chart illustrates how movie ratings are distributed across genres, with each bar segment representing the percentage of ratings within a specific range, from below 5.0 to above 8.5. The visualization uses D3.js (v6) with SVG rendering, employing d3.stack() to aggregate the data and d3.scaleBand for the categorical y-axis. Hovering over any segment triggers a tooltip displaying the exact percentage for that rating level within the selected genre. The data originates from a CSV file containing genre-based rating proportions.

6 Buddhas

Six Buddhas overlap in a colorful, abstract mandala. The visualization builds a grid of 21x21 small circles, each with random positioning and color, to create a textured, generative background. The main focal point is a single Buddha outline rendered as an SVG path, which is then repeated six times with different scales and translations to create the overlapping effect. The piece uses React to render the SVG elements and relies on JavaScript’s `Math.random` for the background’s stochastic properties.

6 buddhas

Six buddhas overlap in a dark, generative composition built with React and SVG. Three nested `A.map` loops place hundreds of semi-transparent circles with randomized positions and RGB color values, producing a chaotic, colorful particle field beneath the central buddha path. The buddha itself is drawn using an SVG `path` with a detailed `d` attribute, scaled and translated via a `<g>` transform. React 16.10 renders the scene declaratively, with styling controlled through inline CSS that sets a black background and hidden overflow.

6 buddhas

A visualization of six overlapping Buddha head silhouettes rendered in repeating layers of small, semi-transparent circles. The piece uses React to render SVG elements, with three nested map functions generating circles at random positions and colors derived from Math.random() calls. A detailed SVG path defines the Buddha head shape, transformed and scaled across the canvas. The black background and high-opacity circles create a vibrant, layered mosaic effect.

6 Budhhas

Six overlapping Buddha silhouettes in green, blue, and purple float against a black background, formed from hundreds of semi-transparent circles scattered randomly across the canvas. The piece uses React to render SVG circles and paths, with each dot’s position and color determined by JavaScript’s `Math.random()`. A central Buddha outline draws from an inline SVG path with a thick stroke, while the surrounding speckled clusters create a luminous, chaotic halo around the figure.

6 Buddhas

Six Buddhas shows a field of small, randomly placed circles scattered over a black background, with six overlapping Buddha silhouettes rendered in bright SVG paths layered on top. The circles use React’s `Array.map` with `Math.random()` to set their positions and RGB fill colors, while each Buddha path is drawn with SVG `<path>` elements inside a `<g>` transform. The visualization combines generative randomness with fixed iconographic shapes, all built with React components and rendered directly into the DOM via ReactDOM.

5 BUDDHAS

Five translucent, rotating diamond shapes overlap on a black canvas, each filled with a randomized RGB color and rendered as SVG polygons. Built with React and ReactDOM, the piece generates a dense arrangement of shapes by mapping over a three-level nested array, applying random positions, rotations, and opacity values from `Math.random()`. A single Buddha silhouette path is then overlaid, scaled, and translated via an SVG `<g>` transform, creating a layered visual meditation on repetition and form.