Rain,Temp

100%

✓ Published0🌍 Public

Last edited Jul 14, 2015

Created on Jul 14, 2015

This visualization shows daily weather patterns at a Portland, Oregon station for August–September 1973. A line chart plots temperature in degrees Fahrenheit across the date range, with TMAX and TMIN shown as upper and lower bounds of a blue shaded area, while the TOBS (observed temperature) line is traced in orange. Precipitation values from the PRCP column are encoded as vertical light-blue bars along the bottom of the chart, using the left axis. The chart uses SVG rendering in D3.v3, with dates along the x-axis, temperature on the y-axis, and color/height to distinguish between rain and temperature ranges.

AI-generated description

Similar vizzes

Loading thumbnail…

Rainfall

This visualization shows monthly effective rainfall measurements over time as a histogram of steelblue bars. The chart maps dates on a time-scaled x-axis and rainfall values on a linear y-axis, using D3 v5’s `scaleTime`, `scaleLinear`, and `axisBottom`/`axisRight` APIs. SVG rectangles are bound to data from a CSV dataset, with each bar’s height determined by the `EffectiveRainfall` value. The code loads the external CSV via `d3.csv` and parses dates with `timeParse` before rendering.

SShane Carey

70% match

Loading thumbnail…

Visualization

This visualization displays a 3-day weather forecast using an animated bar chart built with D3.js. It encodes temperature values as bar heights, with a color scale ranging from white to blue to red to indicate temperature intensity. The data is loaded from a local JSON file. Bars animate upward with a bounce effect upon rendering. Interactive tooltips appear on mouseover to show the precise temperature, and hovering highlights a bar in yellow. The chart includes a time-based x-axis and linear y-axis.

Aajoua

69% match

Loading thumbnail…

color via clipping

This line chart shows daily temperature readings from a TSV dataset spanning October 2011 to September 2012. The visualization uses clipping to split the temperature curve at the 55°F threshold, coloring the portion of the line above this value in red and the portion below in black. The code applies `d3.svg.line` with basis interpolation and two `clipPath` rectangles, each assigned to one of two line paths via the `clip-path` attribute. D3’s time and linear scales map dates and temperatures, while SVG axes display the temporal and temperature scales.

深深度碎片

69% match

Loading thumbnail…

summer-heat

The chart displays monthly average temperatures from 1881 to 2017, with each month’s data points laid out vertically and color-coded by year. It uses `d3.nestBy` to group data by month and `d3.line` to draw rolling average paths, while `ss.linearRegression` adds trend lines for each month. Circles representing individual years are rendered with SVG, and hovering highlights all data for that year via `d3.attachTooltip`. The visualization reveals warming trends across most months, with the steepest increases in winter and spring.

11wheel

68% match

Loading thumbnail…

Temperatures of Cities

This visualization displays temperature measurements from cities around the world over a one-week period. Multicolored line paths represent each city's temperature fluctuation over time, with a color legend positioned at the right identifying each city. The chart includes gridlines and labeled time and temperature axes. Built with React and D3 v6, the example uses `scaleTime` and `scaleLinear` for scaling, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeCategory10` for colors. Data originates from a CSV file loaded via `csv()`, and the SVG rendering employs the declarative selection API.

MMatthew Rubino

68% match

Loading thumbnail…

Temp Line Chart (Min & Max Points)

This chart displays temperature fluctuations over time for San Francisco using hourly data from a CSV file. A smooth curve, generated with d3.line and curveNatural, connects daily temperature points, while red and blue highlighted circles mark the maximum and minimum values with callout labels. The visualization is built with React and D3 v7, using SVG rendering with dynamic scales (scaleTime and scaleLinear). Data is loaded via d3.csv, and the implementation includes custom axis components and temperature annotations formatted with the d3.format function.

RRichardPearce60

67% match

Loading thumbnail…

Period Chart

This line chart displays weekly temperature readings from the Data Canvas Sense Your City dataset. The visualization uses D3 scales to map timestamps to the x-axis and temperature values to the y-axis, with a smooth natural curve connecting data points. React components render SVG axes and marks, while D3’s CSV loader fetches the data. The chart includes labeled axes for time and temperature, styled with Poppins font and muted colors for a clean, minimal presentation.

PPurshotam Bohra

67% match

Loading thumbnail…

City Temperatures - Line Chart

This line chart visualizes weekly temperature fluctuations for a city, using a smooth natural curve to connect data points across time. The SVG rendering, built with React and D3 v5, employs `scaleTime` and `scaleLinear` to map timestamps and temperature values, with individual temperature readings highlighted as orange circles. The chart includes labeled axes for time and temperature, and the data is loaded from a CSV file using D3’s `csv` parser. D3’s `line` generator with `curveNatural` creates the fluid path, while custom `AxisBottom` and `AxisLeft` components render the tick marks and labels.

Jjulesgentry

67% match