Tstat

100%

✓ Published0🌍 Public

Last edited Sep 9, 2017

Created on Sep 4, 2017

This visualization plots temperature over time for several sensor locations in a heating system, using red, green, and gray lines to distinguish normal, limit, and full trajectory segments. It shows how temperatures rise linearly from different starting points, with the Tstat element reaching a fixed target range while others continue past it. The implementation uses D3 v4 with SVG rendering, d3.scaleLinear for axes and positioning, d3.axisBottom/Left for gridlines, and animation triggered by buttons. Data is embedded as an array of objects with slope, start, and threshold values.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

tstat2

This interactive D3.js visualization simulates the behavior of temperature-limited blocks over a 1,500-second run. It displays two sets of rectangular blocks, each with a color gradient based on temperature values, alongside axes for temperature and position. When the user clicks the "Run" button, the blocks transition from an initial dataset to a second dataset, smoothly animating their colors and positions over ten seconds. The visualization uses d3.scaleLinear for axes and color mapping, d3.interpolateWarm for the color palette, and d3.transition with an easeLinear timing function to animate changes. A timer text element simultaneously counts up from 1 to 1,500 using a tween.

SS-trunk

82% match

Loading thumbnail…

Stylised Line Chart

This stylised line chart visualizes temperature over time, using a smoothed natural curve to connect data points. The visualization employs React with D3 v5 to manage scales and axes, specifically using `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The chart renders as an SVG with a Poppins font, drawing both axis ticks and the line path via D3's `line` and `curveNatural` functions. Temperature data is loaded from an external CSV file, and the chart highlights the trend with a bold teal stroke.

MMark Simpson

73% match

Loading thumbnail…

Temperature Plot

This visualization displays temperature readings over time, with each data point represented as a semi-transparent circle plotted along a time-scaled x-axis and a linear temperature y-axis. The chart includes labeled axes, gridlines, and a title, showing how temperatures fluctuate across several days. Using D3 v6 within a React framework, the code loads CSV data via the `csv` method, parses the timestamp and numeric temperature values, and renders the SVG using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the visual.

Bbrett@cloudaccelerator.co

72% match

Loading thumbnail…

Time Series

This time series visualization plots temperature against time using a smooth, curved path generated with d3.line and curveNatural. The chart loads CSV data from a GitHub gist, mapping timestamps to a time scale and temperatures to a linear scale. React manages the component state, while custom AxisBottom and AxisLeft components render tick marks and labels. The SVG rendering highlights the natural curve of daily temperature fluctuations, with a restrained aesthetic using muted axis text and a teal stroke.

Jjanneprice

72% 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.

深深度碎片

72% match

Loading thumbnail…

Stylized Line Chart

This interactive line chart visualizes temperature readings over time, drawn as a smooth, natural curve against labeled time and temperature axes. The visualization uses the Data Canvas Sense Your City sensor dataset, rendered with React and D3 v5 SVG elements, including `scaleTime`, `scaleLinear`, `line`, and `curveNatural`. Styled with the Poppins font, the chart displays teal axes, tick marks, and a four-pixel-wide stroke, with axis labels rotated for readability.

Bblkhar

72% match

Loading thumbnail…

Line Chart

This example visualizes temperature over time with a line chart. The SVG rendering plots a line and points connecting daily temperature readings, with axes and tick labels generated from the data. Built with React and D3 v5, it uses `scaleLinear` for scaling, `line` from D3 for the path, and `timeFormat` for tick labels. The data is loaded as CSV from a remote URL using D3's `csv` utility, and React state manages the asynchronous data fetching.

Uuplusv

72% match

Loading thumbnail…

Threshold Encoding

This line chart displays daily temperature readings over a year, changing color from black to red as the value crosses a 50-degree threshold. A linear gradient with two stops at the same offset creates the hard color break. The visualization uses the D3.js v3 API, including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`, with data loaded from a TSV file. The SVG rendering applies the gradient to the line path.

Mmbostock

72% match