Skip to main content
SimilarExport ZIP
100%

ICE-7 (Part-4) - Area Chart

✓ Published2🌍 Public
Ppavankrishna441@gmail.com
Last edited Mar 27, 2024
Created on Mar 27, 2024
Forked from ICE-7 (Part-1)

This interactive area chart displays temperature readings for various cities, with each city’s temperature value encoded as the height of a filled region. The SVG visualization includes rotated city labels on the x-axis and a labeled y-axis for temperature in degrees Celsius. The code fetches weather data from a remote CSV file, parses it with `d3.csvParse`, and uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative variables. Areas are drawn using the `d3.area` generator, while axes are rendered via `d3.axisBottom` and `d3.axisLeft`. The chart is styled with a color ordinal scale and a clear gridless presentation.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-7)

Part-1 REUSABLE SCATTER PLOT

  • Pavan Krishna Yarlagadda (11600263)
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 (Part-4) - Area Chart

This area chart visualizes city and temperature data from a CSV file fetched at runtime. It uses D3.js version 7 to parse the weather dataset, scale bands for the x-axis, and linear scaling for temperature values on the y-axis. The `d3.area()` generator draws the filled path, while `d3.axisBottom` and `d3.axisLeft` render rotated city labels and measurement ticks. The SVG output includes custom margin-based layout and ordinal color encoding.

RRohithNaiduDevareddy@my.unt.edu
90% match
Loading thumbnail…

ICE-7 (Part-3) - Line Chart

This line chart displays temperature variations across different cities, with each city on the x-axis and temperature values on the y-axis. The visualization uses D3.js v7 to fetch and parse a CSV file from a GitHub gist, then renders an SVG line chart with rotated x-axis labels and a y-axis labeled "Temperature (°C)". The chart applies a linear scale for temperature and a band scale for cities, with a smooth line connecting data points using the d3.line() API. The chart includes a drop shadow and rounded corners, making the visualization visually appealing.

Ppavankrishna441@gmail.com
88% match
Loading thumbnail…

ICE 7 Area chart

This area chart displays daily temperature readings over a one-week period in April 2024, with a steel-blue filled region beneath the line emphasizing the values. The visualization uses D3 v6 with an SVG rendering approach, employing `d3.area()` to generate the filled path, `d3.scaleTime()` for the date axis, and `d3.scaleLinear()` for the temperature axis. The chart includes rotated x-axis labels and axis titles for Date and Temperature (°C), with the area set to 50% opacity. Sample data is embedded directly in the script.

UUday Kiran
86% match
Loading thumbnail…

ICE 7 Area chart

This area chart visualizes daily temperature readings for seven days in April 2024, using filled steelblue regions to emphasize the magnitude of values over time. The chart is rendered as SVG using d3.v6, with d3.scaleTime for the date axis and d3.scaleLinear for the temperature axis. The area path is generated with d3.area, connecting points with y0 set to the baseline. Both axes are labeled, with rotated date ticks for readability, and temperature values are shown in degrees Celsius.

UUday Kiran
86% match
Loading thumbnail…

Question4_Ice7

This visualization shows temperature trends over time for multiple cities using overlapping area charts. Each city’s temperature series is rendered as a filled, semi-transparent region with a colored stroke, and a legend identifies each city. The chart loads CSV data from a GitHub gist, converts dates to JavaScript Date objects, and draws the areas with `d3.area()` using a monotone curve, with scales set by `d3.scaleTime()` and `d3.scaleLinear()`. Axes are added via `d3.axisBottom()` and `d3.axisLeft()`, and colors come from `d3.schemeTableau10`.

SSaiSriSuryaBandaru@my.unt.edu
86% match
Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes daily temperatures over the past week, combining a smooth line and an orange filled area beneath it to highlight trends. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, with `area` and `line` generators employing `curveBasis` for smoothing. The SVG renders temperature data parsed from a CSV file, with a black line and shaded region, while custom axis labels and gridlines are styled via CSS.

RReyden Harris
85% match
Loading thumbnail…

ICE-7 (Part-1)

This reusable scatter plot visualizes the relationship between temperature and humidity from weather data loaded via a CSV file. It uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render an SVG chart with steelblue circles that turn orange on hover. Axis labels are appended directly to the tick groups, and margins define the plot area within a 600x400 pixel container styled by external CSS.

Ppavankrishna441@gmail.com
84% match
Loading thumbnail…

ICE-7 (Part-2) - Pie Chart

This pie chart displays the distribution of city temperatures across three categories: low (<20°C), medium (20-30°C), and high (>30°C). The code loads CSV data from a remote GitHub gist using `d3.csvParse`, then uses `d3.pie()` and `d3.arc()` to generate SVG paths. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to segments, while labels and a legend are added via D3 selections. The visualization is rendered entirely in SVG with D3 v7.

Ppavankrishna441@gmail.com
84% match