Skip to main content
SimilarExport ZIP
100%

Temperature in Different Cities

✓ Published0🌍 Public
Ssleyus
Last edited Nov 8, 2019
Created on Nov 8, 2019

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)`.

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

Also related - Vega-Lite GitHub Issue: Specify Label Width for Facet

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 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.

CCurran Kelleher
94% match
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
90% 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
89% 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
88% 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
86% 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
86% 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
83% match
Loading thumbnail…

Temperatures of Cities

This visualization displays temperature measurements from cities around the world over a one-week period. Multicolored line paths represent each city's temperature fluctuation over time, with a color legend positioned at the right identifying each city. The chart includes gridlines and labeled time and temperature axes. Built with React and D3 v6, the example uses `scaleTime` and `scaleLinear` for scaling, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeCategory10` for colors. Data originates from a CSV file loaded via `csv()`, and the SVG rendering employs the declarative selection API.

MMatthew Rubino
79% match