Solar water flow

100%

Solar water flow

✓ Published0🌍 Public

Last edited Nov 7, 2015

Created on Nov 7, 2015

This interactive chart displays temperature variations for water flowing through a solar pool heating system over the past day, with three lines representing the return-to-pool, from-pool, and from-solar sensor readings. The visualization uses d3.svg.axis, d3.svg.line, d3.time.scale, and d3.scale.linear to render time-series data, while a d3.nest groups entries by sensor ID to draw each path with dynamically assigned colors from d3.scale.category10. Clicking legend labels toggles line visibility via d3.transition, and a crosshair with dashed lines appears on hover to inspect values. Data is fetched live from SparkFun’s data service.

AI-generated description

Graph to show variation in flow of water through a solar heating system for a pool.

Lines can be toggled by clicking on the legend and data ca be explored by using the mouse to determine point values.

Data is retrieved from sparkfun's data service (where it is updated every 10 minutes).

Similar vizzes

Loading thumbnail…

Solar Path

This chart displays the Sun’s path across the sky for the current day, based on the viewer’s geolocation, using a stereographic projection that places the horizon as an outer circle and radiating azimuth lines. A red dot marks the Sun’s present azimuth and elevation, with hourly ticks along its trajectory. The visualization uses D3 v3’s `d3.geo.projection` and `d3.geo.path` for rendering, while a custom solar calculator computes positions from NOAA equations. It updates every second and includes a geolocation prompt to determine the user’s coordinates.

Mmbostock

68% match

Loading thumbnail…

Simple Line Chart with Color Gradient

This interactive line chart visualizes daily temperature readings from a Noe Valley sensor, using a color gradient that shifts from steelblue to gray to red to encode temperature values. The chart groups data by day, with buttons allowing users to toggle between different days. Built with D3.js and moment.js, the SVG visualization relies on `d3.time.scale` for the time axis and a linearGradient element for the temperature color encoding. The data originates from the Data Canvas project and is displayed for a slice of the full time series.

KKirkHunter

67% match

Loading thumbnail…

Solar Analemmas

This visualization shows hourly solar analemmas, the figure-eight paths traced by the Sun’s position at each fixed time of day, as seen from San Francisco during 2014. The background is a stereographic projection of the celestial sphere, rendered with d3.geoCircle, d3.geoGraticule, and d3.geoPath, with compass labels and altitude ticks. Twenty-four red paths, one per hour, are computed by the solar-calculator package and projected via a custom flippedStereographic function. The SVG output uses D3 v4 selections and data joins over hourly timestamps.

Mmbostock

66% match

Loading thumbnail…

Solar System Orbits (Fork of Fork of HTML Starter)

This interactive HTML visualization presents the solar system with animated planet orbits around a central sun. Users click a planet to reveal two additional data views: a line chart showing distance from the sun versus average temperature, and a pie chart displaying atmospheric composition percentages for that planet. The orbit diagram uses SVG paths with animated motion along circular trajectories, while the charts are generated programmatically. The line charts employ D3's scaleLinear for axes and a monotone curve line, while the pie charts use the d3.pie layout algorithm with d3.arc for rendering sectors.

JJonas

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

65% match

Loading thumbnail…

Document

This interactive line chart shows the annual growth in U.S. electricity generation from Solar and Gas sources from 2012 to 2021. Users click buttons to toggle between the two datasets, triggering a transition that updates the axes and line path. Built with D3 v4, it uses `d3.line`, `d3.axisBottom`, and `d3.axisLeft` with linear scales, plus SVG transitions and a tooltip for mouseover values. Data comes from the provided `data.csv`, with hardcoded arrays in `vis.js` for each energy source.

Xxiaojingwu138

64% match

Loading thumbnail…

Inverter Temp trend

This visualization shows a week-long trend of inverter temperature readings over time, with each data point plotted as a circle on a scatter plot. The chart uses D3 v5 scales (`scaleTime` and `scaleLinear`) to map timestamps and temperature values, and React components to render the SVG axes and marks. Data is loaded asynchronously via `d3.csv` from the Sense Your City dataset, with the bottom axis displaying abbreviated day names and a tooltip showing the full timestamp on hover.

SSean

64% match

Loading thumbnail…

RSSB | Initial [Backup]

This example presents an interactive solar system visualization where clicking a planet reveals its atmospheric composition as a pie chart and a line chart plotting average temperature against distance from the Sun. The main SVG scene uses animated circles along predefined orbital paths to represent planetary motion, with the `showDiagram` function toggling the visibility of the corresponding D3-generated charts and updating the page title. Pie charts are built using `d3.pie` and `d3.arc`, while line charts employ `d3.line` and `d3.scaleLinear` with axis labels, all rendered as SVGs with d3.v6.

RRSSBDAE

64% match