ICE-7 Line_Graph

100%

ICE-7 Line_Graph

✓ Published1🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

96% match

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

93% match

Loading thumbnail…

ICE-7 Area_Graph

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.

AAbhinav-Mullapudi

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

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

84% match

Loading thumbnail…

Fork of ICE 7 Line Chart

This fork of the ICE 7 Line Chart visualizes car sales in Texas from September 2010 to 2020, with a focus on yearly sales trends. The chart renders an SVG line plot using d3.v5, with d3.scaleTime and d3.scaleLinear mapping the parsed date and numeric sales CSV data. d3.axisBottom and d3.axisLeft generate the axes, while d3.line constructs the path, which is styled with a custom stroke. The data is loaded asynchronously from a GitHub gist using d3.csv.

Aamiralitah

77% match

Loading thumbnail…

ICE-7 Line Chart

This chart visualizes the trend of car sales from 2004 to 2022, using a blue line to connect annual data points with the year on the x-axis and sales figures on the y-axis. The D3.js v5 code employs `scaleTime` and `scaleLinear` for axis scaling, with `axisBottom` and `axisLeft` to render tick marks and labels. The line is generated via `line()`, and the data is loaded from a CSV file in a GitHub gist. SVG output is used, with margins and labels styled via an external stylesheet.

Rrakeshkommineni

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