harisankarakeluth@my.unt.edu

@Harisankara000·14 public vizzes

13

This example presents a comparative analysis of COVID-19 data for India using two D3.js v7 charts. A scatter plot maps confirmed cases against deaths for states, while an area chart tracks confirmed cases over time for Kerala. The code loads data from a remote CSV file, using `d3.csv`, and employs SVG rendering with `d3.axisBottom` for the scatter plot and `d3.area` for the time series.

Apr 24, 2024

Loading thumbnail…

12

A line chart and a stacked bar chart display COVID-19 confirmed, cured, and death cases in Kerala, India, from a CSV dataset. The line chart plots confirmed cases over time, while the stacked bar chart shows the cumulative breakdown of outcomes. Both charts use D3.js v7, employing `d3.csv`, `d3.scaleTime`, `d3.scaleBand`, `d3.line`, and `d3.axisBottom` with SVG rendering. The visualization is static, with rotated date labels and axis titles.

Apr 24, 2024

Loading thumbnail…

12

This interactive bar chart visualizes average salaries across job titles in the data science field, using a Kaggle dataset with information on job categories, experience levels, company sizes, employment types, and locations. A dropdown menu system lets users filter by these attributes, and D3.js functions including `select`, `group`, and `mean` recalculate and redraw the bars dynamically. The SVG visualization sorts titles by descending salary, with tooltips and resize handling, and the code structure supports exploring salary variations by company size, experience, and job category.

Apr 24, 2024

Loading thumbnail…

11

This example demonstrates two charts created with D3.js v7: a scatter plot comparing population and density, and a bar chart showing population by country. Both visualizations use data loaded from a CSV file via `d3.csv()`. The scatter plot uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`, while the bar chart employs `d3.scaleBand` for categorical x-values. SVG elements are bound to the data with the `.data()` and `.enter()` methods, with axes rendered as SVG groups.

Apr 24, 2024

Loading thumbnail…

10

This example demonstrates two linked population visualizations for countries: a bubble chart comparing population in 1980 versus 2022, and a grouped bar chart showing population changes across four census years. Using D3 v7, the visualization loads data from a CSV file and renders SVG elements with scales and axes. The bubble chart uses `d3.scaleSqrt` for bubble radius, while the grouped bar chart employs `d3.scaleBand` and `d3.scaleOrdinal` for categorical positioning and color encoding, with both charts sharing axis labels and tooltips.

Apr 24, 2024

Loading thumbnail…

9

This example presents two linked charts comparing country demographics: a scatter plot maps population density against growth rate with point size scaled by 2023 population, while a bar chart displays absolute 2023 population figures per country. The code uses D3.js v7, loading CSV data via `d3.csv`, creating scales with `d3.scaleLinear` and `d3.scaleBand`, and rendering SVG circles and rectangles. Axis labels and ticks are generated through `d3.axisBottom` and `d3.axisLeft`, with the bar chart’s country labels rotated for readability. The visualization relies on the countries-table dataset, with all data preprocessing handled through JavaScript’s unary plus operator to coerce numeric values.

Apr 24, 2024

Loading thumbnail…

8

This interactive dashboard visualizes data science job market trends from a Kaggle dataset, showing how average salaries vary by company size, job category, and experience level through dynamically updating bar charts. Users filter the data by job attributes and location, and the visualization redraws to reveal patterns such as larger companies paying higher salaries and senior roles commanding premium compensation. The interface uses D3.js v7 with SVG rendering, implementing interactive filters and tooltips to explore employment type distributions and geographical salary trends. The charts display salary data in both local currencies and USD across multiple years.

Apr 24, 2024

Loading thumbnail…

7

This example displays a bar chart comparing total COVID-19 deaths across 14 countries, with steel-blue bars sorted by country name and labeled with their precise totals. Built with D3 v7 and SVG, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and D3's `axisBottom` and `axisLeft` to render the axes, with bars and labels appended directly to the SVG elements.

Apr 24, 2024

Loading thumbnail…

6

This bar chart shows total COVID-19 cases for 14 countries, with values labeled above each bar. It uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom/d3.axisLeft to render the axes. Bars are drawn as SVG rectangles with a steelblue fill, and case numbers are formatted with toLocaleString. The chart includes a title and uses the d3.selectAll pattern to bind data to elements.

Apr 24, 2024

Loading thumbnail…

5

This example demonstrates how to create and manipulate circles in an SVG container using D3.js. The code sets up an interactive development environment with hot reloading, then uses D3’s data join pattern to bind an array of circle objects to SVG elements, setting their `cx`, `cy`, `r`, and `fill` attributes. The visualization is data-driven, decoupling the source data from the rendering logic, and showcases D3’s method chaining and general update pattern.

Apr 23, 2024

Loading thumbnail…

4

A population bubble chart displays projected and current population data for countries, using circle size to encode the 2022 population and color to distinguish categories. The visualization includes a custom tooltip that reveals country names and population values on hover. It loads JSON data from a GitHub-hosted dataset via `d3.json`, and renders the chart using `d3.select`, `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` within an SVG canvas, with event listeners for mouse interactions.

Apr 23, 2024

Loading thumbnail…

1

This bar chart visualizes hospital beds per thousand for different countries, using a dataset from a GitHub-hosted CSV file. The visualization employs D3.js v6 to build an SVG graphic, with a steelblue bar for each country that turns orange on hover. The chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with rotated country labels for readability. A left y-axis is labeled "Hospital Beds per Thousand," and the bars are rendered as `rect` elements within an SVG container.

Apr 21, 2024

Loading thumbnail…

3rd graph

This example presents a responsive stacked bar chart that visualizes population data for various countries across multiple years, from 1980 through projected figures for 2050. The chart uses a color-coded ordinal scale to distinguish each year's segment within the stacked bars. Built with D3 v6, the visualization loads its dataset from a remote CSV file and renders the graphic as an SVG. The code utilizes `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack` to compute the stacked series, with axis labels and interactive hover effects that highlight individual bars.

Apr 21, 2024

Loading thumbnail…

2nd chart

This chart displays the total COVID-19 cases over time as a single steelblue line, with time on the x-axis and case counts on the y-axis. The visualization is built with the D3 version 6 library, using an SVG rendering approach. The code employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map data, and `d3.axisBottom` and `d3.axisLeft` for axes, with a rotated y-axis label. The dataset is loaded from a CSV file hosted on GitHub, supplied by the author Harisankara000.

Apr 21, 2024