Bonus_ICE_IntBarChart

100%

Bonus_ICE_IntBarChart

✓ Published5🌍 Public

Last edited Apr 3, 2023

Created on Apr 3, 2023

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.

AI-generated description

A whole smiley face

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

80% match

Loading thumbnail…

ICE-6 Bar Graph

This example displays the average carbon emissions of cars by model year as a horizontal bar graph. It uses React hooks to load and filter CSV data from a GitHub gist, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. The chart includes custom axes via `d3.axisBottom`-style tick rendering, with red gridlines and a title above the visualization.

Llibramanju

80% match

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

80% match

Loading thumbnail…

Car Sales

This bar chart visualizes carbon emissions by car make year from 2013 to 2022, with values displayed above each bar. Hovering over a bar highlights it and displays the numeric difference from the selected year’s value. The visualization uses D3.js v5 with SVG rendering and transitions. It scales the y-axis for CO2 emissions in g/km, and incorporates `d3.scaleBand`, `d3.scaleLinear`, and axis functions for grid lines and labels.

MManideeprenikindi

79% match

Loading thumbnail…

Country and Implementation_Rank

This bar chart displays carbon emissions by car model year from 2013 to 2022, using data from a CSV file. It uses d3.scaleBand and d3.scaleLinear to map years and CO2 values, with SVG rectangles rendered from the sample array. Hovering a bar triggers a transition that highlights it, shows a dashed limit line, and displays divergence text indicating the difference from the hovered value, while d3.axisLeft and d3.axisBottom provide the axes and grid lines.

MManideeprenikindi

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

76% match

Loading thumbnail…

ICE-6

This bar chart visualizes the cost of cars by year, showing the price range for 15 selected model years from a CSV dataset. Purple horizontal bars are rendered as SVG rectangles within a React component using D3 scales (`scaleBand`, `scaleLinear`). The chart includes custom axes with blue gridlines and tick labels, with data loaded asynchronously via `d3.csv`. The visualization uses D3 v5 and React hooks (`useState`, `useEffect`) to manage state and rendering.

Ppethavenu

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

76% match