Skip to main content
SimilarExport ZIP
100%

ICE-7 - Area_Graph

✓ Published1🌍 Public
Nnagarajuobbineni
Last edited Jul 2, 2022
Created on Jul 2, 2022
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
95% 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
93% 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 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
86% 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…

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
81% match
Loading thumbnail…

ICE - 7 Area Chart

This area chart shows annual car sales trends from 2013 to 2023, with a green filled region beneath a black line to emphasize the overall sales trajectory. The visualization uses D3 v5 to load a CSV dataset from GitHub, parse the dates, and render the chart with a time-scaled x-axis and linear y-axis. It applies `d3.line` and `d3.area` generators with a basis curve, while axes are drawn using `d3.axisBottom` and `d3.axisLeft`. Grid lines are created via tick sizes, and axis labels are manually added with rotation for clarity.

66264kusuma@gmail.com
79% 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
78% match