Untitled

100%

✓ Published0🌍 Public

Last edited Sep 14, 2021

Created on Sep 13, 2021

Forked from Untitled

This visualization displays 14 days of daily cold store data, comparing tauwasser (defrost water) values against cooling and fan operation times. The chart uses grouped bar charts on a dark canvas, with grey gradient bars for tauwasser values, blue bars for fan hours, and dark blue bars for cooling hours. A horizontal black line marks the 20-liter target threshold for tauwasser. The implementation uses the HTML5 Canvas API directly, with custom JavaScript loops and helper functions to calculate bar heights and draw the visualization, including date labels and value annotations beneath each bar.

AI-generated description

Visualising 14 days of daily values. Gives a quick overview for cold store owner, how the refrigeration plant is doing. Also to see if theres a need to adjust the settings.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays 14 days of refrigeration plant data, including room temperature, defrost water, cooling and fan runtimes, and dates. It uses Canvas API functions to manually draw grouped bar charts and a line chart, with linear gradients for bar fill effects. The code employs `createLinearGradient`, `fillRect`, and `stroke` to render the composite chart.

SStrunck

83% match

Loading thumbnail…

Untitled

This interactive line chart displays temperature data in either Fahrenheit or Celsius from a CSV file, with a dropdown menu to switch between metrics. The visualization uses D3.js v5 to render SVG paths with cardinal curve smoothing, and includes a hover tooltip that reveals exact dates and values using bisector-based mouse tracking. The chart updates its y-axis domain and line paths dynamically when the metric changes, with CSS transitions providing smooth animations.

RResl411

67% 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

67% match

Loading thumbnail…

Untitled

This line chart displays one week of temperature in degrees Celsius in San Francisco, using data from Data Canvas - Sense Your City. It plots temperature against time, with timestamps parsed as JavaScript Date objects and temperature values converted to numbers. The visualization renders as an SVG using d3.v4’s selection, scaleTime, scaleLinear, axisLeft, axisBottom, line, and curveBasis functions, with axis labels and a title. The line path is styled with a maroon stroke, and the data is loaded asynchronously via d3.csv.

Jjl-tan

67% match

Loading thumbnail…

Untitled

A bar chart displays five daily temperature readings in San Francisco, ranging from 0.9 to 2.5 degrees Celsius, using blue bars of proportional height. The visualization encodes values with a linear scale and renders static SVG rectangles, with an axis generated by `d3.axisBottom`. It uses D3 v5 to bind the dataset, scale the bar widths, and append a bottom axis with four ticks. The data is a small sample from the Data Canvas - Sense Your City project, though the chart only shows these five arbitrary values without labels for dates or units.

SSpinningK

66% match

Loading thumbnail…

Untitled

This interactive area chart displays two metrics from a week of temperature data in San Francisco: average duration in milliseconds (Durchschn) and count (Anz) across time. The visualization uses two linked line charts with a brushable mini-map for zooming, rendered as SVG via D3 v4 APIs including `d3.time.scale`, `d3.svg.brush`, and `d3.svg.line`. The data is loaded from a local CSV file and parsed with `d3.csv`, with time formatted using `d3.time.format`.

Aash301

66% match

Loading thumbnail…

Working with Time

This visualization shows temperature readings taken multiple times per day over a single week, plotted as a smooth line chart with individual data points. It uses a d3.scaleTime for the x-axis and a d3.scaleLinear for temperature, with CSV data loaded via d3.csv from a remote gist. The React app renders SVG axes and marks, using d3.line with curveCardinal for the path and d3.timeFormat for weekday labels. Hovering over each circle reveals a tooltip with the date, month, and temperature in Celsius.

PPhronesis

65% match

Loading thumbnail…

Untitled

This interactive line chart displays temperature data through time, with a dropdown to switch between Fahrenheit and Celsius scales. The visualization renders multiple city temperature series as smooth cardinal curves, using D3 v5 with SVG and animated transitions. A mouse-over interaction uses a bisector to find the nearest date, displaying a vertical guide line, value labels, and colored circles for each city at the hovered position. The y-axis updates dynamically with the selected metric via a smooth transition.

RResl411

65% match