Temperature in Different Cities

100%

Temperature in Different Cities

✓ Published5🌍 Public

Last edited Jul 1, 2019

Created on Jun 24, 2019

Forked from Moon Calendar 2024

This visualization displays one week of hourly temperature readings from seven cities as a small multiples area chart, with each city in its own row. The example intentionally demonstrates ineffective data-encoding choices: color carries no meaningful information, the area under each curve has no interpretable value, and comparing trends across rows is visually difficult. The chart is built using Vega-Lite specifications rendered via vega-embed, with D3 v4 handling data loading and responsive window resizing. The dataset originates from the now-defunct Sense Your City project.

AI-generated description

Small multiples area chart for one week in 2015.

This is an example of how not to visualize data:

Color is meaningless
Area under the curve is meaningless
It's difficult to compare across area charts

Draws from

News Source by Age Grouped Bar Chart for Vega-Lite setup.
Vega-Lite: Trellis Area Example

Data: a week of rich sensor data collected by the "Sense Your City" project.

Contains:

Hourly readings for one week
Different cities: San Francisco, Bangalore, Boston, Geneva, Rio de Janeiro, Shanghai, Singapore
Various mertics from sensors: temperature, light, air quality, sound, humidity, dust

The data was collected from the (now defunct) Data Canvas - Sense Your City Project. The data was filtered using the data processing script found in GitHub: curran/data/senseYourCity.

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature in Different Cities

This visualization presents a small multiples area chart tracking temperature readings across seven cities over one week in 2015, using data from the Sense Your City project. The design intentionally demonstrates an ineffective approach to data visualization: color encoding is arbitrary, the area under each curve holds no quantitative meaning, and comparing values across the separate faceted charts proves difficult. Built with Vega-Lite 2.0 and D3 v4, the code constructs the specification programmatically, loading CSV data via `d3.csv` and rendering the output through `vegaEmbed`. Each city occupies its own row, with temporal timestamps on the x-axis and temperature in degrees Celsius on the y-axis, while grid lines are disabled to simplify the display.

AAjayyy

95% match

Loading thumbnail…

Temperature in Different Cities

Small multiples of area charts show hourly temperature readings for one week across seven cities, using Vega-Lite’s `row` facet with a nominal color encoding that is intentionally meaningless. The visualization embeds Vega-Lite 2.0 and d3.v4, with a Vega spec generated dynamically from CSV data of the Sense Your City project. It highlights how color and area under the curve fail to support comparison, as the charts are difficult to read against each other, and resizes responsively via `window.addEventListener('resize', render)`.

Ssleyus

94% match

Loading thumbnail…

Temperature in Different Cities

This example shows hourly temperature readings for seven cities over one week in 2015, with each city drawn as a distinct colored line in a single chart. The visualization uses Vega-Lite to generate the line chart from CSV data, which is loaded via d3.csv, and re-renders responsively on window resize using vegaEmbed. The data comes from the now-defunct Sense Your City project, filtered to include temperature, light, air quality, sound, humidity, and dust metrics, though only temperature is displayed here. The mark type is line with a stroke width of five, and lines use multiply blending to handle overlaps.

CCurran Kelleher

92% match

Loading thumbnail…

Temperature in Different Cities

This visualization shows temperature readings across seven cities—San Francisco, Bangalore, Boston, Geneva, Rio de Janeiro, Shanghai, and Singapore—for one week in 2015, using small multiples area charts arranged in a vertical facet by city. The example deliberately demonstrates poor visualization choices: color carries no meaning, and comparing values across the separate charts is difficult. Built with Vega-Lite embedded via vega-embed, the chart encodes time on the x-axis and temperature on the y-axis, with the `row` channel grouping by city. Data comes from the Sense Your City project, processed from sensor readings and loaded with d3.csv.

CCurran Kelleher

90% match

Loading thumbnail…

Fork of Temperature in Different Cities

This visualization presents one week of hourly temperature readings from seven cities as small multiples of area charts, using a facet row for each city. It demonstrates a flawed design: color encodes city but repeats per facet, making it meaningless, and the filled area under the temperature curve suggests no quantitative significance, hindering cross-city comparison. The chart is built with Vega-Lite’s specification (v2), rendered via `vegaEmbed`, while `d3.csv` fetches the sensor data from the Sense Your City project.

SsmileHorse

89% match

Loading thumbnail…

Different Cities

Seven city-specific temperature traces span one week of Sense Your City sensor readings, overlaid in a multi-hued line chart to expose daily rhythms and inter-city contrasts. The visualization re-renders responsively on window resize, encoding time on the x-axis and temperature in Celsius on the y-axis. Built with Vega-Lite specifications executed through vegaEmbed, it relies on d3.csv for data loading and uses multipled stroke blending for overlapping lines.

Llimenzi

88% match

Loading thumbnail…

Temperature in Different Cities

A multi-line chart shows temperature readings across seven cities—San Francisco, Bangalore, Boston, Geneva, Rio de Janeiro, Shanghai, and Singapore—for one week in 2015. Each city’s hourly data appears as a distinct colored line, with the full legend displayed. The visualization is rendered with Vega-Lite embedded through `vegaEmbed`, using a dynamic width and height that recomputes on window resize. The code loads CSV data via `d3.csv` from the Sense Your City project and styles line strokes with blend modes.

Aask4jm

86% match

Loading thumbnail…

A Week of Temperatures Around the World Various Lines Chart

This line chart displays one week of temperature readings in Celsius across multiple cities, with each city represented as a distinct colored line. The visualization uses a nested data grouping to organize city series and sorts them by their final temperature value. Built with d3 v5, the code employs scaleTime and scaleLinear for axes, a line generator with curveBasis for smooth paths, and an ordinal color scale from schemeCategory10. The visualization renders to SVG and pulls its data from the Data Canvas - Sense Your City dataset.

GGonzalo Montañés

82% match