100%

Temperature Vs Energy Consumption

✓ Published0🌍 Public

Last edited Mar 14, 2024

Created on Jan 30, 2024

This example visualizes average weekly energy consumption over time using a line chart rendered with D3. The data is processed by grouping daily timestamps into weeks via `d3.rollup` and calculating the mean consumption for each week. The chart uses `d3.scaleTime` and `d3.scaleLinear` to map the date and consumption values, with axes generated by `d3.axisBottom` and `d3.axisLeft`. A line path is drawn using a `d3.line` generator, and the visualization is embedded in a responsive SVG container that adapts to its parent dimensions.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of energy consumption data in San Francisco, sourced from Data Canvas - Sense Your City, with temperature values plotted over time. The visualization uses D3 v5 to render an SVG, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with a `curveBasis` for the smooth path, and `d3.axisLeft` and `d3.axisBottom` for labeled tick marks. Data is loaded via `d3.csv` and parsed into JavaScript Date objects before rendering.

MMichared

76% match

Loading thumbnail…

Electricity Consumption

This visualization displays electricity consumption over time as a line chart. The code loads CSV data from a GitHub repository, parses the year and consumption columns, and renders a time-series line using d3.scaleTime, d3.scaleLinear, and d3.line. The chart includes axes generated with d3.axisBottom and d3.axisLeft, styled with a steelblue stroke on an SVG element embedded directly in the body.

Aamulyareddykondru01@gmail.com

75% match

Loading thumbnail…

Temperature in Seattle Plot

This line plot shows daily consumption in Seattle over the first half of 2016, with a clear weekly pattern of higher values on weekdays and dips on weekends. Built with D3 v5, the SVG visualization uses `scaleTime` for the date axis and `scaleLinear` for the consumption values, with `axisBottom` and `axisLeft` for tick marks. The line is drawn using `line` with `curveBasis` smoothing, and data is loaded from a local CSV file.

CCaleb

75% match

Loading thumbnail…

Temperature in Seattle Plot

CCaleb

75% match

Loading thumbnail…

Temperatures Line Chart - React & D3

This line chart displays weekly temperature readings over time, with each data point marked as a circle and connected by a smooth monotone curve. The chart uses React for component structure and D3 v5 utilities like `scaleTime`, `scaleLinear`, `line`, and `curveMonotoneX` for scales and path generation. Dashed reference ticks and axis labels are rendered as SVG elements. Temperature and time axes are formatted with `timeFormat` and `format`, and the data is loaded via `d3.csv` from a GitHub-hosted dataset.

Ddvinubius

72% match

Loading thumbnail…

Time

This line chart displays temperature readings over the course of a week, with individual data points marked by circles and connected by a smooth curve. The visualization uses React to render SVG elements and D3 v5 functions such as `scaleLinear`, `extent`, and `line` with a natural curve. Data is loaded from a CSV file. Hovering over a circle reveals a tooltip showing the day and temperature value.

11993-INDALKAR

72% match

Loading thumbnail…

Time analyis

This interactive line chart displays temperature readings over the course of a week, using a smooth natural curve to connect data points. The visualization uses React with D3.js version 5, specifically leveraging the d3 scaleTime and scaleLinear APIs for axis scaling, and the line and curveNatural functions from D3 to render the path. The SVG-based chart includes formatted time labels on the x-axis and temperature values on the y-axis, with data loaded from an external CSV file.

SSamuel Oseh

72% match

Loading thumbnail…

Line chart

This line chart visualizes weekly temperature readings over time, using a smooth curved path to connect data points from a CSV file. The chart is built with React and D3 v7, employing `scaleTime`, `scaleLinear`, and `line` with `curveNatural` for the smooth curve. Axes are rendered as SVG groups using custom components, with tick labels formatted via `timeFormat`. The visualization is rendered entirely in SVG, displaying time on the x-axis and temperature on the y-axis.

GGabriel

72% match