Sree Likhith

Dynamic Bar Graph - Average Salary Landscape for Data Professionals

This dynamic bar graph visualizes average salaries in USD across job titles in the data science field, enabling interactive filtering by company size, experience level, job category, employment type, work setting, and employee residence. Built with D3.js and rendered as an animated SVG, it computes the mean salary for each job title from the filtered dataset and sorts the results in descending order. Users can toggle filter panels to refine the dataset and observe how average salaries shift across job titles. The design includes tooltips and clickable elements, allowing for deeper exploration of salary trends and distributions.

Fork of Netflix IMDB Scores

Jobs In DataScience

This example displays the first record of a dataset on data science jobs, showing its fields and values in a formatted JSON structure. The code loads the data from a CSV file, converts numeric string fields to numbers, and renders the contents of the first object using a simple HTML `<pre>` element. It relies on the native `JSON.stringify` method and imports the data with a custom CSV parser, with the primary interface being the `main` function and the `data` export. The visualization is minimal, presenting raw data rather than a chart or plot.

Job in data science

This example displays average salaries for data science job categories and experience levels, with a toggle allowing users to switch between grouping by job category and by experience level. Each bar represents the average salary in USD computed from the provided CSV dataset, aggregated across matching job titles and levels. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis to map values. Interactive buttons trigger re-renders, clearing and redrawing the bar chart with updated data groupings.

Line Chart (Jobs In Data Science)

This animated line chart visualizes average salaries across data science job categories, with each point displaying an interactive tooltip on hover. It aggregates the source data by job category using d3.group and d3.mean, then renders a steelblue line and circles with d3.line and scaleBand/scaleLinear scales. Mouseover transitions enlarge points and show the exact salary value, while axes are generated with d3.axisLeft and d3.axisBottom. The chart uses D3 v7.8.5, featuring a light gray background and rotated x-axis labels for readability.

Parallel Coordinates with Brushing (Heart_Failure_Prediction)

This parallel coordinates visualization uses D3.js to explore heart disease data, mapping clinical variables like age, cholesterol, resting blood pressure, and maximum heart rate across categorical dimensions. Each polyline represents a patient, colored by heart disease status, with brushing enabled on each axis to filter the dataset interactively. Brushed intervals constrain the data across all selected dimensions simultaneously, and the filtered subset is recomputed with memoized efficiency, updating the rendering in real time. The plot includes categorical and quantitative axes, a legend, and animated transitions.

Line Graph (Netflix Data)

This animated line chart visualizes the average IMDb score per release year for Netflix movies and TV shows, distinguishing between the two types with steelblue and darkorange lines. It also identifies the top-rated title for each year through interactive hover circles. The visualization uses D3's `scaleTime`, `scaleLinear`, `line`, and `group` APIs, with data sourced from the `@Sreelikhith/netflix` package. Tooltips appear on mouseover, highlighting the year, average score, and top title.

heart-failure-prediction

This visualization explores how clinical attributes contribute to heart failure risk using the Kaggle heart-failure-prediction dataset. Two interactive charts examine gender differences and the impact of factors like age, chest pain type, and maximum heart rate on disease outcomes. The code loads data from a CSV file, converts numeric fields, and renders visualizations using JavaScript within a VizHub iframe. The example demonstrates data parsing and chart construction without specifying particular D3 API calls in the visible code.

Word Cloud

This word cloud uses D3’s `d3.layout.cloud` to position words by frequency, with font size scaled by each term’s count. The layout runs inside a force simulation, and the rendering draws the words onto an SVG canvas using `d3.select` and `text` elements. The visualization reads a local JSON dataset of words and counts, then animates the cloud’s appearance with a smooth rotation and fade-in transition. Colors are applied from a categorical palette to differentiate word groups, while the overall layout adapts to the container’s size.

Heart-failure-prediction Scatter Plot

This scatter plot visualizes the relationship between age and maximum heart rate for individuals in a heart failure prediction dataset from Kaggle. Each circle represents a person, positioned by age on the x-axis and MaxHR on the y-axis, with most data points clustered between ages 40 and 70. The visualization uses d3.scaleLinear for axes and d3.scaleOrdinal for categorical coloring, with semi-transparent circles (opacity 0.6) revealing overplotting density in darker overlapping regions. Outliers with unusually high or low heart rates for their age appear scattered throughout the plot.

Chest pain type vs count Bar Chart

This grouped bar chart visualizes the count of patients by chest pain type and sex, distinguishing between males (steelblue) and females (pink) with a legend. It uses D3.js APIs including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the axes, and interactive tooltips on mouseover. The data comes from the heart-failure-prediction Kaggle dataset, while custom axis labels and an inner rectangle background enhance readability. The visualization is rendered as an animated SVG.

Fork of Solar System

This animation shows the planets of the solar system arranged horizontally against a starfield, with relative sizes scaled according to each body’s radius while distances are compressed for visibility. Each planet is drawn using D3 selections and transitions, with SVG radial gradients providing varied surface colors, and Saturn includes an elliptical ring. The data originates from Wikipedia’s list of gravitationally rounded solar system objects, and the code uses D3’s `select`, `transition`, and `easeLinear` to animate planet growth and label appearance.

Fork of Axis Labels

This example demonstrates two labeled Cartesian axes positioned around a shaded inner region. The visualization uses D3's `scaleLinear` and `axisBottom`/`axisLeft` to render the axes, with custom `text` elements for the X and Y axis labels, offset via configurable parameters. Data is generated programmatically as a fixed linear scale from 0 to 100, and the gray inner rectangle highlights the plotting area defined by the margins.

Netflix IMDB Scores

A web-based visualization gallery example displays the first row of Netflix IMDB Scores data as formatted JSON, highlighting field names, values, and nested structures. The Vue.js application imports a CSV file containing movie and show metadata such as title, release year, runtime, and IMDB ratings, then converts selected numeric columns to numbers. The interface renders the parsed object using a preformatted text element with a fixed font size for readability. This example demonstrates raw data inspection before applying graphical encodings, serving as a foundational step for exploring distributions or relationships in the dataset.

New Year Theme

This example renders a New Year-themed composition on a light gray SVG canvas using D3.js. It displays a mix of semi-transparent circles, rectangles, and five-pointed star polygons scattered across the viewport, alongside radiating line spokes from each circle’s center. The visualization uses `d3.select` and data joins (`join`) to bind array data to SVG elements, including `circle`, `rect`, and `path` nodes. A centered text element reads “Happy New Year 2024” in dark blue, with all shapes positioned via hardcoded coordinates and styled with distinct fills.

New Year Theme

A festive New Year visualization renders a fireworks display of colorful circles, squares, and radiating lines on a light pink background. It uses D3.js selections and data joins to bind hardcoded arrays of circle and square coordinates, drawing 60-70 radial lines per circle to simulate sparks, with overlapping translucent shapes creating depth. The code also appends centered text reading "Happy New Year 2024" using D3's SVG text API. The data is static and embedded directly in the script, with no external sources.