R

rallabandisushen@gmail.com

@Sushen28·23 public vizzes

Loading thumbnail…

Fork of Practice4 car scatter plot

This scatter plot visualizes the relationship between car horsepower and weight, using data from the built-in `data.csv` file. Each circle represents a car model, with the axes labeled as "No. of countries" and "GDP," though these labels appear mismatched with the plotted data. The visualization uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render the axes and grid lines. The SVG-based chart applies a red, semi-transparent fill to all circles and includes a title, with styling defined in `styles.css`.

Loading thumbnail…

Fork of Fork of Bubble chart

This bubble chart visualizes the correlation between average GDP and travel numbers across car makes, using circle size to represent highway MPG and color to distinguish brands. Built with D3 v7, it reads data from a CSV file and renders an interactive SVG with a tooltip. The example uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and event handlers for mouseover interactions.

Loading thumbnail…

Fork of Bubble chart

This bubble chart shows the correlation between travel and GDP data, with each bubble representing a country and its position determined by GDP on the x-axis and torque on the y-axis. The bubble size encodes highway MPG values. The visualization uses D3 v7 to load CSV data, create linear scales for axes and bubble size, and render circles as SVG elements. Interactive tooltips appear on mouseover, displaying the country name, while a legend explains the bubble size and color mappings.

Loading thumbnail…

Fork of Scatter project

This scatter plot visualizes the relationship between country code (on the x-axis) and GDP (on the y-axis) for a dataset of international tourism receipts, with each country represented as a semi-transparent red circle. The visualization uses the D3 v5 library, specifically importing functions like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scale the data. The data is loaded from a CSV file and processed in JavaScript, with the GDP values converted to numbers before being rendered as SVG circles within a 960x500 pixel canvas.

Loading thumbnail…

Social Network graph

This interactive network graph visualizes social connections among nine individuals, with nodes representing people and links showing relationships weighted by thickness. Users can drag nodes to reposition them, while hovering reveals tooltips displaying each person's name. Built with D3.js v4, the visualization uses `d3.layout.force` for physics-based layout, SVG for rendering, and custom mouse event handlers for the tooltip interactions. Data comes from the embedded graph.json file, which defines node groups and link weights.

Loading thumbnail…

ICE8 : Tree Demo

A static D3.js tree layout rendered as an SVG diagram displays a small organizational hierarchy with six nodes and five diagonal links. The code uses `d3.layout.tree`, `svg:diagonal`, and `svg:path` elements, while circles are color-coded by role (red for manager, green for staff, blue for interns). Hovering over a node triggers mouseover, mousemove, and mouseout functions that show a pink tooltip with the employee’s name. Data is embedded inline as a JSON object, and the animation-free visualization uses D3 v2 to position nodes and draw connecting paths.

Loading thumbnail…

ICE 8 : Country map -India

This visualization displays a choropleth map of India, using two TopoJSON datasets for district and state boundaries. The map is rendered with SVG paths using the `d3.geoPath` and `d3.geoMercator` projection, with districts colored by a categorical scale via `scaleOrdinal` and `schemeCategory10`. Hovering over a district turns it dark green. The state boundaries are overlaid as a separate layer with black strokes, and the map includes zoom functionality.

Loading thumbnail…

Fork of map of epa data sites

This map visualizes U.S. EPA air quality site data, plotting circles for each location with a radius that encodes the AQI value. A geospatial projection via `d3.geoAlbersUsa` and `d3.geoPath` renders state boundaries from a TopoJSON US Atlas, while the circle sizes are scaled using `d3.scaleSqrt`. The React components load CSV data with `d3.csv` and render the SVG elements, with hover effects on states and semi-transparent blue circles marking the sites.

Loading thumbnail…

Fork of ICE 8 : Country map -India

This visualization displays a choropleth map of India, with each district colored by its state. The map renders state and district boundaries as SVG paths, and hovering over a district highlights it in dark green. Built with React, the code uses D3’s `geoPath`, `geoMercator`, and `scaleOrdinal` to project TopoJSON data from deldersveld and datameet, with zoom functionality enabled.

Loading thumbnail…

Travel v/s GDP

This example shows a world map of international tourism receipts in 2015, colored by magnitude to compare travel revenue against GDP. Hovering reveals each country’s exact value, and users can zoom and pan the map. It uses D3’s `geoNaturalEarth1` projection with `geoPath` for rendering, plus D3’s `zoom` behavior for interactivity. The map loads country boundaries from TopoJSON and data from a CSV file, while `scaleOrdinal` and `schemeGreens` drive the color legend.

Loading thumbnail…

TRAVEL VS GDP D3.js Line Chart

This visualization presents a line chart displaying international tourism receipts, intended to show GDP-related travel trends across countries from 2012 to 2020. The chart renders a single series of data points as a path in an SVG, using d3.csv to load the dataset and d3.scaleBand and d3.scaleLinear for the axes. The line itself is generated with d3.line, with the Y axis scaled to the "customers" column, while the X axis labels years as categories. The code also demonstrates axis rendering via d3.axisBottom and d3.axisLeft, with styling handled through CSS.

Loading thumbnail…

TRAVEL VS GDP barGraph

This visualization combines a bar chart and scatter plot to compare the 2022 population of countries, using a CSV dataset. Bars encode population values on a linear scale, while overlaid blue circles highlight the same data points. Users can sort the countries in ascending or descending order via buttons, with transitions animating the reordering. The code uses D3 v5 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, along with `transition()` and `.attr()` for smooth updates. Tooltips display country names and population on mouseover.

Loading thumbnail…

BONUS ICE1 - 3D Bar Chart

This example uses Highcharts and the Highcharts 3D add-on to render a three-dimensional vertical bar chart that visualizes total profit for sub-category products, grouped into quadrants based on sales and profit levels. The chart displays profit values on the y-axis and product categories on the x-axis, with distinct series for low and high sales/profit combinations. The code configures 3D properties such as depth, alpha, beta, and viewDistance within the `options3d` object to create the perspective view.

Loading thumbnail…

BONUS 1: 3D Scatter Plot

This 3D scatter plot displays the relationship between height, weight, and body fat percentage, using the Plotly.js `Plotly.newPlot` method to render a `scatter3d` trace. The visualization reads CSV data via D3.js (`d3.csv`) from a GitHub-hosted `bmi.csv` file, mapping each axis to the corresponding attribute. Data points appear as navy circular markers with 0.8 opacity, while the layout defines green axis titles for each dimension. The chart is embedded in an HTML page with a Plotly and D3 script setup.

Loading thumbnail…

ICE-7 Area chart

This stacked area chart visualizes the year-over-year counts of engineering, business, and food management programs from 2010 to 2018, with data loaded from a CSV file. Three distinct colored areas, labeled in white, are layered using d3.stack with ascending order and a basis curve. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeDark2 for colors. The d3-area-label plugin positions text labels within each area, while custom legend circles are appended directly to the SVG.

Loading thumbnail…

ICE 7 Line chart

This line chart visualizes the number of students per year from 2010 to 2018, with data loaded from a CSV file via `d3.csv`. The visualization uses a band scale for the categorical year axis and a linear scale for the count, rendering an SVG path with a thick steelblue stroke. The chart includes labeled axes for "Year" and "Students," with tick marks and text styled through CSS. The implementation relies on D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`, all within a React-free HTML page.

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the numeric columns of the Iris dataset, plotting each one against the final column (petal width) on a full-screen SVG canvas. The visualization updates every three seconds, transitioning points and axes smoothly over one second. Built with D3 v6, the code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to animate marks, axis labels, and titles, while a reusable `scatterPlot` component manages the chart's state and updates.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the cost per credit across ten different universities, using a D3.js v5 `pie` layout and `arc` generator to render SVG paths. Each slice’s color comes from `scaleOrdinal` and `schemeCategory10`, with a legend listing country names and dollar values. The data is loaded as CSV from a GitHub gist, sorted descending, and the top ten entries are displayed. React is referenced as the framework, though the rendering is entirely SVG-based.

Loading thumbnail…

Fork of ICE 6: Scatter Plot Showing Life expectancy vs Happiness Score Scatter Plot

This scatter plot visualizes the relationship between life expectancy and happiness score across countries, with each circle representing a data point. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the CSV data onto an SVG canvas, with green circles and labeled axes. The code loads data from a GitHub-hosted CSV file, parses numeric fields, and renders a titled plot with grid lines and rotated axis labels. Happiness scores appear on the y-axis, while life expectancy spans the x-axis, revealing a positive correlation between the two metrics.

Loading thumbnail…

Seattle average temperatures

A bar chart displays average daily temperatures in Seattle for 2017, with each bar representing a date and its corresponding temperature value. The chart uses Chart.js to render the data fetched from a remote CSV file, and the bars are colored in red with a semi-transparent fill. The canvas background is set to black via CSS, and the chart's y-axis ticks begin at zero. The data is loaded asynchronously using the Fetch API, and the visualization updates responsively within the browser.

Loading thumbnail…

Bar Chart

This bar chart displays average monthly temperatures in Seattle for 2017, with each bar representing a month and its value plotted on a zero-based y-axis. The visualization is rendered on a Canvas element using Chart.js, which the code initializes with a dataset fetched from a GitHub Gist containing the CSV weather data. The chart applies a red color scheme to the bars and includes hover effects that darken the selected bar. The data loading occurs asynchronously via the Fetch API, parsing the CSV rows into labels and numeric temperature values.

Loading thumbnail…

Fork of ICE Bar chart showing salary based on experiences

This example visualizes the relationship between years of experience and annual salary using a bar chart. Each bar represents a data point from a CSV file, with bar height encoding salary and color mapped to salary values via a quantized color scale. The chart includes labeled axes, a color legend rendered with d3-legend, and axis ticks formatted as currency. It uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom and d3.axisLeft for ticks, all rendered as SVG within a React app.

Loading thumbnail…

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

Small animated circles are scattered across a blue background, each with randomized positions, colors, and opacity. The circles pulse in size and rotate continuously while their fill cycles through a palette of red, yellow, purple, blue, pink, and orange. A static Buddha illustration is overlaid on top, creating a layered effect. The visualization uses React to render SVG elements, with animations driven by SVG's native `<animate>` and `<animateTransform>` tags rather than external libraries.