Fork of KR_DV_ICE_7_4

Last edited Mar 11, 2023

Created on Mar 11, 2023

This fork of KR_DV_ICE_7_4 displays a filled area chart of Denton temperatures over a ten-day period in late December 2022. The visualization uses an SVG canvas and D3 v5 APIs including `d3.scaleTime` for the date-based x-axis, `d3.scaleLinear` for the temperature y-axis, and `d3.area` with a basis curve to render the maroon filled region. Axis labels and a title are added via SVG text elements. Data is loaded from a remote CSV file containing daily weather observations.

AI-generated description

MIT Licensed

Similar vizzes

KR_DV_ICE_7_3

A line chart displays Denton temperature readings from December 21 to December 30, 2022, with dates on the x-axis and temperatures on the y-axis. Built with d3.v5, the visualization uses `scaleTime` and `scaleLinear` to map data, `axisBottom` and `axisLeft` for labeled ticks, and a `line` generator with `curveBasis` for the smoothed red path. The CSV data is loaded from a GitHub gist and rendered as SVG, with axis labels and a title.

86% match

KR - DV - ICE-6

This example displays a horizontal bar chart of daily high temperatures for Denton city from December 21, 2022, to January 4, 2023, using data loaded from a CSV file hosted on GitHub Gist. The chart uses React with hooks (`useState`, `useEffect`) to fetch and parse the data, while D3 v5’s `scaleBand` and `scaleLinear` define the ordinal date axis and linear temperature axis. SVG rectangles render the bars, and custom axes with tick lines and labels are drawn manually. The visualization also includes rotated axis titles for "Date" and "Temperature (°C)".

83% match

Ssharathchandrareddymuthyam

Fork of HTML Starter

A dark-themed area chart displays 150 days of temperature data for Denton, Texas, using a Date x-axis and Temperature (°F) y-axis. The visualization uses a linear gradient fill beneath a blue monotone curve to show temperature trends over time. Built with D3 v7, the code loads a CSV via `d3.csv()` with `d3.autoType`, parses dates with `d3.utcParse`, and projects scales using `d3.scaleUtc()` and `d3.scaleLinear()`. The area and line shapes are generated with `d3.area()` and `d3.line()`, both using `d3.curveMonotoneX`, and rendered as SVG with a responsive `viewBox`.

82% match

KR_DV_ICE_7_2

A pie chart visualizes daily average temperatures in Denton from December 21 to 30, 2022, with each slice representing one day’s temperature. The chart uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, with `scaleOrdinal` mapping temperatures to distinct colors. A legend lists dates alongside their corresponding temperatures, while SVG text labels display each slice’s value in Celsius. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization is rendered entirely with SVG elements in a React-based setup.

81% match

Ssharathchandrareddymuthyam

Fork of HTML Starter

This dark-themed line chart visualizes daily temperature readings in Denton, Texas over 150 days, with dates on the x-axis and degrees Fahrenheit on the y-axis. Data is loaded from a remote CSV file using `d3.csv` with `d3.autoType`, parsed via `d3.utcParse`, and rendered as an SVG path using `d3.line` with `curveMonotoneX` smoothing. The chart includes labeled axes, a background grid generated by `d3.axisLeft`, and a blue monotone curve, all styled with a custom dark color scheme.

KR - DV - ICE5

This example displays a summary of Denton weather data from December 2022 to February 2023, presenting descriptive statistics for attributes such as temperature, humidity, precipitation, and wind speed. The page uses D3.js (v7) to load a CSV file via `d3.csv`, convert string values to numbers, and compute minimum, maximum, mean, median, and standard deviation for each attribute using `d3.min`, `d3.max`, `d3.mean`, `d3.median`, and `d3.deviation`. Results populate an HTML table alongside a text summary, with a weather-themed background image applied through CSS.

Fork of KR - DV -

This example summarizes a weather dataset for Denton, Texas, covering December 2022 to February 2023. It displays the dataset’s size, row/column counts, and a summary table of minimum, maximum, mean, median, and standard deviation for nine key weather attributes. The code uses D3 v7’s `d3.csv` to load data, then `d3.min`, `d3.max`, `d3.mean`, `d3.median`, and `d3.deviation` to compute statistics, populating HTML table cells via `document.getElementById`. A CSS background image and styled table present the results.

SSheela2930

RRohithNaiduDevareddy@my.unt.edu

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.