Skip to main content
SimilarExport ZIP
100%

Fork of Temperature in Different Cities

✓ Published0🌍 Public
SsmileHorse
Last edited Jun 25, 2022
Created on Jun 25, 2022

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.

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
89% 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
88% 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
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
84% 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
83% 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
83% match
Loading thumbnail…

Fork of Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature readings in Celsius for multiple cities, with lines sorted by their final value and distinguished by color from a categorical scale. The visualization includes a title, labeled axes, a color legend, and a grid created by axis tick marks. The code uses D3 v5 functions including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `line` with `curveBasis`, and `nest` to group data by city, rendering as SVG. Temperature data originates from the Data Canvas - Sense Your City dataset.

Ppurplemaestro
80% match
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. It plots time on the x-axis and temperature on the y-axis, with each city’s series drawn as a distinct colored path using D3’s `line` generator with a basis curve. The code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `nest` to structure the data, while axes and labels are rendered via `axisBottom` and `axisLeft`. The visualization is rendered as an SVG, with each city color-coded through the `schemeCategory10` palette.

Jjwadhwa6
80% match