Lokesh Madem

@Lokesh0301·14 public vizzes

lm_areachart_Task9

This visualization shows the population of India from 1950 to 2020 as a combined line and area chart. The line traces the population trend precisely, while the orange area beneath it emphasizes the magnitude of growth over time. The chart uses D3 v5 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, `line`, `area`, and `curveBasis` to render smooth curves with gridlines and labeled axes. Data is loaded from a CSV file hosted on GitHub, filtered for India, and parsed into yearly population values before being drawn as SVG paths.

Apr 21, 2024

Loading thumbnail…

lm_piechart_Task9

A pie chart visualizes profit distribution across regions, with each slice's area proportional to the region's profit value and labeled in a legend alongside the corresponding profit amount. The chart renders as an SVG using D3 v5 APIs, including `d3.pie()` to compute arc angles, `d3.arc()` to generate path segments, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Data is loaded asynchronously from a remote JSON file provided via GitHub Gist, with profit values parsed as numbers before rendering. The legend maps each color to a region name and its profit value.

Apr 21, 2024

Loading thumbnail…

LM_Task9&10

This example displays the land area percentage of continents as a pie chart, with a legend listing each continent and a colored swatch. The chart is rendered using D3.js (version 4.2.2) with SVG elements, where slices are generated via `d3.pie` and `d3.arc`. Hovering over a slice triggers a tooltip that shows the region and profit value, using mouse events to position it. The data is fetched from a CSV file hosted on GitHub, and the visualization includes a drop shadow filter applied to the SVG group.

Apr 21, 2024

Loading thumbnail…

LokeshMadem_Activity6_Questions4

This example presents a D3.js bubble chart that visualizes the relationship between GDP, population, and life expectancy for a dataset of nine countries. Each bubble’s position on the x-axis corresponds to GDP, its y-axis position to population, and its radius to life expectancy, with country labels placed at the bubble centers. The chart is rendered as an SVG with axes formatted using abbreviated number notation. The code loads data from a CSV file, converts string values to numbers, and builds the visualization using `d3.scaleLinear` for x/y/radius scales, `d3.axisBottom` and `d3.axisLeft` for the axes, and mouseover events that add a stroke to highlight a bubble.

Apr 11, 2024

Loading thumbnail…

LokeshMadem_Activity6_Question3.6

This scatter plot visualizes car data, mapping horsepower on the x-axis and highway miles per gallon on the y-axis, with points shaped according to the car make. It uses D3 v7's scale functions (`scaleLinear`, `scaleOrdinal`) and symbol generator to render custom shapes, alongside a custom legend. Data is fetched from a remote CSV file and parsed with `csvParse`. The chart employs `select` and `join` for declarative SVG updates, with axes and labels added via the `axes` module.

Apr 11, 2024

Loading thumbnail…

LokeshMademActivity6_Question2.3

This visualization displays stacked bar charts comparing petal length measurements across three iris flower species (setosa, versicolor, and virginica) using the Iris dataset. The chart uses d3.stack() to create stacked segments, d3.scaleBand for the categorical species axis, and d3.scaleLinear for the numerical length axis. Colors distinguish each species through a d3.scaleOrdinal with a custom color range. Interactive tooltips appear on mouseover showing precise petal length values, while hover effects alter rectangle opacity. The SVG rendering incorporates custom styling with d3.axisBottom, d3.axisLeft, and formatted values using d3.format('.2f').

Apr 11, 2024

Loading thumbnail…

Activity6_Task2

This example visualizes IMDb movie ratings by genre, showing the percentage distribution of ratings across five rating brackets for six genres. The stacked horizontal bar chart uses D3 v7's `stack()` and `scaleBand` to compose the data, with each genre row containing proportional segments colored via `scaleOrdinal`. Interactive tooltips on `mouseover` reveal the exact percentage values for each segment. The visualization loads data from a local CSV file and renders the output as an SVG, incorporating custom fonts and axis styling.

Apr 11, 2024

Loading thumbnail…

LokeshMadem_Activity6_population2

This bar chart displays the top 20 countries by population in 2010, ranked alphabetically along the vertical axis with horizontal bar lengths proportional to population values. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` handling axis scaling and `format` providing abbreviated tick labels. Data is loaded via D3’s `csv` from a GitHub repository, with populations converted from raw values. The chart includes styled tick lines, a labeled x-axis, and tooltips on each bar showing formatted population figures.

Apr 11, 2024

Loading thumbnail…

LokeshMadem_Activity6_population1

This bar chart displays the population of ten countries in the year 2000, sorted by country name along the vertical axis. The visualization uses React with D3 v5, employing `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and SVG `<rect>` elements to represent population values, which are formatted in billions using `d3.format`. Data is loaded from a CSV file via `d3.csv`, and the chart includes styled axis labels and tick lines.

Apr 11, 2024

Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of ten countries in the year 2000, sourced from a CSV file. It uses a React with D3 v5 approach, rendering SVG via `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Green bars encode values formatted with D3's `format` function, converting abbreviations like 'G' to 'B'. Native SVG `<title>` elements provide tooltips with the formatted population values, while axes are generated from `xScale.ticks()` and the domain.

Apr 11, 2024

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size and color) for 31 car makes. Each car brand is represented by a colored circle, with turbo color interpolation mapping distinct hues to each make. The D3.js v7 code loads CSV data, uses `d3.scaleLinear` for axes and bubble radius, and `d3.scaleOrdinal` for color assignment. Interactive tooltips reveal the car make on hover, while a legend displays MPG value scaling. The visualization is rendered as an SVG with smooth opacity transitions on mouse interactions.

Apr 11, 2024

Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length and using different point shapes to distinguish the three iris species. The visualization is built with D3 v7, leveraging the `symbol` generator from `d3` to create the shape-coded marks and a custom legend. Data is loaded via `fetch` from a remote CSV file and parsed with `csvParse`. The axes and labels are drawn using a modular `axes.js` component that relies on D3's `axisLeft` and `axisBottom` methods.

Apr 11, 2024

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers, with colors distinguishing the three species (setosa, versicolor, and virginica). Built with D3 v6, it uses `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG. The data is loaded as CSV from a GitHub repository, and each point is drawn as a circle with a fixed radius, while the x- and y-axes are labeled with green text.

Apr 11, 2024

Loading thumbnail…

5 Buddhas

Five identical golden Buddha silhouettes overlap within a dark SVG canvas, each rendered as a complex polygon path with varying opacity, creating a layered, translucent effect. The code uses React to map over arrays multiple times, generating thousands of semi-transparent colored polygons as a decorative backdrop. Built with React 16.10 and SVG, the visualization demonstrates procedural randomness—randomized fill colors and coordinates—combined with a fixed, detailed path data string to compose a meditative, abstract composition.

Mar 15, 2024