vchittimadha@gmail.com

@11656545·33 public vizzes

Fork of Task 9 Area Chart

This area chart visualizes US cancer cases from 2009 to 2022, using a filled path beneath a black line to emphasize the trend over time. The visualization loads CSV data from a GitHub gist and renders it as an SVG using D3 v5. It employs `d3.scaleLinear` for both axes, `d3.line` and `d3.area` generators with `curveBasis` for smooth interpolation, and `d3.axisBottom` and `d3.axisLeft` for labeled gridlines. The chart is styled with custom CSS classes for the axis labels and colored area fill.

Apr 28, 2024

Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart visualizes 2022 U.S. auto sales by brand, using data loaded from a CSV file. The chart displays proportional slices colored with a custom ordinal scale, alongside a legend showing each brand’s name, percentage of total sales, and sales volume in thousands. The visualization is built with D3 v5, using its `pie`, `arc`, `scaleOrdinal`, and `select` APIs to render SVG paths and text. Data is fetched asynchronously via a `csv` import and processed to compute totals before rendering.

Apr 28, 2024

Loading thumbnail…

Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart, with each slice colored and accompanied by a legend displaying brand names, percentage of total sales, and sales volume in thousands. The chart is rendered in SVG using D3 v5, with data loaded from a CSV file via `d3.csv`. Layout is computed with `d3.pie` and `d3.arc`, while colors are mapped using `d3.scaleOrdinal`. Percentage values are formatted with `d3.format`.

Apr 28, 2024

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

An animated scatter plot displays the Iris dataset, cycling through four flower measurements on the x-axis while keeping sepal length on the y-axis. Circles represent individual flowers, colored by species (setosa, versicolor, virginica) with a legend and axis labels. Built with D3 v6, the visualization uses `scaleLinear`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` module, and updates via `setInterval` to rotate the x-axis variable every few seconds.

Apr 28, 2024

Loading thumbnail…

Tutorial

This animated scatter plot visualizes the Iris flower dataset, cycling through four different measurement axes (petal width, sepal width, petal length, and sepal length) on the x-axis while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica), with a legend and axis labels rendered via SVG. The visualization uses D3.js v6 APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` to update circles and axes at each interval, with data loaded from a GitHub-hosted CSV file.

Apr 28, 2024

Loading thumbnail…

Fork of task 8 question 2

This bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and taste ratings on the y-axis. Each circle’s radius encodes calorie content, while its color distinguishes between seven brands, with a legend for both size and color. The visualization uses d3.csv to load the dataset, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal for categorical coloring. Interactive tooltips appear on mouseover, and the chart is rendered as an SVG, with a stroke applied to each bubble.

Apr 15, 2024

Loading thumbnail…

task 8 question 2

This bubble chart compares beverage manufacturers by plotting ratings against glucose levels, with each bubble's size representing calorie content and its color indicating the brand. The visualization uses D3.js (v7) to render SVG elements, with interactive tooltips revealing exact calorie and glucose values on hover. The chart includes legends for both bubble size and color coding, and the data is loaded from an external CSV file.

Apr 15, 2024

Loading thumbnail…

Fork of fork of bubblechart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG and car make, respectively. The visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with d3.interpolateTurbo for color, plus a tooltip for interactivity. Data comes from the included bubblechart.csv file, rendered as SVG elements with hover animations for exploration.

Apr 15, 2024

Loading thumbnail…

fork of bubblechart

This bubble chart visualizes the relationship between average horsepower, torque, and highway fuel efficiency across 31 car makes. Each circle’s position maps horsepower and torque, while its size represents highway MPG and color distinguishes the brand. Built with D3 v7, the SVG uses `scaleLinear` for axes and bubble radius, plus `scaleOrdinal` for color. Interactive tooltips appear on mouseover, and a legend explains the size and color mappings. Data comes from the included `bubblechart.csv` file.

Apr 15, 2024

Loading thumbnail…

Fork of bubblecharts

This example demonstrates a minimal VizHub template that establishes a foundational D3.js workflow. It shows how to load D3 v5 via a CDN and combine it with local ES6 modules. The code uses D3’s `select` function to target a DOM element and set its text content, while a separate local module provides the message string. The page’s appearance is defined with standard CSS. The example serves primarily as a proof-of-concept for module imports and external library integration rather than a data-driven visualization.

Apr 15, 2024

Loading thumbnail…

bubblecharts

This example displays the text “Hello VizHub!” centered on the page using D3.js. It imports the `select` function from D3 via UNPKG and a local ES6 module named `myMessage.js` that exports the message string. The code uses D3’s `select` to set the text content of the HTML element with the ID `message`, styled by an external CSS file. The example demonstrates basic D3 integration, local module imports, and CSS styling within a simple HTML page.

Apr 15, 2024

Loading thumbnail…

task8 question 3

This visualization plots the IRIS dataset as a scatter plot, using a CSV of heights and weights with category labels. The code loads the data from a remote URL via `d3.csv`, maps the rows to numeric height and weight values, and computes the scales with `d3.scaleLinear` and `d3.extent`. Circles are drawn in SVG with different fill colors—skyblue, lightgreen, or orange—assigned per category, while `d3.axisLeft` and `d3.axisBottom` create the labeled axes. The visualization displays the distribution of height and weight across the three categories.

Apr 15, 2024

Loading thumbnail…

task8 question 3

Apr 15, 2024

Loading thumbnail…

Fork of Task 8 tutorial 3.2

This example shows an interactive scatter plot of the Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and using distinct symbols to differentiate the three iris species. A legend with matching shapes identifies each species. The visualization is built with D3 v7, using `d3.scaleLinear` for the axes, `d3.scaleOrdinal` with `symbolsFill` for the shape encoding, and `d3.csvParse` to load the data from a remote CSV file. The chart updates smoothly via a state-based render loop triggered by `setState`.

Apr 15, 2024

Loading thumbnail…

Task 8 tutorial 3.2

This scatter plot displays the relationship between sepal length and petal length for iris flowers, with species encoded through different symbol shapes. It uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to map data to positions and shapes. The visualization fetches the iris dataset from a GitHub-hosted CSV file, parses it with `csvParse`, and renders axes via `axisLeft` and `axisBottom`, alongside a custom legend built with `symbol()`.

Apr 15, 2024

Loading thumbnail…

Fork of task 8 tutorial 3.2

This scatter plot displays iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis, with points shaped by species. It uses d3’s `scaleLinear` and `scaleOrdinal` to position and style the marks, and `symbolsFill` to generate distinct shapes. A custom legend shows the species-to-shape mapping. The visualization loads its CSV data from a GitHub repository, parses it with `csvParse`, and renders the chart with `select` and `join` operations from d3.v7.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Task-3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length. Points are colored and shaped by species, with a legend mapping shapes to species names. The visualization is built using D3 v7, specifically using `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisLeft`/`d3.axisBottom` for axes. The code fetches a CSV file, parses it with `d3.csvParse`, and converts numeric columns to numbers before rendering the plot with SVG paths.

Apr 15, 2024

Loading thumbnail…

Fork of Task 8 tutorial 3

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species. The code uses D3 v6 with the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load and scale the data, then renders SVG circles with custom fill colors for setosa, versicolor, and virginica. The visualization also includes rotated axis labels for petal length and sepal length, with the plot sized to fill the browser window.

Apr 15, 2024

Loading thumbnail…

Task 8 tutorial 3

This scatter plot visualizes the Iris dataset, distinguishing three flower species with colored circles: skyblue for setosa, lightgreen for versicolor, and orange for virginica. The chart plots petal length on the x-axis and petal width on the y-axis, while also encoding sepal length and sepal width as non-standard circle attributes. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG coordinates. The code loads CSV data from a GitHub gist and renders circles with fixed radius of 5 pixels on an SVG canvas.

Apr 15, 2024

Loading thumbnail…

Fork of task 8 question 2.2

This visualization displays the proportion of ratings (from "Below 4" to "Above 8") for six food categories using stacked horizontal bars. The chart uses D3 v7 to process the CSV data with d3.stack(), maps categories to the y-axis via d3.scaleBand(), and encodes proportions on the x-axis with d3.scaleLinear(). Interactive tooltips, styled with CSS, reveal exact percentages on mouseover. The SVG rendering includes a legend and custom color palette from a d3.scaleOrdinal() scale.

Apr 15, 2024

Loading thumbnail…

task 8 question 2.2

A stacked horizontal bar chart shows the proportion of ratings (below 4, 4-5, 5-6, 6-7, 7-8, above 8) for six food categories, with each bar segmented by rating range. The visualization uses D3.js v7 with SVG rendering, employing d3.stack() to aggregate the data, d3.scaleBand() for the category axis, d3.scaleLinear() for the percentage axis, and d3.scaleOrdinal() for color encoding. Interactive tooltips display the exact percentage of each rating segment on hover, using event listeners and d3.format() to present values. The data is loaded from a CSV file containing pre-computed proportions.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Fork of task 8 question 2

This example displays a stacked bar chart of movie ratings by genre, using a diverging horizontal layout where each bar segment represents a different rating category's percentage. The bars are color-coded with a categorical scale, and hovering over a segment reveals a tooltip with the exact percentage. The visualization is built with D3 v7, using `d3.stack()` to process the data and `d3.scaleBand()` for the y-axis. The chart renders as SVG, with data loaded from a CSV file.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of task 8 question 2

This stacked bar chart visualizes the distribution of movie ratings across five genres using percentage data from a CSV file. The D3 v7 code employs `d3.stack()` to compute stacked segments and `d3.scaleOrdinal` with custom color ranges to differentiate rating categories. SVG rendering displays horizontal bars, with `d3.axisBottom` and `d3.axisLeft` providing scales. Interactive tooltips appear on mouseover, showing the exact percentage for each genre-rating combination, while the chart includes a title, axis labels, and a legend.

Apr 15, 2024

Loading thumbnail…

Fork of task 8 question 2

This stacked bar chart displays movie genre ratings as horizontal bars, segmented by genre category (Action, Adventure, Comedy, Drama) across five rating types. Each bar segment shows the percentage share via a hover tooltip. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` to render SVG rectangles, with data from a local CSV file.

Apr 15, 2024

Loading thumbnail…

task 8 question 2

This example demonstrates a minimal VizHub project structure by displaying the text “Hello VizHub!” centered on the page. It uses D3 v5, loaded from a CDN, and imports the `select` function from the D3 library to set the text content of a `div` element. The code also illustrates ES6 module imports by using a local `myMessage.js` file that exports the message string, while a separate `styles.css` file controls the large font and text alignment.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Fork of Task 8 Q1-2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name with a tooltip on each bar showing the formatted population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and the SVG renders axes with custom `AxisBottom` and `AxisLeft` components.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Task 8 Q1-2

This bar chart displays the population of 20 countries in 2010, rendered as an SVG using React and D3 v5. The data is loaded from a remote CSV file and visualized with horizontal bars, where country names appear on the y-axis and population values on the x-axis. The chart uses D3's `scaleBand` and `scaleLinear` for axis scaling, and `format` to abbreviate large numbers. Interactive tooltips show the exact population value on hover, while the axis ticks and labels are styled with custom CSS.

Apr 15, 2024

Loading thumbnail…

Fork of Task 8 Q1-2

This example displays a horizontal bar chart of 2010 population data for 20 countries, sourced from a GitHub CSV file. The chart encodes population values on a linear x-axis scale and country names on a categorical y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for scales, and renders SVG `rect` elements for bars. The code demonstrates loading D3 via UNPKG and importing from local ES6 modules, with tooltips formatted using `d3.format`.

Apr 15, 2024

Loading thumbnail…

Task 8 Q1-2

This example demonstrates the basic setup and modular structure of a VizHub project. It loads D3 v5 via UNPKG and uses the `import` statement to bring in the `select` function from the D3 library and a local ES6 module. The code selects a `div` element with the ID `message` and sets its text content to a string exported from a separate module. The page is styled with custom CSS to center the text and render it at a large font size.

Apr 15, 2024

Loading thumbnail…

Task 8 question 1

This interactive bar chart displays population estimates for ten countries in the year 2000, using a horizontal layout with 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 is loaded via `d3.csv` from a GitHub-hosted CSV file, with population values multiplied by 1,000. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, while `Marks` generates the bars with tooltips formatted using D3’s `format` API.

Apr 15, 2024

Loading thumbnail…

task 8 q1

This example visualizes the 2020 population estimates for 30 countries as a horizontal bar chart. Population values are loaded from a remote CSV file via `d3.csv`, with the y-axis ordered by country name using `d3.scaleBand` and the x-axis scaled linearly with `d3.scaleLinear`. The chart is rendered as SVG in a React app, using local AxisBottom, AxisLeft, and Marks components to draw axes and bars, with tooltips formatted using D3’s `format` function.

Apr 15, 2024

Loading thumbnail…

Activity 6 task 1

This example demonstrates a minimal VizHub setup that displays the text “Hello VizHub!” centered on the page using D3. It loads D3 v5 from UNPKG and uses the `select` function to target the `#message` div, setting its text content with D3’s `.text()` method. The code also imports a local ES6 module for the message string and includes a regular expression and a variable, though these are unused. The page structure is defined in HTML, with styles provided by an external CSS file.

Apr 14, 2024

Loading thumbnail…

2 buddhas

Two buddha silhouettes appear side by side, each built from a dense cluster of randomly scattered, semi-transparent colored polygons. The visualization layers overlapping triangular shapes in a dark field, creating a shimmering, mosaic-like effect over the figure outlines. The code uses React to render an SVG scene, mapping a nested array of values to thousands of `<polygon>` elements with random fill colors and opacity. The buddha paths are drawn from embedded SVG path data and transformed and scaled into position within the same SVG canvas.

Mar 25, 2024