1

1810vineeth@gmail.com

@Vineeth1810·16 public vizzes

Loading thumbnail…

Activity7_area_chart

This area chart visualizes monthly sales data for electronics, clothing, furniture, and toys across four smoothed, semi-transparent colored areas. It loads CSV data from a GitHub gist using `fetch` and `csvParse`, then renders an SVG chart using D3 v5. The visualization employs `scaleBand` and `scaleLinear` for axes, `area` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for ticks. A legend maps each category to its fill color, with styling defined in external CSS.

Loading thumbnail…

Activity 7_pie chart

This pie chart displays the market share of laptop companies, with each slice labeled by company name and percentage. The visualization loads CSV data from a GitHub gist, and uses D3 v5’s `pie` and `arc` generators along with `scaleOrdinal` for colors. SVG rendering includes a legend and axis titles, with text styling applied via CSS. The code imports named functions from the 'd3' module and demonstrates an ES6 module import from `myMessage.js`.

Loading thumbnail…

Activity_6_task2_question-1

This example displays a stacked bar chart of employee churn, breaking down counts of "Yes" and "No" exits per department (Sales, IT, HR, Finance, Marketing). The horizontal bars use a diverging pink and blue color scale. Built with D3 v7, the code loads CSV data, applies `d3.rollup` to aggregate counts by department, and uses the `d3.stack` function to create the stacked layers. It renders as an SVG with a custom legend and axis labels.

Loading thumbnail…

Activity6_task4_Question

This example visualizes the classic Iris dataset as an interactive bubble chart, plotting sepal length against sepal width for three species. Circle size encodes petal length, while color distinguishes species using a custom ordinal scale. Built with D3.js v7, it loads data via `d3.csv`, uses `d3.scaleLinear` for axes and bubble sizing, and renders as an SVG with animations. Hovering over a bubble reveals a tooltip with species and measurement details, and a legend identifies the color mapping.

Loading thumbnail…

Activity6_task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It also encodes sepal length and width in each circle’s rx and ry attributes, making the marks elliptical. Built with D3 v6, the code loads CSV data from a GitHub URL, uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from the D3 API, and renders SVG circles with a custom marker function for color. The visualization fills the browser window’s full width and height.

Loading thumbnail…

Activity_6_question_1.2

This visualization is a horizontal bar chart that displays population data for twenty countries in 2010. The chart uses D3 v5 scales and SVG rendering through React, with bars representing population values on a linear scale. The code imports D3 functions like `scaleBand`, `scaleLinear`, and `max` from the D3 module, and uses custom ES6 modules for axes and marks. The data is loaded from a CSV file hosted on GitHub, with population values being parsed from the 2010 column.

Loading thumbnail…

Activity_6_question_1.1

A horizontal bar chart displays the populations of ten countries in the year 2000, sourced from a CSV file. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for positioning. SVG rectangles render the bars, with axes generated through custom `AxisBottom` and `AxisLeft` components. The x-axis labels are formatted using D3's `format` function to abbreviate numbers, and each bar includes a native SVG `<title>` element for tooltips.

Loading thumbnail…

Activity6_Task4

A bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble’s position determined by horsepower (x-axis) and torque (y-axis), while its size and color represent MPG and brand, respectively. The visualization uses D3.v7’s `scaleLinear` for axes and bubble radius, `scaleOrdinal` with `interpolateTurbo` for color mapping, and `axisBottom`/`axisLeft` for tick marks. Interactive tooltips appear on hover, and a legend indicates MPG values. Data comes from `bubblechart.csv`, rendered as SVG with animated transitions.

Loading thumbnail…

Activity6_question_3

A scatter plot displays employee churn data, mapping the count of employees on the x-axis and positioning each department vertically on the y-axis. Circles are colored pink or blue to indicate whether churn occurred or not, with the CSV data loaded from GitHub. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal`, rendering circles and axes as SVG elements within an 800x400 viewport.

Loading thumbnail…

Acticity6_task3.2

This visualization is a scatter plot of the Iris dataset, showing sepal length against petal length, with species differentiated by shape (using `symbolsFill` from D3). The chart includes axes with labels and a shape legend for the three species. Built with D3 v7, the code uses a modular structure with local ES6 modules for rendering the plot and axes. Data is loaded asynchronously from a CSV file via `fetch` and parsed with `csvParse`, then numeric fields are converted before the scatter plot is drawn.

Loading thumbnail…

activity_6_task2

This example presents a stacked horizontal bar chart showing the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of movies falling into one of five rating brackets. The chart uses D3 v7’s `scaleLinear`, `scaleBand`, `scaleOrdinal`, and `stack` API to compute and render the stacked bars from CSV data. Interactive tooltips, implemented with D3 selections and event handlers, display the exact percentage for each genre-rating combination on mouseover. The visualization is rendered as SVG within a 960×500 canvas, with axes labeled and styled via external CSS.

Loading thumbnail…

Fork of activity_6_task2

This example demonstrates a simple text message display using the D3.js library, presenting the text “Hello VizHub!” prominently centered on the page. The code imports the `select` function from D3 to target an HTML element and set its content, while a local ES6 module provides the message string. The visualization is a minimal proof-of-concept for integrating D3 with modular JavaScript and CSS, showcasing basic DOM manipulation and styling without any data or complex rendering.

Loading thumbnail…

Activity6_question_1.1

This bar chart displays the populations of 30 countries for the year 2020, with countries listed along the vertical axis and horizontal bars representing population values. The visualization uses React with D3 v5, employing d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and d3.format to abbreviate tick labels (e.g., "1.2B"). Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and all marks render as SVG rectangles within a margin-based layout.

Loading thumbnail…

Activity6_tutorial_1

This example displays a horizontal bar chart of population data for 30 countries from the year 2020, using a D3 CSV load and React rendering to SVG. The chart encodes country names on the y-axis and population values on the x-axis, with bars colored green and blue tick marks. The code imports `csv`, `scaleBand`, `scaleLinear`, `max`, and `format` from D3, and uses React.js to manage the data-fetching state and render the visualization. Tooltips on each bar show the population value using a SI format that abbreviates large numbers.

Loading thumbnail…

fork of fork of 6 buddha

This visualization displays six iterations of a Buddha silhouette against a floral background, rendered as an SVG using React. The code generates a grid of twenty small circles with random positioning and RGB colors defined by a cubic function, alongside a complex path drawing the Buddha figure. It uses React and ReactDOM to construct the SVG elements, with CSS styling that centers the image and applies a hover transform effect.

Loading thumbnail…

fork of fork of 5 buddha

Five thousand randomly generated diamond polygons overlap in a dark SVG canvas, each with arbitrary rotation and RGB fill values derived from `Math.random()`. A Buddha path drawing is layered on top, translated and scaled via SVG `<g transform>`. The React component renders both the polygon grid and the detailed path data using React DOM.