Q2_task9,10

100%

✓ Published0🌍 Public

Last edited Apr 22, 2024

Created on Apr 22, 2024

This area chart from Msahith123 visualizes yearly cost data from a CSV file. The blue-green filled path, generated with `d3.area()`, shows a clear trend across years, reaching its peak in 2007. Interactive invisible circles, rendered with D3’s data join, trigger a lightsteelblue tooltip on mouseover to display the year and cost. The visualization uses linear scales for both axes, with SVG rendering and D3 v6. An accompanying README notes the design is responsive, though the version here uses fixed dimensions.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Q2 Area chart

This area chart visualizes annual cost data from 2000 to 2013, showing a fluctuating trend with a notable peak in 2007. The chart uses an SVG path generated by `d3.area()` with a linear scale for both axes, and includes interactive tooltips that display year and cost values. Data comes from a CSV file, and the visualization employs `d3.axisBottom` and `d3.axisLeft` for axis rendering, with invisible circles for hover detection. The design features a teal-filled area with a darker stroke, offering a clear view of cost variations over time.

Ssannihitha.k23@gmail.com

88% match

Loading thumbnail…

TAsk 9 & 10 - Area Chart

This area chart displays yearly cost data from 2000 to 2013, with the filled area representing cost values over time. The visualization uses D3 v6 with SVG rendering, employing d3.area() to create the shaded region and d3.scaleLinear() for both axes. Interactive tooltips appear on hover through invisible circles over each data point, showing the exact year and cost. The chart includes axis labels for "Year" and "Cost", with a light teal fill and darker stroke for the area path.

PPothuguntla Pranitha

86% match

Loading thumbnail…

Area_chart

This area chart visualizes the rising cost of a project from 2014 to 2024, using a filled path with a light green fill and darker stroke to emphasize the upward trend. The chart, built with D3 v6, maps years on the x-axis and costs on the y-axis, rendered as an SVG with axes, labels, and interactive features. Hovering over the data points reveals a tooltip displaying the exact year and cost, implemented via D3 selections and event listeners. The static dataset is embedded directly in the code.

SSree Yuktha Sunkara

82% match

Loading thumbnail…

area chart

An animated SVG area chart depicts yearly cost data from a CSV file, loading via D3's `d3.csv` fetch and rendering with an SVG `path`. The chart maps time-based `year` values on a time scale and `cost` on a linear scale, using `d3.area` to generate the filled region. Interactive red circles, added via `svg.selectAll('dot').data(data).enter()`, display a tooltip on mouseover with the year and cost, while the tooltip div transitions its opacity using D3's `.transition()`.

Ssannihitha.k23@gmail.com

82% match

Loading thumbnail…

Activity 8_Task-4

This area chart shows the cost of sales from 2000 to 2013, with a smooth curve and a light green filled region beneath the line. The visualization uses D3 v5’s `area()` and `line()` generators with `curveBasis` to create the path, while `scaleTime` and `scaleLinear` map the year and cost values. Axes are rendered via `axisBottom` and `axisLeft`, with tick formatting using `format('.3s')`. Data is loaded from a CSV file using `csv()`, and the SVG is positioned within a fixed 920x400 viewport.

Ssaipaidipalli

82% match

Loading thumbnail…

Activity 8_task 4

This area chart visualization displays the cost of sales from 2000 to 2013 using D3.js v5, rendering SVG elements. It employs d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.area with d3.curveBasis to create a smooth, filled area beneath a line chart. The data is loaded from a CSV hosted on GitHub, with year values parsed as dates and costs converted to numbers. Axis labels are styled with orange bold text, and gridlines use a light gray color, while the area fill appears light green against a black stroke.

Mmandadi1999

81% match

Loading thumbnail…

Task-10_Q2

This area chart displays total accident costs per year from an internal CSV dataset. Using D3.js v6, it loads the data with `d3.csv`, aggregates yearly sums via `d3.rollup`, and maps dates with `d3.scaleTime` plus a linear scale for cost values. The visualization renders as an SVG path filled with a light teal color, with labeled axes for accident year and total costs in USD.

UUthkarsh Reddy Junuthula

81% match

Loading thumbnail…

Activity 8_task 4

This area chart displays the cost of sales from 2000 to 2013, with the x-axis representing years and the y-axis showing cost values. The visualization uses D3 v5 to create a smooth curved line and filled area beneath it, employing `d3.line`, `d3.area`, and `curveBasis` for the path generation. The chart includes labeled axes with tick marks, and the data is loaded from a CSV file hosted on GitHub. The SVG rendering uses `scaleTime` and `scaleLinear` to map data points to coordinates.

KKeerthiAnnem

81% match