Fork of activity 7.2

100%

Fork of activity 7.2

✓ Published0🌍 Public

Last edited Apr 6, 2025

Created on Apr 6, 2025

This example shows an annual house price index from 2000 to 2010, highlighting a sharp rise in prices through 2006 followed by a decline. A blue-to-cyan linear gradient fills the area under the line, created with `d3.area()`. The visualization uses `d3.scalePoint()` for the year axis and `d3.scaleLinear()` for the price axis, with axes generated by `d3.axisBottom()` and `d3.axisLeft()`. The SVG chart is rendered with D3 v7.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of task-9(2)

This area chart displays house prices across three locations—Rural, Urban, and Suburban—with a steelblue filled path and labeled values. Built with D3 v7, it uses `d3.area()` to generate the path, `scaleBand` for the x-axis, and `scaleLinear` for the y-axis. The SVG includes axes via `axisBottom` and `axisLeft`, with prices formatted as dollar amounts. A title annotation appears at the top, and the static dataset is hardcoded in the script.

DDivyaKota2@my.unt.edu

78% match

Loading thumbnail…

Fork of Area Chart Activity 8

A fork of an area chart example, this visualization displays the cost of sales from 2000 to 2013 using D3 version 5. The SVG rendering uses `d3.area` and `d3.line` with a basis curve to create a smoothed area chart, with axes labeled using `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file containing monthly website visitors, with the year parsed as a date and cost as a number. The chart employs red tick text, orange axis labels, and a light green fill for the area.

CChaitanya Ratan Sree

77% match

Loading thumbnail…

ICE-7

This visualization shows the change in house prices over time, plotting yearly data points connected by a line to reveal the overall price trend. Using D3 v5, the code imports specific modules like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart. Data is loaded from an external CSV file, with cost values converted to numbers and years to JavaScript Date objects. The SVG output includes labeled axes with gridlines, a rotated y-axis label, and a bold title, all styled through external CSS.

KKovvuri Supraj

77% match

Loading thumbnail…

Fork of Fork of Area Chart Activity 8

This D3.js area chart visualizes the cost of sales from 2000 to 2013, with the x-axis representing the year and the y-axis representing the cost value. The chart combines a black smoothed line and a light green filled area beneath it, using the `areaGenerator` and `lineGenerator` with `curveBasis` to create curved paths. Data is loaded from a CSV file via `d3.csv`, parsed with `new Date()` for the year, and rendered as SVG. The visualization uses `scaleLinear` and `scaleTime` for axes, with `axisBottom` and `axisLeft` for tick marks, and includes custom styling from an external stylesheet.

Rrushithareddyy

76% match

Loading thumbnail…

Fork of Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013 using a smooth basis-curved line and a light green filled region beneath it. The SVG rendering leverages d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft providing tick marks, while d3.line and d3.area generators with curveBasis create the path. Data is loaded via d3.csv from a GitHub gist, parsed into dates and numeric costs, and styled with custom CSS for colored axis labels and ticks.

Rrushithareddyy

76% match

Loading thumbnail…

ICE-7-Assignmnet-7- Area Chart

This example uses an area chart to display the average US housing price from 2010 to 2022, with values rising from $220,000 to $460,000. The visualization is rendered as an SVG in D3 v6, using the `d3.area` generator with a monotone X curve to create the filled region and `d3.axisBottom` and `d3.axisLeft` for the axes. The code uses hardcoded sample data, and labels the axes "Year" and "Average Price ($)" with steelblue dots marking each data point.

Ssowmyakancharla01@gmail.com

76% match

Loading thumbnail…

Fork of Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, using a smooth curved line and a light green filled region beneath it to emphasize the trend. The visualization encodes yearly dates on a time-scaled x-axis and cost values on a linear y-axis, with red tick labels and orange axis labels. It loads CSV data from a GitHub gist and renders SVG paths using D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` interpolation. The chart includes gridlines via tick marks and axis labels positioned within an SVG canvas.

BBhavanaGIrni

75% match

Loading thumbnail…

Fork of Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013 using a smooth, curved line and a light green filled region beneath it. The visualization employs d3.csv to load external data, with d3.scaleTime and d3.scaleLinear mapping years and cost values, while d3.line and d3.area generators with curveBasis create the smoothed path. Axes are rendered using d3.axisBottom and d3.axisLeft, with rotated axis labels and custom tick formatting applied.

Rrushithareddyy

75% match