Skip to main content
SimilarExport ZIP
100%

Line Chart of Temperature

✓ Published1🌍 Public
JJohn Jeevasaeyan
Last edited Sep 6, 2021
Created on Sep 6, 2021

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.

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
95% match
Loading thumbnail…

Line Chart of Temperature

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.

YYee Han
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 with Vega Lite Tutorial

This line chart visualizes weekly temperature data for San Francisco, plotting temperature over time as a smooth, bold line. It uses the Vega-Lite API to define the mark and encode the x-axis with timestamps and the y-axis with temperature values, while the Vega-Lite library renders the chart as an SVG. The visualization also incorporates a custom configuration for axis styling and tooltips, with data loaded via D3’s `csv` function from a remote URL.

AAriana
92% match
Loading thumbnail…

Line Chart of Temperature w/ Vega Lite API

This line chart visualizes San Francisco’s weekly temperature data using the Vega-Lite API, with timestamps on the x-axis and temperature on the y-axis. The code builds the chart by composing vega-lite-api methods, registering them with vega and vega-lite, and rendering with D3’s CSV loader for data ingestion. It configures axis styling, disables zooming on scales, and renders an interactive SVG with tooltips via vega-tooltip. A commented-out scatter plot variant is also included.

Hhunsingeruk@gmail.com
91% 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 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 temperature readings in San Francisco over a week, plotting time on the x-axis and temperature on the y-axis with a smooth curved line. The data is loaded from a remote CSV file using d3.csv, and the chart is rendered as an SVG. The code uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with the curveBasis option to generate the path. Grid lines, axis labels, and a title are styled via CSS classes.

Iianleekq
90% match