Skip to main content
SimilarExport ZIP
100%

ICE-BONUS Iteractive Bar Chart

✓ Published1🌍 Public
PPY09052021
Last edited Mar 11, 2022
Created on Mar 11, 2022
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE bonus

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.

RRaajithaSabbineni
84% 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…

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
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…

Bar Graph - ICE6

This bar graph visualizes car sales data for ten vehicle types, showing the number of units sold in 2021. The chart uses a vertical bar for each car type, with the height corresponding to its sales figure. The visualization is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and SVG rectangles for the bars. Data is loaded from a remote CSV file via `d3.csv` and rendered with axis labels for "Car Types" and "Sales".

RRahulbelede97@gmail.com
80% match
Loading thumbnail…

Fork of ICE

This example presents a 3D bar chart showing car sales figures for multiple brands across different years, rendered using D3.js and the d3-x3d library. The visualization uses a multi-series bar chart layout, with the x-axis representing car brands and the z-axis (depth) showing years. The chart loads data from a CSV file, parsing it into a structured format where each year contains values for Ford, Chevrolet, Honda, Toyota, Hyundai, and BMW. The code initializes the chart using `d3.x3d.chart.barChartMultiSeries` and applies D3's `csv` and `scaleLinear` functions within an X3D-based rendering environment for interactive 3D exploration.

Aakhil kata
79% match
Loading thumbnail…

ICE - 7 Line Chart

This chart visualizes monthly car sales trends over time, plotting total sales amounts against sale dates. The visualization uses React with D3 v7 to fetch and parse CSV data, then renders an SVG line chart with a smooth curved line via `curveBasis`. Axes are generated using D3 scales (`scaleTime` and `scaleLinear`), with custom tick components for x and y grids. The x-axis labels months, while the y-axis displays sales amounts, and axis titles clarify the variables. The chart’s styling includes red line strokes, grey gridlines, and green axis labels, with the data sourced from a remote GitHub CSV file.

66264kusuma@gmail.com
78% match
Loading thumbnail…

ICE - 6 Marks and Channels (11508271)

A bar chart displays the top ten car models by first-quarter sales, ranked by year along the vertical axis and price along the horizontal axis. The visualization uses React state to load CSV data via `d3.csv`, then renders SVG rectangles with blue fills and yellow strokes. Scales are created with `d3.scaleBand` and `d3.scaleLinear`, while axis ticks and grid lines are generated manually using `xScale.ticks()` and SVG elements. The chart title appears above the visualization, and the y-axis labels show the year for each bar.

Aabdulmoin9624
78% match