J

jayanthbalina@gmail.com

@jayanthbalina·34 public vizzes

Loading thumbnail…

Fork of world population density

This interactive world map visualizes population density by country for the years 1980, 2000, 2010, and 2022. Users select a year from a dropdown menu to update the choropleth map, where darker colors indicate higher densities. The visualization uses d3.geoPath, d3.geoMercator, and d3.scaleThreshold to render geographic data from a TopoJSON file and CSV data loaded from GitHub. Hovering over a country reveals a tooltip with its density, and a ranking table displays the top ten most densely populated countries.

Loading thumbnail…

Fork of world population density

This interactive world map visualizes population density by country for the years 1980, 2000, 2010, and 2022. Users select a year from a dropdown menu to update the choropleth map, where darker colors indicate higher densities. The visualization uses d3.geoPath, d3.geoMercator, and d3.scaleThreshold to render geographic data from a TopoJSON file and CSV data loaded from GitHub. Hovering over a country reveals a tooltip with its density, and a ranking table displays the top ten most densely populated countries.

Loading thumbnail…

world population density

This visualization displays world population density on a choropleth map, with a sidebar dropdown to select data from 1980, 2000, 2010, or 2022 and a table ranking the top ten most densely populated countries. It uses D3 v6 (d3.geoPath, d3.geoMercator, scaleThreshold) to render an SVG map from GeoJSON data, updating country fill colors on selection. A hover tooltip shows the country name and density value. Population density data comes from a CSV file linking country codes to values per year.

Loading thumbnail…

world population distribution

This choropleth map displays world population distribution across countries, with a dropdown menu to switch between years (1980–2030) and a tooltip revealing each country’s exact population on hover. It uses `d3.csv` and `d3.json` to load population data and GeoJSON topology, then renders paths via `d3.geoPath` with a Mercator projection. A threshold `colorScale` maps population ranges to blues, while a sidebar table lists the top ten most populous countries, updated dynamically through `updateTopCountries()` whenever the selected year changes.

Loading thumbnail…

project

This interactive choropleth map visualizes global population density (people per km²) across countries for the years 1980, 2000, 2010, and 2022. A dropdown menu switches between years, updating the color-coded SVG paths rendered with d3.geoPath and a Mercator projection. A sidebar displays the ten most densely populated countries, while hovering over a country reveals its name and density value via a styled tooltip. Data is loaded as CSV files and the world geometry from a GeoJSON source.

Loading thumbnail…

Pie Chart Question 1

This pie chart visualizes the distribution of users across Android, iOS, and BlackBerry OS, aggregating yearly data from a CSV file into three slices with percentage labels. The code uses `d3.pie` and `d3.arc` to generate the SVG paths, `d3.scaleOrdinal` for color mapping, and `d3.csv` for data loading. Rounded corners on slices and a manual legend accompany the chart, while the title sits above the visualization.

Loading thumbnail…

Area Chart Question 2

This example presents an area chart visualizing average temperatures for US cities, sourced from a CSV file. Built with D3 v7 and rendered as SVG, the chart includes rotated x-axis city labels and a y-axis labeled "Temperature (°C)". The code uses `d3.csvParse` to ingest the data, `d3.scaleBand` and `d3.scaleLinear` for axis scaling, and `d3.area` to generate the filled area path. Axis labels are added via SVG text elements. The chart is styled with Arial font and centered layout.

Loading thumbnail…

Area Chart Question 2

This chart visualizes the distribution of operating system users for Android, iOS, and BlackBerry OS, aggregated from a CSV dataset spanning 2009–2023. Rendered as a pie chart using D3 v6, it displays percentage labels on each slice and includes a color-coded legend. The implementation uses d3.pie, d3.arc, and d3.scaleOrdinal for slice generation, coloring, and legend mapping, with data loaded via d3.csv from a GitHub gist. Styled with custom CSS, the SVG output emphasizes radial sectors and centered text.

Loading thumbnail…

Question4_Bubble chart

This bubble chart visualizes the correlation between GDP per capita, life expectancy, and population-area ratio for 20 countries. Each circle’s position maps GDP and life expectancy, while its radius encodes population density, with color distinguishing nations. Data is loaded via `d3.csv` from `bubblechart.csv`. The visualization uses `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG circles with interactive tooltips on mouseover. A legend identifies each country.

Loading thumbnail…

Activity6_ Tutorial 3.2 : Scatter plot with shape

This example displays a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. The species of each flower is encoded using different point shapes, with a legend positioned at the coordinates (850, 320) identifying each species. The visualization uses D3 v7's `scaleLinear` and `scaleOrdinal` APIs to map data values to coordinates and shapes, with the `symbolsFill` array providing the distinct point markers. The axes are generated using `axisLeft` and `axisBottom`, while the legend is built using D3's `symbol` generator. Data is loaded asynchronously from a remote CSV file and parsed using `csvParse`.

Loading thumbnail…

Activity 6_Question1.1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000, rendered as SVG. The chart uses D3 v5 scales and formatting functions, with React components handling the axes and marks. Data is loaded from a remote CSV file via `d3.csv`, and the bars are drawn using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with tick labels formatted using `d3.format` to abbreviate large numbers.

Loading thumbnail…

Tutorial 4_Bubble chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 30 car makes. Each circle’s x-position maps horsepower, its y-position maps torque, and its size encodes highway MPG, with color distinguishing manufacturer. Built with D3.js v7, the SVG chart includes interactive tooltips on hover, a legend, and axis labels. Data is loaded from a CSV file, and animated transitions are used for tooltip opacity.

Loading thumbnail…

Activity6_ Question 3.2 : Scatter plot with shape

This scatter plot visualizes Test Cricket records, plotting runs scored against matches played for each player. The code uses D3 v6 to load CSV data and render SVG marks, with each player’s country determining the symbol shape (circle, square, triangle, diamond, or star) via `d3.scaleOrdinal` and `d3.symbol`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with linear scales mapping innings and average to secondary values. The visualization clearly distinguishes national teams through shape encoding, making country-level patterns in batting performance immediately visible.

Loading thumbnail…

Activity6_Question_3.1_Scatter Plot

This scatter plot visualizes TestCricket_Records data, comparing matches played against runs scored for each player. Points are colored by country using a category color scale, and hovering is not implemented. The visualization uses D3 v6's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load, scale, and render the SVG elements. Data is fetched from a GitHub gist and displayed with circles positioned along linear axes, with axis labels indicating the variables.

Loading thumbnail…

Fork of Scatter Plot with Colors

This scatter plot visualizes Test Cricket Records, plotting runs against matches played for individual players, with each point colored by the player’s country using `d3.scaleOrdinal` and `d3.schemeCategory10`. The D3 v6 code loads CSV data via `d3.csv`, maps values to x and y positions with `d3.scaleLinear`, and renders colored SVG circles. It includes labeled axes for matches and runs, generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

2 Buddha in colors -overlapping Buddha

This visualization layers hundreds of semi-transparent, randomly colored circles over a detailed SVG path of the Buddha, creating an overlapping, pointillist effect. The circles are generated through nested arrays and positioned using `Math.random()` for both x and y coordinates, with colors assigned via `rgb()` values. The Buddha outline itself is rendered as a single complex SVG `<path>` element, transformed and scaled within the same viewport. Built with React and ReactDOM, the entire scene is produced declaratively in JSX, with each circle and the path drawn as SVG nodes, all against a black background.

Loading thumbnail…

Question4_Bubble chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque on the x and y axes, its size reflects highway MPG, and its color distinguishes the car brand. Built with D3 v7, the chart uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and interactive tooltips on mouseover. Data is loaded from a CSV file, and the visualization is rendered as an SVG with a legend for MPG values and brand colors.

Loading thumbnail…

Question4_Bubble chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque on the x and y axes, its size reflects highway MPG, and its color distinguishes the car brand. Built with D3 v7, the chart uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and interactive tooltips on mouseover. Data is loaded from a CSV file, and the visualization is rendered as an SVG with a legend for MPG values and brand colors.

Loading thumbnail…

Activity6_Tutorial_3.1_Scatter Plot

This visualization presents Fisher’s classic IRIS dataset as a scatter plot of petal length against petal width, with each of the 150 data points colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica) to reveal clustering patterns. The code loads the dataset from a GitHub raw CSV file and renders SVG circles using D3 v6, employing `scaleLinear` for the x and y axes, `extent` to compute domains, and `axisBottom` and `axisLeft` for labeled ticks that indicate petal measurements. The visualization’s custom styling includes red title text and green axis labels, demonstrating a straightforward mapping of multidimensional flower measurements into two spatial dimensions.

Loading thumbnail…

Activity 6_Tutorial2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each genre's horizontal bar divided into five rating categories from below 5.0 to above 8.5. The visualization highlights how documentary and animation films tend to receive higher ratings compared to action movies, which have the largest share of low ratings. Built with D3 v7 and rendered as SVG, the chart uses `d3.stack()` and `d3.scaleOrdinal` for the stacked bars and color encoding, with a custom tooltip displaying exact percentages on hover. Data comes from a local CSV file, and the chart includes axis labels, a legend, and a title.

Loading thumbnail…

Activity6_Question2

This stacked bar chart displays the proportion of IMDb ratings across five categorical groups, showing how category influences rating distributions. Each horizontal bar is segmented by rating bands from “below 5.0” to “above 8.5,” with colors assigned via `d3.scaleOrdinal`. The visualization uses `d3.stack` to compute stacked segments, `d3.axisBottom` for the percentage x-axis, and `d3.axisLeft` for category labels. Hovering over a segment triggers a tooltip that reveals the exact percentage for that rating level within the category, based on the provided data.csv.

Loading thumbnail…

Activity6_Question2

A stacked bar chart displays the percentage of five rating levels (Below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, Above 8.5) across six product categories, with each bar totaling 100%. The visualization highlights how rating distributions vary by category. Using d3.stack() and d3.scaleOrdinal for color encoding, the SVG renders horizontal bars via d3.scaleBand and d3.scaleLinear. Interactive tooltips appear on mouseover, showing exact percentage values computed with d3.format, using data from a CSV file.

Loading thumbnail…

Activity 6_Tutorial 2

This example displays a horizontal stacked bar chart for movie genres, showing the proportional distribution of ratings from “below 5.0” to “above 8.5.” Each genre row is split into colored segments based on data from the CSV file, with the longest segment indicating the most common rating range for that genre. The visualization is built with D3 v5, loaded through UNPKG, and uses the `select` API to target the DOM element, while the chart’s rendering logic is implemented in the accompanying JavaScript code.

Loading thumbnail…

Activity 6_Question1.2

This example shows the top 20 countries by population in 2010 as a horizontal bar chart. Each bar represents a country’s population, with the length scaled linearly from zero and a tooltip showing the formatted value. The chart is rendered as an SVG using React components that wrap D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file via D3’s `csv` function, and axes are customized with tick marks and a formatted label.

Loading thumbnail…

Activity 6_Tutorial1

This example displays a horizontal bar chart of the 2020 population for 30 countries, where each bar’s length encodes the numeric value and the y-axis lists country names. The visualization is built with React and D3 v5, using `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles. The data is loaded from a CSV file via `d3.csv`, and hover tooltips show formatted population values using `d3.format` with SI prefixes.

Loading thumbnail…

Activity 6_1

A horizontal bar chart displays the populations of ten countries in 2020, sorted by country name along the y-axis and using a linear population scale on the x-axis. Built with React and D3 v5, the visualization uses `d3.scaleBand` for categorical positioning and `d3.scaleLinear` for the continuous population mapping, while `d3.format` transforms tick labels from gigabytes to billions. Data is loaded asynchronously from a CSV file via `d3.csv`. SVG rectangles render the bars, with hover tooltips showing formatted population values. Axis components are custom React functions, and styling is applied through CSS classes.

Loading thumbnail…

Activity 6_2

This visualization displays the population of 20 countries in 2020 as horizontal bars, ranked by country name. The chart uses a linear scale for population and a band scale for countries, with axis ticks and labels rendered via custom React components. The data is loaded from a CSV file using D3’s `csv` function, and the bars are drawn as SVG rectangles. Formatting for population values uses D3’s `format` function to abbreviate large numbers. The chart is built with React, D3 v5, and rendered as SVG.

Loading thumbnail…

Activity 6_1

This bar chart displays the top 10 countries by population in the year 2000, using horizontal bars ordered alphabetically by country name. The React app fetches CSV data from a GitHub repository, filters it for the year 2000, and renders SVG rectangles using `scaleBand` and `scaleLinear` from d3 v6. The visualization includes styled axes, tick marks, and an axis label, with a lightweight tooltip showing exact population values via the SVG `<title>` element.

Loading thumbnail…

Activity 6

This example shows a horizontal bar chart of 2020 population data for 30 countries, with bars colored green and blue axis lines and labels. The chart uses React components to render SVG marks and axes, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, `csv` for loading the dataset from a GitHub URL, and `format` for abbreviating population values (e.g., “B” for billions). A tooltip via the SVG `<title>` element displays the formatted population on hover.

Loading thumbnail…

6 Buddha in colors -overlapping Buddha

The visualization presents six overlapping Buddha silhouettes, rendered as layered SVG paths that create a complex, multicolored composition. Each Buddha is filled with semi-transparent random RGB colors, allowing the forms to blend and interact visually. The piece is built with React and ReactDOM, generating nested map functions that produce a grid of small, randomly positioned rectangles alongside the main Buddha paths. A background image of flowers and a bold typographic message frame the artwork, which draws its structural data from a predefined set of SVG path coordinates.

Loading thumbnail…

5 Buddha in colors -overlapping Buddha

The visualization displays a dense cluster of overlapping, rotated Buddha-like silhouettes, each rendered as a distinct SVG polygon filled with vibrant, randomized RGB colors. The image is generated procedurally in React by mapping nested arrays to create hundreds of triangular facets, with each polygon's position, fill, and rotation derived from a mix of arithmetic and the `Math.random()` function. The final composition is layered over a static SVG path that outlines a single Buddha figure, resulting in a chaotic, multicolored tapestry where the sacred iconography is obscured by generative noise. The code relies on React's `ReactDOM` for rendering and uses raw SVG elements for all drawing.

Loading thumbnail…

2 Buddha in colors -overlapping Buddha

This visualization layers hundreds of semi-transparent, randomly colored circles over a detailed SVG path of the Buddha, creating an overlapping, pointillist effect. The circles are generated through nested arrays and positioned using `Math.random()` for both x and y coordinates, with colors assigned via `rgb()` values. The Buddha outline itself is rendered as a single complex SVG `<path>` element, transformed and scaled within the same viewport. Built with React and ReactDOM, the entire scene is produced declaratively in JSX, with each circle and the path drawn as SVG nodes, all against a black background.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense SVG visualization mixes thousands of overlapping colored circles with a single, large Buddha silhouette path. The circles are randomly positioned and colored via nested `Array.map` loops in React, using `Math.random()` for both coordinates and RGB values. The Buddha path is rendered as an SVG `<path>` with a thick stroke. The example is built with React and rendered through ReactDOM, showing how procedural generation can layer abstract shapes over a structured icon.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense SVG visualization mixes thousands of overlapping colored circles with a single, large Buddha silhouette path. The circles are randomly positioned and colored via nested `Array.map` loops in React, using `Math.random()` for both coordinates and RGB values. The Buddha path is rendered as an SVG `<path>` with a thick stroke. The example is built with React and rendered through ReactDOM, showing how procedural generation can layer abstract shapes over a structured icon.