jayavamsi

@jayavamsi·12 public vizzes

Bonus ICE 3D Bar Chart

This example shows Netflix subscription price changes from 2016 to 2022 across three tiers—Basic, Standard, and Premium—as a 3D bar chart. The visualization uses the `d3.x3d.chart.barChartMultiSeries()` component to render the multi-series data, with D3 v5 loading the CSV and parsing rows. The chart is displayed within an X3DOM scene, and the bars are sized based on the numeric values from the dataset. Data is fetched from a GitHub Gist containing yearly costs for each plan.

Apr 6, 2023

Loading thumbnail…

Bonus ICE 3D Bar Chart

This example presents Netflix subscription prices for Basic, Standard, and Premium plans from 2016 to 2022 as an interactive 3D bar chart. The visualization uses the `d3.x3d.chart.barChartMultiSeries()` component from the d3-x3d library to render three grouped bars per year, with data loaded from a CSV file via `d3.csv`. The scene is displayed in an X3DOM container, combining D3.js for data parsing and the d3-3d extension for three-dimensional layout, allowing viewers to rotate and explore the price trends across plan tiers.

Apr 6, 2023

Loading thumbnail…

BONUS ICE: 3D Scatter Plot

This 3D scatter plot visualizes Netflix subscription prices, mapping Year, Standard plan cost, and Premium plan cost across three axes. The data, loaded from a CSV via `d3.csv`, is rendered as purple circular markers using Plotly’s `scatter3d` trace type. Axes are labeled and styled with blue title fonts, and the chart is drawn into a div via `Plotly.newPlot`. The code uses both Plotly 2.9.0 and D3 3.5.17 libraries, with markers sized and outlined to enhance readability.

Apr 6, 2023

Loading thumbnail…

Amazon_stock_price

This visualization displays the average annual stock price of Amazon in US dollars over time, using a smooth line chart generated with D3.js v5 within a React framework. The SVG renders a line path with a basis curve, while axes are labeled "Year" and "Avg_Stock_Price_USD" via `axisLeft` and `axisBottom`. The data is loaded as CSV from a GitHub gist, with numeric parsing applied to both year and price fields, and the chart employs `scaleLinear` and `extent` to map domains.

Mar 30, 2023

Loading thumbnail…

Stock of Amazon

This example visualizes Amazon’s average annual stock price as a blue area chart over time, with red titles and axis labels. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render smooth SVG paths. Data is loaded via `d3.csv` from a public GitHub gist, and the chart includes grid lines, tick formatting, and rotated y-axis labels.

Mar 30, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the static message “Hello HTML!” centered on the page using a large, 13-em font. It demonstrates a minimal HTML document that combines inline CSS for styling with the body’s plain text content. The code uses no external libraries or JavaScript APIs, relying solely on HTML and CSS to render the text. It serves as a bare-bones starter template for web-based projects.

Mar 30, 2023

Loading thumbnail…

AmazonPrime_Basic_Cost Pie Chart

This pie chart displays the monthly cost of Amazon Prime Basic subscriptions across ten countries, with each slice colored by cost and accompanied by a legend listing country names and dollar amounts. The data is loaded from a CSV dataset and sorted in descending order before rendering. The visualization is built using React with D3 v5, leveraging `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate SVG paths and legends.

Mar 30, 2023

Loading thumbnail…

ICE_7_Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different combinations of sepal and petal measurements on the x-axis. Colored circles represent the three iris species, with a legend showing the color mapping. The visualization uses React, D3 version 6, and SVG rendering. It leverages `d3.csv` for data loading, `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and a `setInterval` to animate the axis changes. The data source is a CSV file from a GitHub gist.

Mar 30, 2023

Loading thumbnail…

ICE-6_Scatter_Plot

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three species, colored blue, yellow, and red. It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and map the data, rendering SVG circles with fixed radius. The code also parses sepal measurements but only uses them for axis labels, with a rotated y-axis label and a horizontal x-axis label. The visualization fills the browser window using `window.innerWidth` and `innerHeight`.

Mar 23, 2023

Loading thumbnail…

ICE-6_Bar_Graph

This example visualizes the duration of each song in a Spotify dataset using a horizontal bar graph. The chart displays the first ten songs from a CSV file, with the song names on the y-axis and their corresponding durations on the x-axis, making it easy to compare track lengths at a glance. The visualization is built with React and D3 v5, using D3 functions like `csv` to load the data, `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `axisBottom` for tick generation. The bars are rendered as SVG `<rect>` elements, with axis lines and labels styled in red and black, all within a fixed 960x500 canvas.

Mar 23, 2023

Loading thumbnail…

ICE-5

This example displays a summary of Spotify streaming data, reporting the file size in kilobytes, row count, and column count. It loads a CSV dataset from a GitHub gist using D3 v7’s `d3.csv` method and concatenates the statistics into a message displayed in a `<pre>` element. The page is styled with CSS, includes an embedded SVG image, and uses plain JavaScript within an HTML file, without a React build step.

Mar 9, 2023

Loading thumbnail…

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

An overlapping generative composition layers hundreds of semi-transparent pentagons, each positioned and colored randomly through nested array maps, over a large embedded SVG path of the Buddha. The SVG polygon elements use trigonometric calculations for their five points, while the Buddha path is scaled and translated in a separate group. React renders the scene, with random RGB fill values and opacity creating depth and visual mixing.

Mar 2, 2023