senthilrajendran1

Multi-Cryptocurrency - Closing Price

This multi-line chart displays closing prices for Monero, LiteCoin and AAVE from 2013 to 2021, with a colored line for each cryptocurrency. Users can filter the view using radio buttons for BTC, AAVE, XMR, and LTC. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with curveBasis to render SVG paths. Data is loaded via d3.csv from a Kaggle-derived dataset hosted as a GitHub gist, with dates parsed using d3.timeParse.

Multi Crypto-30day-SMA

This interactive line chart displays the 30-day simple moving average of closing prices for AAVE, XMR, and LTC cryptocurrencies, with data sourced from a Kaggle dataset. Users select a cryptocurrency via radio buttons, triggering an update function that redraws the time-series lines and axes. The visualization uses D3 v5’s `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render SVG paths, while a custom `calculateSMA` function computes the moving average.

Multi Cryptocurrency - Volume vs Market Cap

This interactive scatter plot visualizes the relationship between trading volume and market capitalization for selected cryptocurrencies (BTC, AAVE, XMR, LTC). Built with D3 v6 and SVG, it uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Users select a cryptocurrency via radio buttons, triggering a redraw through `d3.selectAll` and `.remove()`. The plot includes rotated x-axis tick labels and a color-coded legend. Data is loaded via `d3.csv` from a remote dataset, with axes formatted using `d3.format(".2s")`.

Multi Crypto - Percentage Change in Price Over Time

A multi-crypto line chart displays the percentage change in price over time for a selected cryptocurrency (BTC, AAVE, XMR, or LTC). Users switch between currencies via radio buttons, which filter the underlying CSV data and redraw the visualization. The chart uses d3.line and d3.scaleUtc for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft for axes. Data originates from a Kaggle dataset on historical crypto prices, rendered as an SVG with D3 v6.

Multi Crypto - Daily Price Fluctuations

This interactive candlestick chart displays daily price fluctuations for multiple cryptocurrencies—BTC, AAVE, XMR, and LTC—from 2013 to 2021. Users select a currency via radio buttons, which redraws the visualization for the filtered dataset. The chart uses d3.scaleUtc and d3.scaleLinear for axes, with candlestick bars rendered as SVG lines and rectangles colored green or red based on bullish or bearish trends. Data is loaded from a CSV via d3.csv, and axes are formatted using d3.axisBottom and d3.axisLeft.

Multi Crypto-90 day-SMA

This interactive line chart compares the 90-day simple moving average of closing prices for four cryptocurrencies: BTC, AAVE, XMR, and LTC. Users select a currency via radio buttons to update the visualization, which displays both the raw closing price line and the smoothed SMA line over time. The chart uses D3 v5 with SVG rendering, leveraging `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to plot the data. The dataset originates from Kaggle cryptocurrency historical records.

Multi Crypto-7day-SMA

This interactive line chart displays the daily closing prices of multiple cryptocurrencies alongside their 7-day simple moving averages, allowing users to compare trends for BTC, AAVE, XMR, and LTC via radio buttons. The visualization uses D3 v5 with SVG rendering, employing d3.scaleTime, d3.scaleLinear, and d3.line to plot the data from a CSV file hosted on GitHub. The calculateSMA function computes the moving average, while axes, legends, and labels are dynamically updated on selection changes.

Multi Crypto - Market Capitalization per Month

This example visualizes the monthly market capitalization of four cryptocurrencies (BTC, AAVE, XMR, LTC) as a bar chart. Users select a cryptocurrency via radio buttons, which triggers a redraw of the chart filtered to that symbol. The visualization uses D3.js v6 to parse CSV data, aggregate values by year and month with `d3.rollups`, and render logarithmic-scaled bars with `d3.scaleLog` and `d3.axisBottom`/`d3.axisLeft`. The SVG output includes rotated date labels, axis titles, and a chart title. Data comes from a remote CSV hosted as a GitHub gist.

BTC - Percentage Change in Price Over Time

This visualization displays the percentage change in Bitcoin's closing price over time, with daily fluctuations plotted as a blue line against date and percentage-change axes. The chart uses D3.js v6 with an SVG rendering approach, employing `d3.scaleUtc()` for the time axis and `d3.scaleLinear()` for the value axis, while `d3.line()` generates the path. Data is loaded from a CSV file containing Bitcoin price history, and daily percentage changes are calculated by comparing each day's closing price to the previous day's.

BTC Closing Price - Line Chart

This line chart displays the closing price of Bitcoin from 2013 to 2021, with time on the x-axis and price on the y-axis. The visualization uses D3.js v6 with an SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisBottom`/`axisLeft` with gridlines. Data is loaded from a CSV via `d3.csv` from a GitHub gist, originally sourced from Kaggle’s cryptocurrency price history dataset. Gridlines and clear axis labels enhance readability.

Crypto-7day-SMA

This line chart shows the closing prices and 7-day simple moving averages for three cryptocurrencies—AAVE, XMR, and LTC—selected via radio buttons. Users can switch between assets to compare price trends over time. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to draw paths for both price and SMA series. The data originates from a Kaggle dataset on historical prime rates, though adapted for crypto here.

Crypto-30day-SMA

This line chart displays Bitcoin’s daily closing price alongside its 30-day simple moving average (SMA), with the SMA overlaid as a green line to highlight long-term trends. The chart uses d3.csv to load data from a GitHub-hosted CSV, d3.scaleTime and d3.scaleLinear for axes, and d3.line to render both paths. A custom JavaScript function calculates the SMA by averaging closing prices over a sliding 30-day window. The visualization is rendered as an SVG, includes an axis label, a legend, and a title, and sources its data from a Kaggle dataset on historical crypto prices.

Multi Crypto-7day-SMA

This visualization displays the closing prices of multiple cryptocurrencies alongside their 7-day simple moving averages (SMAs) using a dual-line chart. The chart plots each cryptocurrency’s daily closing price as a thin line and overlays a thicker, smoothed SMA line, with distinct colors for each symbol. The x-axis represents the date range from the dataset, and the y-axis shows the closing price, with a legend at the top right for identification. Built with D3 v5, the code fetches a CSV from a GitHub gist, parses dates and numeric values, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to generate the SVG paths. The SMA is calculated manually via a sliding window function, and the chart includes labeled axes, a bold title, and a color-coded legend.

Social Network graph - ICE-8

This graph visualizes a small social network of nine people, showing connections between individuals as weighted links. The code uses `d3.layout.force` with gravity, distance, and charge parameters to position nodes, and renders the network as an SVG with red circles and blue lines. Node labels are displayed next to each circle, and link thickness reflects the `weight` value from the JSON data. Users can drag nodes to explore the layout. The implementation loads data from a `graph.json` file and uses D3 v4 for the force simulation and DOM manipulation.

Tree ICE-8

This interactive family-tree chart visualizes five generations of relatives from the root 'Scott', using an animated collapsible tree layout. Built with the D3.js library (version 3.5.17), the SVG-based rendering animates node and link transitions via `d3.layout.tree`, `d3.svg.diagonal`, and the `.transition()` API. Styled with CSS, nodes feature clickable circles and labeled text, while the tree's fixed-depth layout spaces each generation horizontally.

Europe Map ICE8

This example displays an outline map of Australian states rendered as SVG paths, with each state stroked in red and filled with a pale cream color. The map uses a Mercator projection configured for Australia and supports panning and zooming through d3.zoom. The code loads GeoJSON data from a GitHub repository and applies a d3.geoPath generator to draw the state boundaries. Despite the "Europe Map ICE8" title, the visualization actually focuses on Australian geography.

ICE_8

This example displays a world map using a natural Earth projection with landmasses in brown, a blue sphere background, and black interior borders. It renders geographic data from the `world-atlas` package as SVG paths using `d3.geoPath`. The code applies a `geoNaturalEarth1` projection and includes graticules. Built with React and D3 v5, it fetches TopoJSON data via `d3.json` and utilizes `topojson.feature` and `topojson.mesh` to generate the land and boundary geometries for display.

Crypto-90day-SMA

This visualization charts Bitcoin’s daily closing price as a steelblue line, overlaying a bright green 90-day simple moving average derived from the same data. It uses d3.csv to load the historical price dataset, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate both SVG paths. A custom calculateSMA function computes the rolling average, while d3.axisBottom and d3.axisLeft render the time and price scales, with a legend and bold axis labels added for clarity.

Market Capitalization Bar Chart

This bar chart compares Bitcoin market capitalization across different countries using data from Kaggle’s cryptocurrency price history. It aggregates market cap values per country with d3.rollups and renders them as steelblue rectangles scaled by d3.scaleBand and d3.scaleLinear. The visualization includes rotated x-axis labels and formatted y-axis ticks via d3.axisBottom and d3.axisLeft, with both axes and chart title annotated as SVG text. Data is loaded asynchronously via d3.csv.

Scatter Plot

A D3.js v6 scatter plot visualizes the relationship between trading volume and market capitalization for Bitcoin, using data loaded from a remote CSV file. The chart renders as an SVG with circle marks, linear scales for both axes, and formatted tick labels using `d3.format`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while rotated x-axis labels and a bold chart title are added via SVG text elements. The plot reveals the correlation between these two cryptocurrency metrics across the dataset.

Candlestick Chart

This candlestick chart visualizes Bitcoin’s daily price fluctuations from 2013 to 2021, with green and red bars indicating bullish and bearish trading days. Built with D3 v6, it uses `d3.scaleUtc` for the time axis and `d3.scaleLinear` for price, rendering SVG lines for high-low ranges and rectangles for open-close spreads. The chart includes rotated monthly tick labels and axis titles, drawing on historical cryptocurrency data sourced from Kaggle.

3D Scatter Plot - Wine

This example visualizes three wine sample groups in a 3D scatter plot, comparing measurements of malic acid, ash, and alcalinity of ash. Each group is represented by a distinct color—red, blue, and green—with semi-transparent markers to reveal overlapping points. The code loads CSV data via `d3.csv` from a GitHub gist and renders the interactive plot using Plotly’s `Plotly.newPlot` function with a `scatter3d` trace type. Axis titles label each dimension, and a legend identifies the wine samples.

Apr 5, 2023

Bonus ICE - 3D-Bar-chart

This 3D bar chart visualizes worldwide video game sales across ten platforms (PC, Nintendo DS, PlayStation, Wii, Xbox, and others), with stacked columns representing five regional categories: North America, Europe, Japan, Other Countries, and Global. The code uses the Highcharts library with the highcharts-3d extension, enabling an angled, perspective view through the `options3d` configuration (alpha, beta, and depth settings). Each series supplies raw data points as coordinate pairs, while the zAxis defines regional categories for the depth dimension. The chart’s color palette, derived from plot options, distinguishes the five stacked series.

Apr 5, 2023

3D Bar Chart

This example displays a 3D bar chart using Three.js to visualize mass shooting data from a CSV file. It shows the total fatalities and injured victims for each state as red and green bars that are positioned along a three-dimensional grid. The chart builds its scene using Three.js primitives like `THREE.BoxGeometry` and `THREE.MeshBasicMaterial`, while D3.js handles CSV loading and scaling via `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear`. The scene renders with a perspective camera and an animated `requestAnimationFrame` loop.

Apr 5, 2023

Bar chart with D3.js

A bar chart displays total victims of mass shootings across ten US states, with California, Texas, and Florida leading. Hovering over a bar highlights it, dims value labels, and draws a dashed threshold line showing the divergence of other states from the selected one. The visualization uses D3 v5 with SVG rendering, scales such as `d3.scaleBand` and `d3.scaleLinear`, and axis generators for gridlines. Data comes from an embedded sample array, while CSS styles the container, bars, and text.

Apr 3, 2023

ICE-7-line_chart

This line chart visualizes the history of average prime lending rates in the United States from 1956 to the present, with each year’s average rate plotted against time. The SVG rendering uses d3.csv to load the dataset from a GitHub Gist, then applies d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and a d3.line generator with curveBasis to create the smooth blue path. The chart includes labeled axes for year and rate, with gridlines extending across the plot area.

ICE-7-area_chart

This area chart displays the history of lending rates from 1956 to the present. The visualization uses d3.area with curveBasis to generate a smooth filled path, with scales from d3.scaleLinear mapping the year and average majority prime rate values. Data is loaded via d3.csv from a GitHub gist, and axes are rendered using d3.axisBottom and d3.axisLeft within an SVG container. The chart applies margins for layout and labels the axes "Year" and "Lending Rate."

ICE-7-Pie Chart

This interactive pie chart summarizes the total number of mass shooting victims across the top 20 U.S. states. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal`/`schemeCategory10` APIs to generate and color the SVG segments, with a color-coded legend listing each state and its victim count. The data is loaded from a remote CSV and sorted by `Total_Victims` before slicing. Hovering over a segment highlights it and logs the value to the console.

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—on the x-axis while keeping sepal length on the y-axis. Data points are colored by species using magenta, cyan, and orange markers. Built with D3 v6, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and `join` to render SVG circles and axes, with a `setInterval` function updating the x-value mapping every second. The Iris dataset is loaded via `d3.csv`, and a custom legend labels each species.

ICE 6 - Q2 - Scatter plot

This scatter plot visualizes the relationship between color and intensity attributes of wines from the Wine Recognition dataset. Each point’s position encodes the two quantitative variables, while its fill color and symbol shape are both driven by the intensity value, using D3’s scaleOrdinal with three fixed colors and symbol types. Implemented as a vanilla HTML/SVG application with d3.csv for data loading, d3.scaleLinear for axes, and a custom scatterPlot function that builds marks via d3.symbol and attaches axis labels dynamically.

Mar 23, 2023

ICE 6 - Rendering Marks and Channels with React & D3

This example visualizes the total victims of mass shootings in the top 30 U.S. states using a horizontal bar chart. Built with React and D3 v5, the SVG rendering maps each state to a band scale on the y-axis and a linear scale on the x-axis, encoding victim counts as bar widths. The code loads CSV data via `d3.csv`, applies `scaleBand` and `scaleLinear`, and manually renders axes and gridlines using `d3.axisBottom` and `d3.axisLeft` alternatives. State names are labeled alongside each bar, with tick marks drawn as blue lines.

Mar 23, 2023

ICE 5

This example presents an automotive encyclopedia that displays a static image of a car within an HTML page. Styled with CSS for layout and color, the page includes a title, description, and an SVG element that references an embedded base64-encoded JPEG image as a pattern fill. Using D3.js for SVG creation and React as the framework, the visualization focuses on displaying a single car image rather than interactive data exploration, with the SVG `rect` element filling the canvas with the image pattern.

Mar 9, 2023