V

vemurisuchitha@gmail.com

@vemurisuchitha·16 public vizzes

Loading thumbnail…

Area_Chart

This area chart displays vehicle fuel consumption by vehicle make for the year 2000, with the x-axis showing the make and the y-axis representing fuel consumption in liters per 100 kilometers. The chart uses the D3.js version 6 library, specifically leveraging `d3.csv` to load data from a remote GitHub CSV file, `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.area` to generate the filled area path. The rendered visualization is an SVG element with labeled axes and a title, styled through attributes set on SVG text elements.

Loading thumbnail…

PieChart_Vehicle_Transmission

This pie chart displays the distribution of vehicle transmission types from a 2000 model year dataset, with slices colored via a categorical scale. The chart uses d3.pie to compute arc segments and d3.arc to render them as SVG paths, with an animated tooltip appearing on mouseover to show each transmission type and its count. Data is loaded from a CSV file using d3.csv, aggregated with d3.rollup, and presented alongside a legend built from the same data. The visualization employs a static SVG canvas with interactive hover effects.

Loading thumbnail…

activity9

This example demonstrates a simple VizHub project that renders the text “Hello VizHub!” centered on the page using D3.js. It shows how to load D3 via UNPKG, import functions from the D3 library (specifically `select`), and use local ES6 modules through the `myMessage.js` file. The code selects the `#message` div and sets its text content using D3’s `selection.text` method, while CSS styles the message with a large font size. The example highlights basic module imports and D3 DOM manipulation.

Loading thumbnail…

Activity6_task4_question1

This bubble chart displays the relationship between performance score and user experience score for seven smartphone brands, with circle size encoding battery capacity. The visualization uses D3 v7 with SVG rendering, employing d3.scaleLinear for both axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeTableau10 for color coding. Each brand is labeled directly on its corresponding bubble.

Loading thumbnail…

Activity6_task4_question1

This example demonstrates basic D3.js and ES6 module usage within a VizHub project. It loads D3 from UNPKG and imports the `select` function from the D3 library to target a div element. The code also imports a string constant from a local ES6 module and assigns it as the text content of that div. The page renders the message “Hello VizHub!” centered in a large font size, according to the styles.css rule. This serves as a simple template for combining D3 selection methods with modular JavaScript.

Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across different car makes. It uses d3.scaleLinear for the x and y axes, with bubble size mapped to highway MPG and color mapped to car make via d3.interpolateTurbo and d3.scaleOrdinal. The visualization includes a tooltip that reveals the make on hover, and a legend displaying MPG values and color categories. Data is loaded from a CSV with d3.csv and rendered as SVG circles with animation on mouseover.

Loading thumbnail…

Activity6_Task4_q1

This example demonstrates a basic D3.js setup within VizHub, showing how to import modules from both D3 and local ES6 files. It uses the `select` API from D3 v5 to target a `#message` div and update its text content. The text itself comes from a local `message` variable exported by a separate module, while the page loads D3 via UNPKG and links an external stylesheet. The visualization simply renders a static, centered text message using CSS for styling.

Loading thumbnail…

Activity6_task2

This chart displays the distribution of IMDb movie ratings across five rating bins, from "below 5.0" to "above 8.5," broken down by six genres including Documentary, Drama, and Action. Each horizontal bar is a stacked segment, proportional to the percentage of movies in each rating category for that genre. The visualization is built with D3 v7, using `d3.stack()` and `d3.scaleOrdinal()` for color mapping, and SVG rendering. Interactive tooltips reveal the exact percentage values for each rating segment. Data is sourced from the provided `data.csv` file.

Loading thumbnail…

Activity6_task3_3

This scatter plot visualizes the relationship between age and weight from a synthetic health dataset. The visualization encodes each data point as a circle, with position determined by age on the x-axis and weight on the y-axis. The chart uses d3.scaleLinear for both axes and d3.axisBottom/axisLeft to render tick marks. The code colors points based on gender using d3.scaleOrdinal and includes a shapeLegend function that displays the color mapping. The data is loaded via d3.csv from a GitHub-hosted CSV file and rendered as SVG elements.

Loading thumbnail…

Activity6_Task2_q1

This stacked bar chart compares smartphone brand sales for Apple, Samsung, and Xiaomi across seven countries, with each bar segment representing a brand’s contribution to total sales. Hovering over a segment reveals a tooltip with the exact brand, sales figure, and country. The visualization uses d3.csv to load the dataset, d3.stack() to aggregate values, and d3.scaleBand for the x-axis. Color-coded segments follow an ordinal scale, while an SVG legend identifies each brand.

Loading thumbnail…

Task 3 Question3

This stacked bar chart visualizes phone brand sales (Apple, Samsung, Xiaomi) across five countries, with each bar segment representing a brand's contribution to total sales. The chart uses D3.js v7 with SVG rendering, loading data from a CSV file. It employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.stack` to compute stacked segments. Hover tooltips display exact sales figures per brand and country. A color-coded legend identifies each brand.

Loading thumbnail…

Activity6_Task3_2

This scatter plot shows the relationship between sepal length and petal length for three iris species, with each species distinguished by a different symbol shape and a legend labeling the categories. The visualization loads CSV data from a GitHub-hosted iris dataset and uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` to render the axes and symbols. The legend is built by appending paths and text elements within a dedicated group, while the chart updates responsively to the window size.

Loading thumbnail…

Activity6_Task3_1

This scatter plot visualizes the Iris dataset, mapping petal length against petal width for individual flowers. Each point is colored by species—setosa, versicolor, and virginica—using skyblue, lightgreen, and orange. The visualization is built with D3 v6, loading data via CSV and rendering SVG circles. It uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and custom radius scaling based on sepal dimensions, though it does not apply multi-dimensional scaling.

Loading thumbnail…

Fork of activity 6_Task 1_2000

This bar chart displays the population of ten countries for the year 2000, with horizontal bars sorted by country name along the y-axis. The chart uses React and D3 v5, with scales from `d3.scaleBand` and `d3.scaleLinear`, rendering as SVG. Data loads via `d3.csv` from a GitHub repository, and the population values are formatted with `d3.format` to display in billions. Axis components and marks are built with reusable React components, and each bar includes a native SVG `<title>` tooltip.

Loading thumbnail…

question2_activity_2010

A horizontal bar chart displays 2010 population figures for twenty countries, sourced from a CSV file. The visualization uses React with D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rectangles render the bars, with axes generated by custom components and tooltips via SVG `<title>` elements. Population values are formatted using `d3.format` to abbreviate large numbers, such as converting gigabytes to billions.

Loading thumbnail…

activity 6_Task 1

This example demonstrates a minimal VizHub project structure, showing how to load D3 via UNPKG and use ES6 module imports for local code. The page renders the text “Hello VizHub!” centered on the screen using D3’s `select` method to set the text content of a `div` element. The code also defines a regular expression and a numeric constant, though these are not used in the display. D3 v5 is loaded from a CDN, with styling applied via external CSS.