N

Nithish Karanam

@Nithishkaranam2002·30 public vizzes

Loading thumbnail…

Activity 7 question 2

This interactive visualization displays regional electronics sales from 2020 to 2024, offering both an area chart and scatter plot view with toggle buttons. The area chart shows sales trends over time for four regions, with hover effects that highlight individual regions and dim others. The scatter plot presents the same data as individual points with tooltips showing detailed information, plus simple linear regression lines for each region. Built with D3 v7, the visualization uses SVG rendering, d3.scaleBand, d3.scaleLinear, d3.area, d3.axisBottom, and d3.axisLeft, loading CSV data from a GitHub repository.

Loading thumbnail…

Activity 6 question 1

This visualization shows global smartphone market share for major manufacturers in 2024 using a pie chart, with Samsung and Apple dominating at over 40% combined. The chart is built with D3 v7, using `d3.pie()` and `d3.arc()` to generate slices, a `d3.scaleOrdinal` with `d3.schemeTableau10` for colors, and SVG rendering. Data loads from a GitHub CSV file via `d3.csv()`, with interactive tooltips on hover and a legend showing each brand's percentage.

Loading thumbnail…

Activity 7

This scatterplot visualizes the Iris dataset, plotting sepal width against sepal length for three flower species. The D3.js chart uses separate colors for setosa, versicolor, and virginica, with circles for each data point. Interactive tooltips display species and values on hover, while an axis legend identifies the species. Built with d3.v7, it loads CSV data from a remote URL and uses scaleOrdinal for colors and scaleLinear for axes. The SVG rendering includes a responsive layout that adjusts to window size, with axes, labels, and a legend.

Loading thumbnail…

Activity6_Task4 question 1

This bubble chart shows how major technology companies compare across three financial and operational metrics: annual revenue, profit margin, and employee count. Each company appears as a circle positioned by its revenue on the x-axis and profit margin on the y-axis, with the bubble’s size encoding employee numbers and colors distinguishing companies. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Interactive tooltips appear on mouseover, and the chart reads data from a CSV file containing the ten companies’ figures.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across different car makes. Each bubble’s x-position encodes horsepower, the y-position encodes torque, and the circle’s radius encodes highway MPG, while color distinguishes the car manufacturer. Hovering over a bubble reveals a tooltip with the make name. The chart, rendered as SVG, includes a legend for MPG and color-coded makes. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for color mapping, with data loaded from a CSV file.

Loading thumbnail…

Activity 6 task3 question 1

This scatter plot visualizes the relationship between study hours and exam scores, with each point colored by subject (Math, Science, English). The visualization loads data from a remote CSV file and renders circles using D3’s scaleLinear and scaleOrdinal APIs. Hovering over points reveals a tooltip with detailed information. The chart includes labeled axes, a color-based legend, and is built with animated SVG elements controlled through D3’s data joins and transitions.

Loading thumbnail…

Activity 6 task 3.2

A scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis while encoding species with different SVG shapes (circles, crosses, diamonds) via a legend. Data is loaded asynchronously from a CSV and parsed with `d3.csvParse`. The code uses D3 v7 scales (`scaleLinear`, `scaleOrdinal`), axes, and a custom legend module built with `d3.symbol` and join patterns to render marks.

Loading thumbnail…

Activity 6 task 3

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for three Iris species, with each point colored by species category. The D3 v7 code loads the CSV from a GitHub repository, converts string measurements to numbers, and uses `d3.scaleLinear` for the axes, `d3.scaleOrdinal` for the color mapping, and `d3.axisBottom`/`d3.axisLeft` for the tick marks. Points are rendered as SVG circles with an opacity of 0.8, and the chart includes labeled axes titled "Sepal Length" and "Petal Length."

Loading thumbnail…

Activity 6 task 2 question 1

This example shows the distribution of age-group percentages across multiple streaming platforms using a stacked horizontal bar chart. Six platforms, including Netflix, Hulu, Disney+, and others, are compared across five age brackets from Under 18 to 45+. The data is loaded from a CSV file and rendered as SVG using D3.js v7, with d3.stack() to compute the stacking and d3.scaleOrdinal to assign categorical colors. Interactive tooltips display the exact percentage for each platform-age segment on mouseover.

Loading thumbnail…

Activity 6 Task 2

A stacked horizontal bar chart shows the percentage distribution of IMDb ratings across six genres, from documentary to action, with each bar divided into five rating brackets. The visualization uses D3 v7's `d3.stack()` to compute stacked series, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Data from `data.csv` is loaded and rendered as SVG rectangles, with mouseover interactions that display exact percentages via tooltips.

Loading thumbnail…

Activity 6 Task 2

This example displays a simple web page that renders the text “Hello VizHub!” in large, centered type. It serves as a minimal demonstration of a basic D3.js setup, showing how to structure a project with separate files for markup, styles, and logic. The code imports the `select` function from D3 v6 to target the `div` with id `message` and sets its text content using the `message` constant exported from an ES6 module. Styles are applied via a linked CSS file, controlling font size and alignment.

Loading thumbnail…

Question2 task 1

This interactive bar chart displays the populations of 30 countries in 2020, sorted in descending order along a horizontal axis. It uses D3.js to load a CSV from a GitHub repository, process the data, and render an SVG with horizontal bars, a log-scaled x-axis for population values, and a y-axis listing country names. The visualization includes tick marks, axis labels, and hover tooltips for detailed population values.

Loading thumbnail…

Activity 6 task 1

This bar chart ranks the top 30 countries by population in 2020, using horizontal bars with population values on the x-axis and country names on the y-axis. The visualization is built with D3.js (v7) and rendered as an SVG, loading data from a CSV file. It uses custom components like `AxisBottom`, `AxisLeft`, and `Marks` to create the axes and bars, with D3's `scaleLinear` and `scaleBand` for data mapping and a custom tick format that converts numbers to billions.

Loading thumbnail…

Activity 6

This example displays a minimal static web page showing the text “Hello HTML!” centered in the browser window. The page includes an HTML file, a CSS stylesheet, and a JavaScript file that simply logs “hello world” to the console. It uses no external libraries or data sources, only plain HTML, CSS, and JavaScript to demonstrate the basic structure of a web-based project. The file appears to be a starter template for building a data visualization, but the current version contains no visualization code or interactive elements.

Loading thumbnail…

Question 1 task 1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, with each bar labeled with its corresponding population value. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` and `d3.scaleLinear` to map countries and population values to screen coordinates. Custom axis components (`AxisBottom` and `AxisLeft`) generate rotated tick labels and formatted tick text, while the `Marks` component draws the steel-blue rectangles and value labels. The data is loaded from a CSV file hosted on GitHub, processed in a `useData` function, and filtered to extract the 2000 population column.

Loading thumbnail…

Activity-6 Task 1

This horizontal bar chart displays the top 30 countries by population in 2020, with bars extending from the left edge and a logarithmic-free linear scale for population values. The visualization uses D3 v7’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering SVG rectangles via a data join. Light green bars represent each country, with a custom tick formatter converting numeric values to abbreviated formats like “B” for billions. Population data is loaded as CSV from GitHub and sorted descending before filtering to the top 30 entries.

Loading thumbnail…

Activity 6 DV

This horizontal bar chart displays the top 30 most populous countries in 2020, sorted in descending order. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Bars are colored light green, and axis labels are formatted using `d3.format`. The data is loaded from a CSV file via `d3.csv` and processed with the `useData` utility function.

Loading thumbnail…

Activity 6 Assignment

This example displays a simple, large-format message, "Hello VizHub!", as a demonstration of basic D3.js integration within a VizHub activity. The visualization uses the D3 library (d3.v7) to select an HTML element with the ID `message` and set its text content. The rendering approach relies on a web page styled with Poppins font, where the text is centered with a large font size, showing a minimal workflow for combining D3 with local ES6 modules. The data source is a static string exported from a separate module, illustrating modular code structure.

Loading thumbnail…

Activity6

This visualization presents a horizontal bar chart of the top 30 countries by 2020 population, derived from a CSV dataset. It uses React components for rendering SVG marks, with D3 v5 scales for layout. The `scaleBand` y-axis and `scaleLinear` x-axis position and size the rectangles, while a tooltip via the SVG `<title>` element reveals the formatted population value.

Loading thumbnail…

Activity-6

This example shows a horizontal bar chart of the 30 most populous countries in 2020. Each bar’s length represents population, with a green fill and tooltips displaying formatted values, while the y-axis lists country names. The visualization is built with React and renders SVG elements. It uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and a CSV file fetched from a GitHub repository as the data source. Axis ticks are customized via `d3.format` to abbreviate large numbers.

Loading thumbnail…

Activity 6

This example visualizes population data for various countries as a horizontal bar chart, using bar length to represent population size. The chart employs D3.js v6 with SVG rendering for drawing the chart elements, axes, and tick labels. It utilizes `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `format` with custom logic to display large numbers in compact notation (e.g., converting 'G' to 'B'). The data is loaded asynchronously and processed to set domain ranges and render bars with tooltips.

Loading thumbnail…

Activity 6

This bar chart displays the populations of the top 30 countries in 2020, sorted in descending order. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with data loaded via d3.csv from a GitHub-hosted CSV file. SVG rectangles represent the bars, and d3.axisBottom and d3.axisLeft render the ticks. The code formats population values using d3.format, and tooltips show the exact population on hover.

Loading thumbnail…

Activity 6 task 1

This horizontal bar chart ranks the 30 most populous countries in 2020, using population size along the x-axis and country names along the y-axis. The visualization loads CSV data from a GitHub repository via `d3.csv`, processes it with a custom row function, and sorts the entries in descending order. The chart is rendered as an SVG using `d3.select`, `scaleLinear`, and `scaleBand`, with axes generated through `axisBottom` and `axisLeft`. Bars are drawn with `selection.join('rect')` and are styled with a light green fill, while tick labels use a custom si-format prefix converter that replaces 'G' with 'B' for billions.

Loading thumbnail…

Activity 6

This example shows the 2020 population for 30 countries as a horizontal bar chart built with React and D3 v5, rendered as SVG. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format('.2s')` to abbreviate tick labels (e.g., converting G to B). Data is loaded asynchronously from a remote CSV via D3’s `csv` method, with the axis and marks defined as reusable React components.

Loading thumbnail…

Activity 6 task 1

This example presents a horizontal bar chart showing the population of various countries, using data from a CSV file from a GitHub gist. The visualization is implemented in JavaScript with D3, where the x-axis uses a linear scale and the y-axis uses a band scale. The bars are drawn as SVG rectangles with a steelblue fill, and each bar is labeled with its population value. The chart includes left and bottom axes, created using `axisLeft` and `axisBottom`, and the code uses dynamic scaling and margin calculations to position the visualization.

Loading thumbnail…

Activity 6 task 1

This example presents a horizontal bar chart showing the population of various countries, using data from a CSV file from a GitHub gist. The visualization is implemented in JavaScript with D3, where the x-axis uses a linear scale and the y-axis uses a band scale. The bars are drawn as SVG rectangles with a steelblue fill, and each bar is labeled with its population value. The chart includes left and bottom axes, created using `axisLeft` and `axisBottom`, and the code uses dynamic scaling and margin calculations to position the visualization.

Loading thumbnail…

Activity 6_Task 1

This bar chart displays 2020 population estimates for 30 countries, with country names on the y-axis and population on the x-axis. The visualization uses React with D3 v6, employing `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles via the `Marks` component. The data is loaded asynchronously from a CSV file using the `csv` function, with population values multiplied by 1000 and formatted using `format('.2s')` to show values in billions. Native SVG `<title>` elements provide tooltips on hover.

Loading thumbnail…

Fork of Fork of Activity 6

This is a horizontal bar chart displaying the 2020 populations of 30 countries, rendered as SVG rectangles. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map country names and population values to coordinates, with `csv` fetching the data from a GitHub gist. Green bars are overlaid with a tooltip showing the formatted population value, and the chart includes styled axes with blue tick lines and a labeled x-axis.

Loading thumbnail…

Fork of Activity 6

This example presents a horizontal bar chart showing 2020 population data for 30 countries, with bars encoded by population magnitude and country names along the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and renders SVG rectangles with tooltips via the `<title>` element. Data is loaded from a CSV using `d3.csv`, with population values transformed by multiplying the raw figures by 1,000. Axis labels and ticks are styled with CSS, and the chart includes formatted tick labels using `d3.format`.

Loading thumbnail…

Activity 6_Task 1

This example demonstrates how to display the text "Hello VizHub!" centered on a blank web page. The visualization is created using the D3.js library, specifically importing the `select` function to target the HTML element with the ID `message`. The text content is defined in a separate ES6 module, `myMessage.js`, and applied to the element. The styling, including the large font size and center alignment, is handled through a linked CSS file, `styles.css`. The code itself does not perform any data transformation or complex rendering; it simply binds a string to a DOM element.