Line Chart of Temperature

100%

Line Chart of Temperature

✓ Published1🌍 Public

Last edited Dec 22, 2020

Created on Dec 22, 2020

This line chart visualizes weekly temperature data for San Francisco, showing the trend of temperature values over time. The chart uses a single line mark with a fixed size and opacity, encoding time on the x-axis and quantitative temperature on the y-axis, both with zero scale suppression. Built with the Vega-Lite API, the visualization leverages D3’s `csv` function to load data from a GitHub gist and renders interactively with tooltips via `vega-tooltip`. The appearance is customized through a config object that removes axis domains and adjusts font colors and sizes for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart of Temperature

This line chart displays the daily temperature variation over a week in San Francisco, using a single line to trace the temperature trend over time. The visualization is built with the Vega-Lite API, which handles the mark encoding through `vl.markLine` and the x-axis as temporal data, while the y-axis encodes the temperature values. Data is fetched from a CSV file via `d3.csv` and rendered as an SVG using the Vega renderer, with a custom tooltip from `vega-tooltip` for interactive inspection of temperature values. The chart automatically fits the viewport size, and the `config.js` file adjusts axis and label styling for improved readability.

MMonish Vassantrai

96% match

Loading thumbnail…

Line Chart of Temperature

This line chart visualizes daily temperature readings from San Francisco over the course of a week, using the vega-lite-api library to construct a single smooth line with a semi-transparent stroke. The x-axis maps timestamps while the y-axis encodes temperature values, with tooltips exposing the exact temperature on hover. Data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered by vega-lite, which compiles the specification into a vega view with an SVG output. Custom axis styling and font sizes are configured through a separate config object, and the visualization automatically fits the full window size.

JJohn Jeevasaeyan

95% match

Loading thumbnail…

Temperature Line Chart

This line chart displays weekly temperature readings from San Francisco, sourced from the UCI Machine Learning Repository via a raw CSV file. The visualization uses vega-lite-api to generate a single semi-transparent line, with the x-axis mapped to timestamp and the y-axis to temperature, both with scales that omit zero. The code calls vl.markLine() and vl.encode() to build the chart, while d3.csv fetches the data. Custom axis styling and a 30px title font improve readability.

JjohnmurphyLC

92% match

Loading thumbnail…

Line Chart:Temperature in San Francisco

This line chart displays temperature variations in San Francisco over the course of a week, using a smooth curved line to connect data points. The visualization plots timestamps on the x-axis and temperature values on the y-axis, with labeled axes and a title. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to render the SVG path. Data comes from the Data Canvas - Sense Your City dataset, loaded via `d3.csv` and transformed for display.

NNita

92% match

Loading thumbnail…

Line chart

This line chart shows the daily temperature in San Francisco over a week, with the date on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using D3 v5, employing scaleTime and scaleLinear for the axes, and a curveBasis line generator for a smooth path. Data is loaded from a CSV file via d3.csv.

Sszy1900

91% match

Loading thumbnail…

Line Chart

This line chart visualizes a week of temperature data in San Francisco, plotting temperature against time with a smooth curved line and semi-transparent circular markers for each data point. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the smooth path, and `axisBottom` and `axisLeft` for labeled, grid-lined scales. Data is loaded as CSV from a remote dataset and parsed into numeric and date formats before rendering.

Vvic126

91% match

Loading thumbnail…

Line Chart

This line chart displays the temperature in San Francisco over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization uses the D3 v5 library to create a smooth, curved line through the data points, which are not individually marked. It loads data from a CSV file and renders the chart as an SVG, with styled axes, gridlines, and a title. The code employs D3 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the smoothed path.

ZZ-Richard

91% match

Loading thumbnail…

Line chart

This line chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses SVG rendering with D3 v5, employing scales like `scaleTime` and `scaleLinear`, along with `axisBottom` and `axisLeft` for the axes. The line is drawn using D3’s `line` generator with a basis curve to smooth the path. Data comes from a CSV file loaded via `csv`, and the chart includes labeled axes and a title.

Jjsong

91% match