Skip to main content
Log in
A

Arjun Rao

@arjunrao796123·19 public vizzes

Loading thumbnail…

Churn data based on multi filters

This visualization explores customer churn data from Kaggle, showing the relationship between estimated salary and credit score. An interactive brush on a binned salary histogram filters the main scatter plot, while dropdown and radio menus let users select specific countries and genders. The visualization uses vega-lite-api with D3.js to fetch CSV data, and employs interactive selections (interval brushing and single-point binding) to link the two views and adjust point opacity based on selection state.

Nov 5, 2020
Loading thumbnail…

Comparing salaries and churn with respect to gender

This interactive visualization compares salaries and churn by gender using a scatterplot linking gender to estimated salary, with color indicating churn status. A brushable bar chart filters salary ranges, while a second brushable axis filters age groups, dynamically updating point opacity and color. Built with vega-lite-api in d3.v5, the view includes a tooltip showing salary, credit score, age, geography, and churn. Data originates from a Kaggle churn modeling dataset, accessed via CSV through d3.csv.

Nov 5, 2020
Loading thumbnail…

Dynamic binning( Not yet complete)

This interactive visualization explores customer churn data from Kaggle, focusing on the relationship between estimated salary and credit score. Users can brush a salary range on a small bar chart to filter the main scatter plot, and use menus to select a specific country and gender for comparison. The display dynamically re-bins the salary axis into five bins based on the brush selection, with opacity highlighting the relevant data points. Built with the vega-lite-api and D3, it combines multiple selection types—interval brushing, dropdown menus, and radio buttons—to create a linked-view analysis tool.

Nov 3, 2020
Loading thumbnail…

Churn data based on multi filters

This visualization explores customer churn data from Kaggle, showing the relationship between estimated salary, credit score, and churn status through a bar chart and point plot. Users can brush a salary range on the top graph, which filters the scatter plot below, and use dropdown and radio menus to filter by geography and gender. Built with the vega-lite-api library, it uses `vl.selectInterval` for brushing, `vl.selectSingle` for menu-based filtering, and `vl.vconcat` to compose the linked views.

Nov 3, 2020
Loading thumbnail…

Churn data based on binning and choosing a range of salaries

A churn dataset from Kaggle is presented as an interactive visualization of credit scores versus estimated salaries, where the salary axis is binned into 50 discrete intervals. The upper plot acts as a salary-range brush: dragging a selection interval across it filters the points rendered in the lower scatterplot, which uses opacity to highlight the selected salary band against all other data. The visualization is built with the vega-lite-api, vega, and vega-lite JavaScript libraries, with data loaded via d3.csv from a Gist.

Oct 22, 2020
Loading thumbnail…

Is your car fuel-efficient? based on selections

This visualization shows the relationship between CO2 emissions and city fuel consumption for different car models, with each point colored by fuel type and tooltips revealing the car make. A brush selection on the plot allows users to filter and highlight specific data points, while panning and zooming are enabled through scale interactions. The visualization is built using the Vega-Lite API and D3.js, with data loaded from a CSV file hosted on GitHub via d3.csv. The code implements a pan/zoom selection bound to scales and a brush selection with union resolution for highlighting.

Oct 15, 2020
Loading thumbnail…

Churn or not

This interactive scatter plot displays the relationship between credit score, estimated salary, and other attributes for bank customers, with each point colored by churn status. Users can select different attributes for the X and Y axes via dropdown menus, and hovering over a color legend item fades non-matching data points to highlight a specific churn group. The visualization uses React and D3 v5, with scales created through d3.scaleLinear and d3.scaleOrdinal, and renders circles as SVG marks. Data is loaded from a CSV file of the Churn dataset.

Oct 15, 2020
Loading thumbnail…

Cars Scatter plot with drop down

This scatter plot visualizes fuel consumption data from a Kaggle dataset, showing relationships between continuous variables such as fuel consumption, CO2 emissions, and engine cylinders. The visualization uses drop-down menus to let users select which attributes appear on the x and y axes, updating the scatter plot dynamically. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` from D3 to process the data, while custom SVG components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and circles. The plot uses a `ReactDropdown` component for interactive axis selection, with tooltips displaying formatted tick values on hover.

Oct 7, 2020
Loading thumbnail…

Solar System

A stylized, not-to-scale model of the solar system displays the sun and nine planets, including Pluto, on dark background with faint orbital rings. Planet sizes and orbital radii are fixed, but their revolution speeds vary by distance from the sun, with the closest planets moving fastest. The visualization is rendered as an SVG using React and D3 v6, where each planet is a circle with an SVG `<animateMotion>` element that follows a precomputed circular path. A static background image sourced from Khan Academy is included for context, while all orbital motion is driven purely through SVG animation rather than D3's simulation APIs.

Oct 1, 2020
Loading thumbnail…

Is your car fuel-efficient?

This interactive scatterplot uses bubbles to explore the link between a car's CO2 emissions and its city fuel consumption, with colors distinguishing fuel types. The visualization is built with the Vega-Lite API, which compiles specifications to Vega for rendering. Data from a Kaggle dataset is loaded via d3.csv. The chart is configured with custom axis styling and font sizes for improved readability. Hovering reveals the fuel type through a tooltip handler.

Sep 30, 2020
Loading thumbnail…

Chipotle visuals

A choropleth-style map displays all Chipotle locations in the United States as semi-transparent circles colored by state, overlaid on a light-gray outline of U.S. states. The visualization uses Vega-Lite’s `layer` API to combine a `markGeoshape` for the map with a `markCircle` projection for the restaurant points. Data comes from a CSV loaded via `d3.csv`, with longitude and latitude fields encoded, and tooltips showing location and address. The AlbersUSA projection and topojson state boundaries come from Vega’s sample data.

Sep 29, 2020
Loading thumbnail…

POI Category Tree

This visualization displays a hierarchical tree of ArcGIS point-of-interest categories, showing parent categories branching into their specific child values. It uses D3 v5’s `tree` layout and `linkHorizontal` generator to position and draw the SVG paths, with text labels scaled by depth. The data is loaded from a CSV file containing parent-child pairs, and the zoom behavior is enabled through `d3.zoom` for interactive panning and scaling.

Sep 29, 2020
Loading thumbnail…

Types of vehicles for a fuel type

This visualization shows the distribution of 746 car models across vehicle classes, color-coded by fuel type. A bar chart counts the number of models per vehicle class, with each bar segmented by fuel category. Hovering over a bar segment reveals the make and model of the counted vehicles. Built with the Vega-Lite API and D3.js, the example loads data from a CSV file hosted on Gist, originally sourced from Kaggle. The visualization uses `vl.markBar()`, `vl.x()`, `vl.y()`, and `vl.color()` to encode the categorical and quantitative fields.

Sep 24, 2020
Loading thumbnail…

Are you leaving because of your creditscore?

This scatterplot examines whether bank customers churn based on credit score and age. Each point represents a customer, colored by whether they exited the bank, with a tooltip revealing the customer ID. The visualization uses the Vega-Lite API with d3.v5 to load CSV data from a Kaggle churn-modelling dataset. The axes show age and credit score without zero baselines, and the chart is configured with custom styling for dark labels and light gray tick marks.

Sep 24, 2020
Loading thumbnail…

Batman as a HTML Starter

This example shows a stylized Batman logo rendered as an SVG using React and D3. The code draws the bat silhouette, face, eyes, and mouth using SVG primitives like polygons, polylines, and ellipses, with D3’s `arc()` generator defining the curved mouth shape. React manages the component structure, while D3 v6 provides the arc path calculations. The visualization is static, relying on hardcoded coordinates and shapes rather than data, and demonstrates a minimal integration of React for DOM rendering and D3 for geometry.

Sep 21, 2020
Loading thumbnail…

How fit do you feel?

This chart uses a grouped bar chart to show how people’s self-rated fitness level relates to their exercise frequency. Each bar’s height represents the number of survey respondents, with bar groups split by perceived health and colored by how often they exercise. Built with the Vega-Lite API and d3.csv for loading, the visualization reads fitness survey data from a Kaggle-hosted CSV, then renders interactive tooltips via vega-tooltip. The code applies custom axis and label styling from a config object to improve readability.

Sep 20, 2020
Loading thumbnail…

Churn of a company CSV Data

This example loads a CSV dataset on employee churn from a Kaggle-hosted file and uses D3 v5’s `d3.csv` to parse it. The visualization displays only summary statistics: the file size in kilobytes, the number of data rows, and the number of columns, rendered as large text in a `<pre>` element. The code also demonstrates an alternative approach using the Fetch API with `async/await` and `d3.csvParse`, though that path remains commented out. The interface is minimal, showing no charts or plots, but serves as a concise data-loading and formatting check.

Sep 9, 2020
Loading thumbnail…

Fuel Consumption based on cars CSV Data

This example loads a CSV file of car fuel consumption data from a Gist and displays basic summary statistics about the dataset. It uses the D3.js v5 library to fetch and parse the CSV via `d3.csv` and `d3.csvFormat`, then renders the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The visualization is minimal, focusing on data inspection rather than graphical representation. The data originates from a Kaggle dataset on fuel consumption, though no chart or plot is generated.

Sep 9, 2020
Loading thumbnail…

Fitness survey CSV Data

This example displays a minimal summary of a fitness survey dataset, reading directly from a CSV file hosted as a GitHub gist via the `d3.csv` API. It shows the file size in kilobytes, the total number of rows, and the number of columns, formatted as large text in a `<pre>` element. The visualization’s purpose is to confirm that the data has been successfully parsed rather than to graph the survey results. The code also includes commented-out alternative approaches using `fetch`, `async`/`await`, and `d3.csvParse`, illustrating multiple ways to load and parse CSV data in D3 v5.

Sep 9, 2020