Skip to main content
SimilarExport ZIP
100%

Task-10_Q2

✓ Published0🌍 Public
UUthkarsh Reddy Junuthula
Last edited Apr 22, 2024
Created on Apr 22, 2024
Forked from Task-10_Q1

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.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Q2_task9,10

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.

Mmanisahiths54321@gmail.com
81% match
Loading thumbnail…

Fork of Accident Data ICE-7 Q2

This example shows a pie chart of accident costs from major U.S. states, with each slice colored and paired with a legend listing the state name and its corresponding cost value. The visualization loads CSV data from a GitHub gist using the `d3.csv` method, then computes the pie layout with `d3.pie` and renders the segments as SVG paths using `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and legend labels are formatted with `d3.format`. The SVG is selected and manipulated through D3 v5, with styling defined in an external stylesheet.

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

Task 9

This D3.js visualization presents a pie chart of average daily accidents per state, using data fetched from a GitHub-hosted CSV file. The chart is rendered as SVG, with each slice colored and labeled, and a legend on the right displaying state names and corresponding values. The code utilizes D3 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute the pie segments, generate arc paths, assign categorical colors, and format numeric labels. The visualization's title is styled with red, italic, and underlined text.

Kkeerthanachinthalapally@gmail.com
76% match
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
75% 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
75% match
Loading thumbnail…

Area chart - 11632790

This area chart visualizes annual cost data from 2000 to 2013. The chart uses a light teal fill with a darker teal stroke to represent the area beneath the line, making the trend in costs over time immediately apparent. The visualization is built with D3.js v6, using `d3.scaleLinear` for both axes, `d3.area` to generate the path, and `d3.extent` for domain calculation. The code includes invisible circles at each data point that reveal a tooltip with the year and cost value on hover, though the example also shows an interactive version with a CSS tooltip and smooth transitions.

Kkrunalpatel@my.unt.edu
75% match
Loading thumbnail…

ice 7 area

This visualization shows the number of accidents per year from 2000 to 2010, combining a yellow line chart with a navy filled area beneath it. The chart uses D3 v5’s `scaleLinear` for both axes, `line` and `area` generators with a `curveBasis` smoothing, and `axisBottom` and `axisLeft` for labeled axes. Data is loaded from a remote CSV file using `csv`, and the SVG rendering is done within a 930x450 canvas, with axis labels placed via rotation and translation transforms.

SSreekarveeravelly
75% match