ice7-area chart

ice7-linechart

This visualization shows the average maximum temperature in Seattle from 2012 to 2015, with a single line connecting yearly data points and value labels above each dot. The chart aggregates daily temperature records from a CSV file, calculating yearly means and plotting them against a linear year scale. Built with React and D3 v7, it uses `d3.rollup` for data aggregation, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` for rendering, with the SVG output filling the browser window.

93% match

Temperature in Seattle Plot

This area chart displays Seattle’s daily consumption from January through June 2016, with a green filled curve over a time-based x-axis and a linear y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` APIs to render an SVG path from the data.csv file. Axes include rotated labels and tick marks, while the title and axis titles are styled via CSS.

CCaleb

82% match

ICE6-Visualizations

This visualization presents three interactive weather charts for Seattle, displaying weekly maximum temperatures across the first 100 days, a scatter plot of temperature versus wind speed, and a combined line chart of daily temperature ranges with precipitation bars. Built with React and D3 v5, the example uses `scaleBand`, `scaleLinear`, and `line` with `curveMonotoneX` to render SVG elements from CSV data. The code processes the weather dataset into weekly aggregates and daily records, with responsive axes, gridlines, and labeled scales.

81% match

ICE7-SCATTERPLOT

This scatterplot visualizes Seattle weather data, plotting daily maximum temperature against precipitation and encoding weather type by color. Built with D3 v7 and React, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for labeled scales. The SVG renders circles with fixed radius and opacity, includes a weather legend, and loads data from a CSV file.

ICE7-PIECHART

This visualization shows the distribution of weather conditions in Seattle across a multi-year period, displaying the count of each weather type as pie slices with a legend annotating each category's total days. Built with React and D3 v7, it loads the CSV dataset via `d3.csv`, and the `pieChart` function uses D3's `pie`, `arc`, `scaleOrdinal`, `schemeTableau10`, and `rollup` APIs to aggregate counts, render SVG paths, and generate colored slices with labels. The chart is rendered as an SVG canvas sized to the browser window.

line chart

This line chart visualizes Seattle weather trends in 2016, showing maximum, mean, and minimum temperatures over the first 200 days using three colored lines. The chart combines a multi-series line graph with overlaid bars representing the mean temperature. Built with D3 v7, the code loads CSV data and uses `d3.line()`, `d3.scaleLinear()`, and `d3.axisBottom()` to render the SVG visualization, including axes, labels, and a legend for temperature series.

PP Manisha

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