Skip to main content
Log in
J

jaswanthreddy2715@gmail.com

@jaswanth0612·14 public vizzes

Loading thumbnail…

area chart

This area chart displays the number of iPhone users from 2007 to 2017, with a purple filled area beneath a black line. The visualization uses D3.js v5 to render SVG elements, employing `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a remote CSV file and parsed with `csv`. The chart includes axis labels, custom colors, and a formatted y-axis tick display.

Nov 5, 2024
Loading thumbnail…

piechart

This visualization displays a pie chart representing the top 10 store areas by sales, with each slice labeled by its sales value and accompanied by a color-coded legend. The chart sorts the input CSV data in descending order before extracting the top 10 entries, then uses d3.pie() and d3.arc() to generate the slices within an SVG rendered by React. The code employs d3.scaleOrdinal for color assignment and d3.csv to load the Stores dataset from a GitHub gist, with slice labels positioned using arc.centroid().

Nov 5, 2024
Loading thumbnail…

Fork of Activity 7

This animated scatter plot visualizes the Iris dataset, cycling through four feature pairs on the x-axis while keeping petal width on the y-axis. It uses D3.js v6.7.0 to load CSV data via `d3.csv` and render SVG circles colored by species. The visualization employs `d3.scaleLinear` for axes, a `setInterval` callback to rotate through column selections, and custom legend labels. The code includes a `scatterPlot` factory function with configurable accessors and margin settings.

Nov 5, 2024
Loading thumbnail…

Activity 7

This example demonstrates basic D3.js and ES6 module integration within a VizHub project. It renders a single centered text message, "Hello VizHub!", inside an HTML div element using the `select` function from D3 v5. The code imports the text from a local ES6 module (`myMessage.js`) and applies styling through an external CSS file. The page loads D3 from a CDN via UNPKG, while the main script uses `import` statements to combine D3’s selection API with custom local module code.

Nov 4, 2024
Loading thumbnail…

Activity 7

This example demonstrates basic D3.js and ES6 module integration within a VizHub project. It renders a single centered text message, "Hello VizHub!", inside an HTML div element using the `select` function from D3 v5. The code imports the text from a local ES6 module (`myMessage.js`) and applies styling through an external CSS file. The page loads D3 from a CDN via UNPKG, while the main script uses `import` statements to combine D3’s selection API with custom local module code.

Nov 4, 2024
Loading thumbnail…

Question 4

This bubble chart displays the relationship between GDP per capita, life expectancy, and population for countries across continents, with each circle’s size encoding population and color distinguishing continents. Built with D3.js v4 and rendered as SVG, it includes an interactive tooltip that shows the country name on hover, while highlighting and dimming by continent using CSS class selectors. The chart loads CSV data from a GitHub repository, uses `d3.scaleSqrt` for bubble sizing, `d3.scaleOrdinal` with `d3.schemeSet1` for colors, and animates opacity transitions for hover effects.

Oct 19, 2024
Loading thumbnail…

Question 4

This example renders the text “Hello HTML!” at a massive font size, centered on the page. It uses plain HTML, CSS, and JavaScript without any external libraries, demonstrating a minimal starter template. The styling employs an inline CSS rule to set the font-size and text-align properties, with the content wrapped in a single div element. The page serves as a basic structural reference for embedding JavaScript and CSS in an HTML document.

Oct 19, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position maps horsepower and torque on the x- and y-axes, while its radius and color encode highway MPG and manufacturer, respectively. The visualization uses d3.csv to load data, d3.scaleLinear for axes and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, and a legend communicates both MPG scale and make-specific colors. The SVG rendering includes animated hover effects that enhance opacity and stroke width.

Oct 19, 2024
Loading thumbnail…

Question 3

A scatterplot displays the relationship between GrLivArea and SalePrice from a two-numeric-column CSV dataset. D3 v4 loads data via `d3.csv` and renders SVG circles positioned by `d3.scaleLinear` scales for both axes. The chart includes axis generators `d3.axisBottom` and `d3.axisLeft` to label the plot, with points colored teal and sized at 1.5 pixels radius.

Oct 19, 2024
Loading thumbnail…

Activity6_Task3

This example visualizes the Iris dataset, plotting sepal length against petal length for each flower specimen. The scatter plot uses distinct symbols to represent the three iris species, with a legend positioned on the right side. Built with React and D3 v7, the code leverages scaleLinear for axes, scaleOrdinal and symbolsFill for shape encoding, and axisLeft/axisBottom for tick marks. The visualization loads CSV data asynchronously from a GitHub repository and adapts to the full browser window size.

Oct 19, 2024
Loading thumbnail…

Activity6_Task2

A stacked bar chart displays sales totals for Clothing, Equipment, and Accessories across five named stores, using distinct colors for each category. The visualization relies on D3 v7’s `d3.stack()` to layer the data series, with `d3.scaleBand` positioning bars and `d3.scaleLinear` mapping values to the y-axis. SVG rectangles render each stack segment, while rotated bottom-axis labels and a custom HTML/CSS legend improve readability. The CSV data is embedded directly in the JavaScript, and the chart is generated entirely client-side.

Oct 19, 2024
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the population of 20 countries in 2010, ordered by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to map the data from a remote CSV file, while `d3.format` converts tick labels to abbreviated "B" for billions. The SVG rendering includes custom axis components and rectangle marks with tooltips showing each value, styled with green fills and blue tick lines.

Oct 19, 2024
Loading thumbnail…

activity 6_Task 1

This example displays a simple text message, “Hello VizHub!”, centered on the page using D3.js to select the target HTML element and set its content. The code imports local ES6 modules and demonstrates how D3 can be loaded via UNPKG, alongside custom CSS styling. It highlights the basic integration of D3 within a VizHub project, using the `select` API to manipulate the DOM.

Oct 19, 2024
Loading thumbnail…

Fork of Buddha -overlapping Buddha

The visualization displays a large, ornate Buddha silhouette composed of numerous overlapping, colorful paths. Rendered as SVG elements, the image shows a decorative figure with floral patterns, presented against a photographic background of green flowers. Built with React, the code defines a complex path and uses multiple layered copies, each with a distinct color, creating a vibrant, mosaic-like effect through overlapping shapes and lines.

Oct 17, 2024