ICE

100%

✓ Published3🌍 Public

Last edited Jul 6, 2022

Created on Jul 5, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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.

SSnarasimhap

87% match

Loading thumbnail…

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.

SSnarasimhap

82% match

Loading thumbnail…

ICE 6 -3

This example shows a multi-series line chart comparing math, reading, and writing scores across sampled students, with interactive hover tooltips displaying exact values for each score type. The visualization uses D3 v7 to load CSV data from a GitHub gist, downsamples every 10th record, and renders the series with `d3.line` and `d3.curveMonotoneX` on an SVG canvas. Horizontal gridlines, a legend, and axes are generated via `d3.axisLeft` and `d3.axisBottom`. Three colored lines—steelblue, tomato, and seagreen—represent the respective subjects, with hover circles attached via `mouseover` events to populate the tooltip div.

Ssakethpapareddy@gmail.com

81% match

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.

SSnarasimhap

80% match

Loading thumbnail…

ICE-6 (3)

This example presents two linked charts that analyze student performance data loaded from a CSV file hosted in a GitHub Gist. A multi-series line chart compares subject scores, team scores (scaled by a factor of ten), and average scores across student IDs, using D3’s scaleLinear, axis, and line APIs. A second combined chart overlays bars and lines to show average scores grouped by team score. Both visualizations include legends, labels, gridlines, and an annotation highlighting the largest divergence between subject and average scores.

SSYAM TEJ

80% match

Loading thumbnail…

ICE 6: Scientific Data Visualization

This example visualizes the total marks of 17 students in a semester as a horizontal bar chart. The SVG rendering uses React and D3 v5, with data loaded from a CSV file via `d3.csv`. Scales include `scaleBand` for student names on the y-axis and `scaleLinear` for marks on the x-axis, while `xScale.ticks()` generates gridlines, and colored rectangles represent each student’s score.

Nnagarajuobbineni

80% match

Loading thumbnail…

ICE 3D Bar Chart 11580431

This example uses the D3-x3d bridge to render an interactive 3D bar chart comparing car safety awards across companies for 2020–2022. Data is loaded from a CSV file and parsed into a multi-series format, then displayed through a `barChartMultiSeries()` chart component. The visualization relies on d3.v5 for data processing, the d3-3d library for 3D bar geometry, and X3DOM for WebGL-based rendering within the browser. Axis labels and bar heights scale linearly based on the parsed numeric values.

Vviswak12

79% match

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.

SSnarasimhap

79% match