Snarasimhap

@Snarasimhap·11 public vizzes

ICE Bonus

This example displays a 3D scatter plot showing student scores in English, Science, and History plotted against age and maths achievement. The visualization uses three separate traces, with each subject represented by a distinct color: blue for Science, black for History, and grey for English. The interactive chart is rendered using the Plotly JavaScript library within an HTML interface, with data loaded from a GitHub-hosted CSV file through D3’s `d3.csv` function. Users can rotate and explore the three-dimensional space to examine relationships between the variables.

Jul 6, 2022

Loading thumbnail…

ICE

This example displays a 3D bar chart of student marks across four subjects: Science, English, History, and Maths. The visualization uses the `d3-x3d` library to render the chart in a web browser, with data loaded from a CSV file via `d3.csv`. The chart is created using the `barChartMultiSeries` API, which draws multiple series of bars for each student, while `d3.scaleLinear` and axis functions position the bars along the axes.

Jul 6, 2022

Loading thumbnail…

Fork of ICE

This example displays a 3D multi-series bar chart of student scores in Science, English, History, and Maths for named individuals, with data loaded from a CSV file. The visualization uses the d3-x3d library alongside d3.v5, x3dom, and the d3-3d plugin to render interactive WebGL-based bars. The chart is generated by calling `d3.x3d.chart.barChartMultiSeries()` on a chart holder div, with data parsed via D3’s `csv` function and rows transformed into key-value pairs using a custom `parseRow` function. Yellow backgrounds and black text style the page.

Jul 6, 2022

Loading thumbnail…

Fork of ICE

This example renders a 3D multi-series bar chart of car manufacturer data for the first six months, with each manufacturer’s values for Science, English, History, and Maths displayed as colored bars. The visualization uses the d3-x3d library, which bridges D3.js and X3DOM to produce interactive 3D scenes in the browser. Data is loaded from a CSV file via D3’s `csv` method and parsed into the expected hierarchical format before being passed to the `d3.x3d.chart.barChartMultiSeries` component. The page is styled with CSS, and the chart is placed inside a div with a fixed height and width.

Jul 6, 2022

Loading thumbnail…

Fork of Plot of Top 10 NASCAR Winners colored by Track

This stacked bar chart shows the top 10 NASCAR drivers by total wins between 1975 and 2003. Each bar is subdivided and colored by the specific race track where each win occurred, and a tooltip displays the track name and win count. Built with Vega-Lite and the Vega-Lite API, the visualization filters the dataset to only include drivers marked as “IsInTop10.” The bars are encoded using `markBar`, with the x-axis counting wins and color mapping to a predefined track domain.

Jul 5, 2022

Loading thumbnail…

ICE 7 Area Chart

This area chart shows the relationship between total COVID-19 deaths (x-axis) and total cases (y-axis) using D3.js v5. The visualization uses `d3.area()` with `curveBasis` to draw a filled path beneath the curve, rendered as an SVG. The data is loaded from a CSV file via `d3.csv()` from a GitHub gist. Axes are generated with `d3.axisBottom()` and `d3.axisLeft()`, with tick formatting using `d3.format()`. The chart includes labeled axes and gridlines, with the area filled in a dark purple color.

Jul 2, 2022

Loading thumbnail…

ice7

This stacked area chart displays the distribution of educational degrees conferred in seven fields over time, with the x-axis representing years and the y-axis showing counts up to 200,000. It uses d3.stack() to layer the data, d3.area() and d3.scaleTime() to render the paths, and d3.scaleOrdinal() for the color palette. The visualization loads CSV data from a GitHub gist, draws SVG elements, and includes custom axis labels, with a legend implied by the colored layers.

Jul 2, 2022

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes the relationship between Maths and Science marks for a dataset. It renders a single red line path connecting data points, with a time-scaled X axis for Maths and a linear Y axis for Science, using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line. The SVG output is 960 by 500 pixels, with labeled axes and a title, using data loaded from a CSV file via d3.csv.

Jul 2, 2022

Loading thumbnail…

ICE 7

This example visualizes automobile sales in India from 1999 to 2012 as a line chart, plotting Science (sales) against Age (years) using a time-scaled x-axis and linear y-axis. It loads CSV data from a GitHub gist via `d3.csv` and renders an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. The chart includes gridlines, axis labels, a title, and a styled path highlighted in blue.

Jul 2, 2022

Loading thumbnail…

ICE - 7 Pie Chart

This visualization presents a pie chart of COVID-19 death counts by country, with each slice labeled with the death total in thousands and a corresponding legend listing country names and values. The chart uses d3.pie to compute slice angles, d3.arc to generate SVG path segments, and a d3.scaleOrdinal with a custom color array to fill each slice. Data is loaded asynchronously from a remote CSV via d3.csv, and the SVG rendering is handled entirely through D3 v5 selections and path elements.

Jul 2, 2022

Loading thumbnail…

ICE 7

This interactive scatter plot maps student marks across Math and Science, with age encoded by symbol type. It cycles through different data columns as the x-axis every fifteen seconds, updating the visualization dynamically. Built with D3, it uses `scaleLinear`, `axisLeft`, `axisBottom`, `symbols`, and `scaleOrdinal` to render the SVG animation. The plot pulls data from a CSV file and adjusts its axes and points in real time, all within a responsive full-screen viewport.

Jul 2, 2022