M

Mallikarjun Narra

@arjunyadav-02·19 public vizzes

Loading thumbnail…

Fork of Task9&10 Question1

This pie chart visualizes the distribution of iris flower species from a CSV dataset, showing the proportion of each species in the collection. The chart uses d3.pie and d3.arc to generate the pie slices, with an ordinal color scale from d3.schemeCategory10. A custom legend is built using HTML divs alongside the SVG chart, displaying color-coded species labels. The data is loaded and aggregated with d3.csv and d3.rollups, and the visualization is rendered as an SVG within a flex container.

Loading thumbnail…

Fork of Fork of Task9&10 Question2

This example shows a genre distribution from a CSV dataset as a single steelblue area chart, with genres on the x-axis and aggregated counts on the y-axis. The code uses D3 v7 with `d3.csv` to load remote data, `d3.rollup` to sum counts per genre, and `d3.area` with `d3.scaleBand` and `d3.scaleLinear` to generate the SVG path. It renders axes via `d3.axisBottom` and `d3.axisLeft`, and includes labeled axes and a title.

Loading thumbnail…

Task9&10

This animated scatter plot visualizes the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length while keeping petal width on the y-axis. Points are color-coded by species (setosa, versicolor, virginica) with a legend. Built with D3.js (v6), it uses `scaleLinear`, `axisLeft`, and `axisBottom` from the scatterPlot module, updating via `setInterval` to call the reusable plot function. The SVG rendering includes dynamic axis labels, a title, and legend elements, with data loaded from a remote CSV.

Loading thumbnail…

Fork of Task9&10 Question 1

This animated scatter plot visualizes the Iris dataset, cycling through different feature pairs (petal width, sepal width, petal length, and sepal length) on the x-axis while keeping sepal length on the y-axis. Each point is colored by species (skyblue, lightgreen, or orange) and labeled with a legend. The visualization uses the D3.js library (v6.7.0) with functions like `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load and render data. It updates the plot every interval, redrawing axes and text labels, and is rendered as an SVG animation.

Loading thumbnail…

Task9&10 Q1

This example demonstrates how to load D3 from a CDN, import API functions like `select`, and use a local ES6 module to display a message. It shows a minimal setup where D3 selects a DOM element and updates its text content, while also defining a regular expression and a numeric variable. The code relies on D3 v5 and is structured as a basic VizHub project, with styling controlled by an external CSS file.

Loading thumbnail…

Fork of Activity6_Task2.3

This stacked bar chart displays aggregate sepal measurements for three Iris species, showing sepal length and sepal width contributions for setosa, versicolor, and virginica. Using D3 v7, the visualization applies `d3.stack()` to layer the metrics, `d3.scaleBand` for categorical spacing, and `d3.scaleLinear` for the value axis. Hover interactions reveal species-specific values via a tooltip, with the CSV data rendered as SVG bars colored blue and orange.

Loading thumbnail…

Tutorial3.6

This example demonstrates a minimal D3.js setup within a VizHub-based single-page structure. It uses D3 v5 loaded via UNPKG and the `select` API to target a single DOM element, setting its text content. The page imports a local ES6 module named `myMessage.js` to supply the text “Hello VizHub!”. The visualization shows a simple static centered message, styled via the included `styles.css`, serving as a baseline template for organizing D3 imports and local modules.

Loading thumbnail…

Fork of Fork of Activity6_Task3.2.6

This visualization displays a scatter plot of vehicle data, showing the relationship between horsepower and highway fuel efficiency (MPG). Each point is shaped according to the car manufacturer, with a shape legend identifying the makes. The plot axes are labeled for both variables. The example uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render the marks and axes, with data loaded from a remote CSV file.

Loading thumbnail…

Fork of Activity6_Task3.6

This scatter plot shows the relationship between horsepower and torque for vehicles, with each point colored by vehicle make. The code loads data from a CSV file hosted on GitHub and uses D3 v6’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` to position circles and create a color-coded legend. The visualization renders as an SVG, sized to the browser window, with labeled axes for horsepower and torque.

Loading thumbnail…

Fork of Activity6_Task4.9

This visualization is a bubble chart of the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis, with each bubble’s radius representing petal length. The chart uses D3 v7 to load the data from a CSV file, create linear scales for positioning and sizing, and render the bubbles as SVG circles. A simple color rule distinguishes flowers with petal length greater than three (steelblue) from those below (orange), with black strokes and hover opacity changes.

Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Bubble position encodes horsepower and torque on the x and y axes, while bubble size represents highway MPG and color distinguishes each make. A tooltip reveals the make on hover, and a legend relates bubble size to MPG values. The visualization uses D3 v7 with d3.csv for data loading, d3.scaleLinear for position and size, d3.scaleOrdinal with d3.interpolateTurbo for colors, and SVG circles with mouse event handlers for tooltips.

Loading thumbnail…

Fork of Activity6_Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and using distinct shapes to represent different iris species. The visualization loads data from a CSV file and displays it using D3 v7, leveraging the `scaleLinear` and `scaleOrdinal` scales to map data values to plot coordinates and shape encodings. Custom axis and legend modules render labeled axes and a shape legend, while the `symbol` API generates the species-specific markers. The plot dynamically fetches and parses the data via `csvParse`, updating the display once the dataset arrives.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with each point colored by species (setosa, versicolor, or virginica) using a custom marker function. The visualization is built with D3 v6, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for chart framing, and loads the data from a remote CSV file via the `csv` function. Note that while the code also parses sepal dimensions, only the petal measurements are currently displayed. The chart is drawn as an SVG, with circles sized at a fixed radius and axes labeled in green.

Loading thumbnail…

Fork of Activity6_Task3.2

This scatter plot visualizes the iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (skyblue, lightgreen, or orange) and sized or positioned according to sepal measurements. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub-hosted CSV and render SVG circles. Axes labels are added via `svg.append('text')`, with data-driven fill colors assigned through a switch function on species.

Loading thumbnail…

Fork of Activity6_Task2.3

A stacked horizontal bar chart displays the distribution of IMDb ratings across six film genres, with each bar segmented into five rating brackets from "below 5.0" to "above 8.5." The chart uses d3.stack to transform percentage data from a CSV file, d3.scaleBand for the genre axis, and d3.scaleLinear for the percentage scale. Interactive tooltips appear on mouseover, revealing the exact percentage for each genre-rating segment, while a color scale distinguishes the rating categories.

Loading thumbnail…

Activity6_Task2

A stacked horizontal bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating bands from below 5.0 to above 8.5. Using d3.stack and d3.scaleOrdinal, the chart maps the percentage data from CSV to colored segments with a tooltip that displays exact percentages on hover. The visualization relies on d3.axisBottom, d3.axisLeft, and d3.scaleBand for layout, and renders as SVG with a legend.

Loading thumbnail…

activity 6_Task 1.2

This visualization displays the top 20 countries by 2010 population as a horizontal bar chart, using a React and D3 v5 setup with SVG rendering. The population data is loaded via `d3.csv` from a GitHub-hosted CSV file, and bars are sized using `scaleLinear` and positioned with `scaleBand`. Axis components are custom React functions rendering tick lines and labels, while a native SVG `<title>` element provides tooltips. Population values are formatted with `d3.format` to show abbreviated labels like “B” for billions. Axes and marks are styled with custom CSS classes.

Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000. The bars are rendered as SVG rectangles, with the x-axis using a linear scale for population values and the y-axis using a band scale for country names. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position the marks, and custom `AxisBottom` and `AxisLeft` components to draw the axes and tick labels. Data is loaded from a remote CSV file using D3’s `csv` function, and the population values are formatted using D3’s `format` with a `.2s` abbreviation that converts gigabytes to billions.

Loading thumbnail…

5 Buddhas

This example presents a dense, overlapping field of randomly generated, semi-transparent SVG polygons in vibrant colors, layered on a black background. The visualization uses React to render the SVG elements, with polygon positions, fills, rotation, and opacity determined by repeated calls to `Math.random()`. At the center, a static Buddha silhouette path is embedded and transformed, contrasting with the chaotic geometric noise surrounding it.