ICE bonus

100%

✓ Published0🌍 Public

Last edited Jul 7, 2022

Created on Jul 5, 2022

Forked from d3-x3d : 3D Bar Chart Example

This interactive 3D bar chart visualizes used car data, comparing numeric attributes like selling price, kilometers driven, max power, and mileage for each car model. It uses the d3-x3d library to render the multi-series bar chart, with data loaded from a CSV file using d3.csv. The visualization is built with D3 v5 and displayed within an HTML page, styled with a simple heading.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

ICE-BONUS Iteractive Bar Chart

This interactive bar chart displays monthly car sales data for 34 brands, letting users switch between months via a dropdown menu. Built with D3 v3, it renders SVG rectangles whose heights transition smoothly when the selected month changes, with hover highlighting in orange. The x-axis uses an ordinal scale for brand names, while the y-axis linear scale adjusts dynamically using d3.svg.axis and transition calls. Data comes from a local CSV file with twelve monthly columns per brand.

PPY09052021

84% match

Loading thumbnail…

Bonus ICE 3D Bar Chart

This interactive 3D bar chart visualizes car sales data across five years (2018-2022). Each actor from the Tollywood dataset is represented as a series of vertical bars, with height encoding the numeric award count for each year. The visualization is built using the d3-x3d library, which leverages X3DOM for rendering three-dimensional graphics in the browser. The chart dynamically populates by fetching and parsing CSV data from a remote GitHub repository, then re-renders the display with the actual dataset.

Hharika-1929

81% match

Loading thumbnail…

Bonus ICE-3D Bar Chart using D3.js

This example visualizes car manufacturer sales data for the first six months using a 3D bar chart. The multi-series bar chart displays each manufacturer’s monthly values, rendered in an X3DOM scene through the d3-x3d library. The visualization loads CSV data from a GitHub gist, parses it into a dataset with month-value pairs, and passes it to a barChartMultiSeries component. The chart is created using d3.x3d.chart.barChartMultiSeries(), with data attached to the chart holder via the D3.js v5 selection API.

Ggayuvurukuti@gmail.com

81% 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

81% match

Loading thumbnail…

Bonus_ICE_IntBarChart

This interactive bar chart visualizes carbon emissions by car make year from 2013 to 2022, using values from an external CSV file. The chart displays CO2 emissions in grams per kilometer for each year, with bars color-coded by year. Built with D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG elements for rendering. Hovering over a bar triggers a transition that highlights the selected bar, displays a dashed reference line, and shows divergence values for other years. The visualization includes grid lines, axis labels, and a title.

Llibramanju

80% match

Loading thumbnail…

ICE-7

This animated scatter plot visualizes used car data, comparing selling price against various attributes including maximum power, mileage, and kilometers driven. The visualization cycles through different x-axis variables every two seconds, allowing viewers to explore correlations between car characteristics and market value. Built with D3.js, the chart uses a reusable scatter plot function with linear scales for both axes, implementing smooth transitions through a `setInterval` callback. The SVG rendering incorporates the Share Tech font and displays data points as circles, with axis labels updating dynamically to reflect the currently selected variable.

RRaajithaSabbineni

80% match

Loading thumbnail…

ICE-6.1

This bar chart displays the top 10 car models by selling price, sourced from a CSV file fetched via D3's `csv` function. Using React with D3 v5, the code maps car names to a band scale and prices to a linear scale, rendering red horizontal bars. Axes are drawn with `scaleLinear` ticks and `scaleBand` domains, and the SVG output highlights the comparative pricing of each vehicle.

AABCDB15

80% match

Loading thumbnail…

Bonus ICE - 3D Bar chart

A 3D bar chart visualizes total sales for seven car brands, with each brand’s column split into six car types (Convertible, SUV, Sedan, Coupe, Hatchback, Station Wagon). Using Highcharts with the highcharts-3d module, the chart applies a column series with stacking, grouping disabled, and 3D options such as alpha, beta, viewDistance, and depth. The axes represent car brands on the x-axis, total sales on the y-axis, and car types on the z-axis, all rendered via jQuery’s container selection.

DDhanusree Kodali

80% match