golisanthoshi2000@gmail.com

@Chandramsanthoshigoli·11 public vizzes

Acitivity 7 Area

This area chart tracks the cumulative number of runs over time, using a steelblue filled region with a darkblue boundary line to emphasize the upward trend. The visualization is built with D3.js v7, rendered as SVG, and uses the `area` and `line` generators to construct the shapes. Data is loaded from a remote CSV file and processed to compute the cumulative values, with time and linear scales mapped to the x and y axes respectively.

Nov 7, 2024

Loading thumbnail…

Activity SDV Pie Chart

This pie chart visualizes the distribution of total runs scored by each batting team from an IPL deliveries dataset. The chart aggregates data using `d3.rollup` and `d3.sum`, then renders slices with `d3.arc` and `d3.pie`, using `d3.schemeCategory10` for color encoding. Each slice is labeled with its team name, and the example demonstrates loading D3 via UNPKG alongside local ES6 modules, with both a standalone script and a reusable `piePlot` function that includes a legend.

Nov 7, 2024

Loading thumbnail…

Activity 7 area

This example demonstrates a minimal "Hello VizHub" message centered on the page. It loads D3 via UNPKG and uses the `select` API from d3 to set the text content of a div. The text itself comes from a local ES6 module, `myMessage.js`, which exports the string “Hello VizHub!”. The page styling is handled through a separate CSS file.

Nov 7, 2024

Loading thumbnail…

Activity 7

This visualization displays cumulative cricket delivery data over time as a smooth, monotone area chart, with the area filled in steel blue and a dark line overlay to emphasize the trend. It is built using D3 v7 APIs such as `scaleTime`, `scaleLinear`, `area`, `line`, `curveMonotoneX`, `axisBottom`, and `axisLeft`. The chart pulls its data from a remote CSV file, aggregates daily totals using `d3.rollup` and `d3.sum`, and renders the axes, legend, and labels as SVG elements. The chart is customizable via a closure-based interface for width, height, margins, and title.

Nov 7, 2024

Loading thumbnail…

Fork of Activity 7

This example visualizes delivery data as a pie chart, showing categorical proportions with labeled slices and a matching legend. Built with D3.js, it uses the pie and arc generators to compute slice geometry, scaleOrdinal with schemeCategory10 for colors, and SVG for rendering. The chart fetches its dataset from a GitHub-hosted CSV file and is implemented as a reusable piePlot component configured via chained methods for width, height, data, and field names.

Nov 7, 2024

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This reusable D3.js scatter plot displays the relationship between two quantitative variables as circles positioned by linear scales, with labeled axes and a custom margin. The chart is fully configurable through a modular API that lets users specify width, height, data, x/y value accessors, margin, and radius. It relies on `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to compute domains and render axes, while binding data to SVG circle elements. The visualization loads its dataset from an external CSV file using `d3.csv`.

Nov 7, 2024

Loading thumbnail…

Activity 7

This example demonstrates how VizHub supports modular JavaScript development and D3.js integration. The code imports the `select` function from D3 and a custom `message` from a local ES6 module, then uses `select('#message').text()` to display the text in the page’s div element. It shows basic module imports, a regular expression, and CSS styling applied via an external stylesheet. D3 is loaded from UNPKG, while local resources include the module, HTML, and CSS files.

Nov 7, 2024

Loading thumbnail…

activity6_Task-4

This interactive bubble chart, built with D3.js v7 and SVG animation, visualizes the correlation between processor speed (x-axis), battery capacity (y-axis), and camera resolution (bubble size) across 32 smartphone brands from a CSV file. Each bubble is color-coded by brand using `d3.scaleOrdinal` and `d3.interpolateTurbo`, with a tooltip revealing brand names on hover via mouse events. The chart includes labeled axes, a circle-based legend for camera megapixels, and uses `d3.axisBottom` and `d3.axisLeft` for scales. The semi-transparent bubbles enhance visibility, while hover effects increase opacity.

Oct 22, 2024

Loading thumbnail…

activity6_Task-3

This scatter plot visualizes the relationship between the number of food items in a restaurant and the total food price increase percentage, with each circle representing a data point. The visualization uses D3 v7 and the `select`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs to render. The chart includes labeled x and y axes and shows a color legend, though all marks are filled blue and the legend appears unused in the main plot. Data is loaded from a CSV file hosted on GitHub.

Oct 22, 2024

Loading thumbnail…

activity6_Task-2

This stacked bar chart displays the nutritional composition of ten common foods, breaking down proportions of fiber, protein, fat, carbs, and vitamins along a horizontal percentage axis. Hovering over any segment reveals an interactive tooltip showing the exact percentage value. The visualization uses d3.stack() to generate layered bars, with d3.scaleBand and d3.scaleLinear handling positioning, while d3.scaleOrdinal assigns distinct colors to each nutrient category. Data comes from a local CSV file, rendered as SVG elements with mouseover and mouseout events driving the tooltip behavior.

Oct 22, 2024

Loading thumbnail…

activity6_Task-1

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with bars encoded by population magnitude and labeled with abbreviated values. The visualization uses React to render SVG elements, while D3’s `scaleBand`, `scaleLinear`, and `csv` handle data loading and axes. The `Marks` component draws rectangles with tooltips, and separate `AxisBottom` and `AxisLeft` components generate ticks. Data is fetched from a GitHub-hosted CSV file, and the chart includes a bottom axis label.

Oct 22, 2024