ICE-7 Area_Graph

100%

ICE-7 Area_Graph

✓ Published0🌍 Public

Last edited Mar 13, 2023

Created on Mar 13, 2023

This interactive area chart displays the number of car registrations in Austin over fiscal years. The visualization uses a layer of area, circle, and rule marks to show the trend, with mouseover interactions that highlight the nearest data point and display its value. Built with Vega-Lite API and D3.js, it loads CSV data from a remote URL and renders to an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 - Area_Graph

This interactive area chart displays car registrations in Austin, Texas from 2012 to 2021, with a red rule marking the hovered fiscal year and text labels showing exact car counts. Built using Vega-Lite API and D3.js, the visualization layers an area mark with circles, applying a single selection on x-encoding with mouseover events to highlight the nearest data point. Data is loaded asynchronously from a GitHub-hosted CSV file using D3’s csv parser, and the chart is rendered as SVG with tooltip support. The configuration customizes axis styles and label colors for readability.

Nnagarajuobbineni

95% match

Loading thumbnail…

ICE-7 Line_Graph

This line graph charts car registrations in Austin over time, using fiscal year on the x-axis and number of cars on the y-axis. It layers a line, circles, and interactive hover selectors using vega-lite-api, with a mouseover rule and text labels showing exact values. The visualization loads CSV data via d3.csv, configures axes and styling through a custom Vega-Lite config, and renders with the Vega view and vega-tooltip for enhanced interactivity.

AAbhinav-Mullapudi

90% match

Loading thumbnail…

ICE-7 Line_Graph

This line graph visualizes car registrations in Austin, Texas from 2012 to 2021, using fiscal year on the x-axis and number of cars registered on the y-axis. The chart layers a blue line with circles at each data point, and adds interactive features through vega-lite API selection and hover events, displaying rule-based crosshairs and value labels. The visualization uses d3.v5 for CSV data loading from a GitHub-hosted Austin car registration dataset, with Vega and Vega-Lite handling rendering and tooltips. Custom color and font styling are applied through a config file.

Nnagarajuobbineni

89% match

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart displays Austin car registrations by fiscal year from 2013–2021. The visualization uses d3.pie and d3.arc to generate SVG segments, with d3.scaleOrdinal assigning colors and d3.csv loaded from a GitHub Gist. Mouseover events reveal tooltips, while a legend lists each year. The chart includes ten color-coded slices, with data aggregated from the CSV’s CARS column and rendered as static, non-animated SVG paths.

AAbhinav-Mullapudi

85% match

Loading thumbnail…

ICE - 7 Pie Chart

A pie chart breaks down car registrations in Austin, Texas by fiscal year from 2012 to 2021, with each slice sized by the number of cars and a legend listing each year. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs, along with SVG paths, to render the segments and legend. Animated hover effects use `transition` to show a tooltip with the year’s registration count, driven by mouseover and mouseout events. Data is loaded asynchronously from a GitHub gist CSV via `d3.csv`.

Nnagarajuobbineni

83% match

Loading thumbnail…

ICE 7 Area chart for car sold

This area chart visualizes the number of car units sold per year, with a blue filled area beneath a curved line. The chart uses D3 v5 within a React framework, rendering as SVG. It employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and both `d3.line` and `d3.area` generators with `curveBasis` smoothing. Data is loaded from a CSV file and parsed with `d3.csv`.

SSheshidharreddy

78% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This chart visualizes car sales in Texas from 2010 to 2020, combining a smooth line for the trend and a filled area beneath it to emphasize volume. The data is loaded from a CSV file and parsed with d3.timeParse. Using d3.scaleTime and d3.scaleLinear, the code generates axes with d3.axisBottom and d3.axisLeft, while d3.line and d3.area with curveBasis produce the curved paths. The SVG rendering includes a styled area fill and a thick purple line, with gold tick labels and a bold axis label.

Aamiralitah

77% match

Loading thumbnail…

ICE-7 Area Graph

This area graph visualizes total car sales per year from 2013 to 2021, with a smooth curve (using d3.curveBasis) highlighting trends over time. The SVG rendering uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for labeled ticks, and d3.line plus d3.area generators to draw the outlined and filled regions. Data is loaded as CSV from a GitHub gist. The chart includes a purple title, green filled area, and bold blue axis labels.

Mmosesimmanuelvemana@my.unt.edu

77% match