Colors

100%

✓ Published0🌍 Public

Last edited Mar 19, 2015

Created on Mar 11, 2015

This example uses the Sense Your City API to visualize temperature data from seven cities. A line chart shows temperature trends over the past 24 hours for each city, while a bar chart displays current temperatures. Colors code the lines to the city, with palettes generated automatically using the LAB color space for optimal distinctness. The visualization updates every five minutes, and the line and bar charts are built with reusable D3.js modules, animated via SVG.

AI-generated description

This program makes a bar chart and line chart from data in the Data Canvas - Sense Your City API.

The line chart shows the temperature for all cities with available data for the past 24 hours, while the bar chart shows the current temperature of each city. The data is up to date, and updates every 5 minutes. Colors code the lines to the city.

Based on

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart visualizes the latest temperature readings from seven cities, using live data from the Data Canvas - Sense Your City API. Built with D3 v3 and an SVG rendering approach, it follows a reactive model-based architecture: the chart derives its width, height, scales, and axes from a set of properties, automatically updating when data or configuration changes. The X axis displays city names sorted by temperature, while the Y axis encodes the temperature values. The visualization includes animated transitions, a title, and axis labels, and is implemented as a reusable module that supports sorting and customizable margins. The data updates every five minutes, reflecting the most recent sensor readings.

CCurran Kelleher

82% match

Loading thumbnail…

City Temperatures

This visualization displays one week of temperature data for multiple cities, using color-coded line paths to distinguish each city’s trends over time. The chart includes a dropdown selector to choose which data attribute to explore, alongside a color legend for city identification. Built with D3 v5, it uses `d3.csv` for data loading, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleTime` and `d3.scaleLinear` for axes. A `nest()` operation groups measurements by city, and the SVG rendering includes styled grid lines and axis labels.

Rrigt

81% match

Loading thumbnail…

Temperature in multiple cities

This example shows temperature trends over time for multiple cities, with each city represented as a colored line and sorted by its final value. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for city colors. A custom colorLegend component renders the legend, while d3.nest groups the CSV data by city. The SVG rendering includes grid lines via axis tick sizing and a mix-blend-mode for overlapping lines.

Ssafdarawan

80% match

Loading thumbnail…

Temperature of Multiple Cities

This visualization displays temperature trends across multiple cities over time, with each city represented by a distinct colored line. The data comes from a CSV file and is rendered using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and a line generator with `curveBasis`. A custom color legend, positioned on the right, maps city names to their line colors via `colorLegend` function. The chart includes gridlines, axis titles, and a main title, all rendered as SVG elements with CSS styling for typography and line appearance.

Hhxc20060903

80% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings (in degrees Celsius) from cities worldwide, sourced from Data Canvas - Sense Your City data. The chart plots each city as a separate colored line, using a smooth curve (curveBasis) to connect temperature measurements over time. The visualization is rendered as an SVG using d3.v5, leveraging scales and axes from `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom`. The code nests data by city with `nest()`, assigns categorical colors via `scaleOrdinal(schemeCategory10)`, and includes a custom color legend built through the `colorLegend` function.

Ssleyus

80% match

Loading thumbnail…

Temperature across cities

This example visualizes temperature variations across multiple cities over a one-week period, with each city represented as a distinct colored line. The chart displays time on the x-axis and temperature on the y-axis, and includes a color legend identifying each city. Data is loaded from a CSV file using `d3.csv`. The visualization uses `d3.line` with `curveBasis` to generate smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.nest` to group data by city, and `d3.scaleOrdinal` with `schemeCategory10` for colors. A custom `colorLegend` component provides the interactive legend, and the rendering uses SVG with animated transitions on legend updates.

BB Sundaresan

80% 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

80% 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