M

maheshsachin1234@gmail.com

@maheshsachin1234M·23 public vizzes

Loading thumbnail…

Activity6_Task 1.2

This example displays a horizontal bar chart comparing the 2010 populations of 20 countries. The chart uses a linear scale for population on the x-axis and a band scale for countries on the y-axis, with each bar rendered as a light green rectangle. Built with D3 v7, the visualization renders as SVG and explicitly constructs axes and marks through modular functions. The left axis lists country names, while the bottom axis formats population values in billions using a tick formatter. Data is loaded asynchronously from a CSV URL via `d3.csv`.

Loading thumbnail…

Activity6_Task 1.1

This visualization is a horizontal bar chart showing the populations of the top 10 countries in the year 2000, sorted in descending order. It uses a linear scale for population values and a band scale for country names, with light green bars and labeled axes. The chart is built with D3 v7, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render SVG elements. Data is loaded asynchronously from a CSV file via `d3.csv` and filtered to the top 10 entries based on population.

Loading thumbnail…

Tutorial 1 Activity6

This bar chart displays the populations of 30 countries in 2020, ordered along a vertical band scale with horizontal bars extending from a linear population scale. The visualization is built with React and rendered as SVG using d3.v5 utilities including `scaleBand`, `scaleLinear`, and `format` for tick labels. Data is loaded asynchronously from a CSV file via d3's `csv` function. Light green bars include native SVG tooltips showing the formatted population value, while blue axis ticks and a labeled x-axis highlight the quantitative scale.

Loading thumbnail…

Activity_6 Question 3(6)

This scatter plot shows the relationship between DataVisualization scores and Visionscience scores for students, with points colored by gender (red for female, blue for male) and a legend distinguishing the two categories. The visualization uses D3.js v7 to load CSV data from a GitHub gist, scales the data with d3.scaleLinear, and renders SVG circles with d3.axisBottom and d3.axisLeft for the axes. A purple title labels the chart, and the code applies colors via d3.scaleOrdinal while handling the data as numeric values for plotting.

Loading thumbnail…

Activity 6 Question 4 (9)

This bubble chart visualizes the relationship between student overall scores, studying scores, and education hours for nine students. Each circle represents a student positioned by their overall and studying scores, with circle radius encoding education hours. The visualization uses D3.js v7 scaleLinear and scaleSqrt functions to map the data values to positions and sizes. Interactive tooltips display detailed student information on mouseover, revealing name, both scores, and study hours. The chart renders as SVG with hover effects and smooth opacity transitions for the tooltip.

Loading thumbnail…

Activity_6 Task 4 tutorial 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque, while its radius and color represent highway MPG and car make, respectively. The view includes interactive tooltips on hover and a legend for both bubble size and color categories. Built with D3 v7, it uses SVG rendering, scaleLinear and scaleOrdinal for mapping, and data loaded via d3.csv.

Loading thumbnail…

tutorial 4

This interactive 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 encodes highway MPG and its color distinguishes the car make. The visualization uses d3.csv to load data, d3.scaleLinear for axes and sizing, and d3.scaleOrdinal with interpolateTurbo for color mapping. Hovering reveals a tooltip with the make name, and a legend displays both MPG values and manufacturer color codes.

Loading thumbnail…

Activity_6 Tutorial 4

This bubble chart visualizes the relationship between horsepower, torque, and highway fuel efficiency across 31 car makes. Each circle’s x-position represents horsepower, y-position represents torque, and its radius encodes highway MPG values. The visualization uses D3 v7 to create SVG elements, employing `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.schemeTableau10` extended with additional palettes for color encoding. Data is sourced from a CSV file containing make, horsepower, torque, and highway_mpg statistics.

Loading thumbnail…

Activity6_ Que3

This scatter plot visualizes the relationship between car horsepower and weight, with each point colored and shaped according to the number of engine cylinders using D3 v6's `scaleOrdinal` and `schemeCategory10`. The visualization loads data from a Gist CSV via `d3.csv`, filters invalid entries, and renders SVG paths with custom symbols from `d3.symbol` to distinguish cylinder groups. An interactive legend maps shapes to cylinder counts, while axes and labels are generated using `axisLeft` and `axisBottom`, providing a clear comparison of vehicle performance metrics.

Loading thumbnail…

aCTIVITY6TUTORIAL 3.2

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Each species is differentiated by a distinct SVG symbol shape: circles for setosa, crosses for versicolor, and diamonds for virginica, all rendered in steelblue. The visualization uses D3 v6 with `d3.csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` generators to create the shapes. Data is loaded from the uiuc-cse GitHub repository, and axis labels are styled with green twenty-pixel Times font.

Loading thumbnail…

Activity_6 scatterplot tutorial color 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for three species of iris flowers. The D3.js v6 code loads the data from a CSV file, scales the axes with `d3.scaleLinear`, and renders circles filled with distinct colors (skyblue, lightgreen, orange) per species. It uses the `d3.extent` and `d3.nice` functions to compute axis domains, and emits SVG axes via `d3.axisLeft` and `d3.axisBottom` with rotated axis labels.

Loading thumbnail…

Activity_6Tutorial3.2

This scatter plot visualizes the classic Iris dataset, displaying sepal length against petal length for three iris species. Each species is distinguished by both color and shape: green circles for setosa, blue triangles for versicolor, and orange squares for virginica. The visualization uses D3.js v7 to load the CSV data, create linear scales for the axes, and render SVG paths with d3.axisBottom and d3.axisLeft for the chart framework.

Loading thumbnail…

Activity_6Tutorial3.1

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for three species, each distinguished by color and identified through a legend. The visualization is built with D3.js v7, using SVG rendering and d3.scaleLinear for axes, d3.scaleOrdinal for the color mapping, and d3.csv to load data from a remote gist via a CORS proxy. The code includes a fallback sample dataset in case the remote data fetch fails.

Loading thumbnail…

Activity_6_Question3

This scatter plot example shows how to render individual data points as circles on a two-dimensional plane, with no axes or labels visible. The visualization relies on D3.js v7 to select a DOM element and update its text content, while the actual scatter plot rendering is handled through the framework’s core selection and manipulation API. The code imports a custom message module and uses the `select` function from D3 to set that message into a styled div, though the plot itself is not explicitly drawn in the provided script. The styling is managed through a separate CSS file.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) using a categorical color scale. The visualization is built with D3 v6, using `d3.csv` to load data from a GitHub Gist, `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.scaleOrdinal` for species-based coloring. An SVG legend identifies the three species.

Loading thumbnail…

Activity6_Task2_Question2

An interactive stacked horizontal bar chart displays customer satisfaction ratings across five smartphone brands, segmented into Satisfied, Neutral, and Dissatisfied percentages that sum to 100%. Built with D3 v7, the visualization uses `d3.stack()` for data transformation, `d3.scaleBand` for brand categories, `d3.scaleLinear` for percentages, and SVG rectangles with click handlers that alert the rating type and exact percentage. The chart includes axes, a title, and a legend, derived from a CSV file containing three numeric columns per brand.

Loading thumbnail…

Activity6_Task2

This stacked bar chart displays how readers rate book genres across three categories (Excellent, Good, Average), with each genre represented by a horizontal bar segmented by rating proportions. The visualization uses D3.js (v7) with an SVG rendering approach, loading data from a CSV file containing genre ratings as percentages. The code employs `d3.stack()` with `stackOrderNone` and `stackOffsetNone` to build the segments, along with `d3.scaleLinear` for the percentage axis and `d3.scaleBand` for genre categories. Users can click any segment to see the exact rating percentage via an alert.

Loading thumbnail…

Fork of Activity6T1Tutorial

This horizontal bar chart displays the populations of the top 30 countries in 2020, using a lightgreen-to-orange hover effect to highlight individual bars. The visualization loads data from a CSV file via `d3.csv()` and maps the `Population-2020` column to a linear X-axis, while country names are plotted on a band-scaled Y-axis. The chart includes labeled axes and is rendered as SVG, with styling applied through CSS classes and D3's axis generation methods.

Loading thumbnail…

Fork of Activity6Task1T1

This horizontal bar chart displays the top 30 countries by population in 2020, with each bar’s length encoded by population value and colored by a pastel ordinal scale. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.axisBottom`/`d3.axisLeft` to generate tick marks. Data loads asynchronously via `d3.csv` from a GitHub Gist, and bars are drawn as SVG rectangles with opacity, while axis labels and tick styling are applied through CSS.

Loading thumbnail…

Activity6_Task1_Tutorial_Alt

This horizontal bar chart displays the top 30 countries by 2020 population, using green bars to compare values across a blue-ticked axis. The visualization loads CSV data from a GitHub gist, parses the population column, and renders an SVG using D3 v7's `scaleLinear`, `scaleBand`, and `d3.axisBottom`/`axisLeft`. Custom ES6 modules (`Marks.js`, `AxisBottom.js`, `AxisLeft.js`) encapsulate the bar drawing and axis formatting, with tick labels formatted in compact notation (e.g., "1.2B").

Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays population figures for the top 30 countries in 2020, using a linear scale for population and a band scale for country names. The visualization, built with React and D3 v5, renders SVG rectangles whose lengths encode population values, with axes and tick labels generated by custom components. Data is loaded from a CSV file via D3's `csv` function, and the axis formatting converts large numbers to abbreviated labels.

Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays 2020 population figures for 30 countries, ordered by country name, using a green fill for each bar. Built with React and D3 v5, the visualization maps population values to bar lengths via a linear scale and country names to vertical bands via a band scale. The code uses `scaleBand`, `scaleLinear`, and `format` from D3, rendering all elements as SVG. Hovering reveals the population value through a native `<title>` tooltip, and the data is loaded from a remote CSV file using D3's `csv` function.

Loading thumbnail…

activity 6_Task 1

This visualization displays the text “Hello VizHub!” prominently in the center of the page using a large, bold font. The code uses D3.js’s `select` method to target the `#message` div and update its content with a string imported from a local ES6 module. The styling is handled through an external CSS file that sets the text alignment and font size to 12em. The example demonstrates a minimal integration of D3 with modular JavaScript and external stylesheets.