Fetching Data

Getting the Data

This example demonstrates the raw output of a live sensor-data API by displaying a plain-text summary of the data returned from the Data Canvas - Sense Your City API. It fetches aggregated environmental readings (temperature, light, humidity, dust, etc.) for Geneva at five-minute intervals over the past day, then prints the number of rows, the number of columns, and the original CSV string onto the page. The code uses jQuery’s `$.get` to request the CSV and D3.js v3’s `d3.csv.parse` to convert the response into an array of objects. No chart or visual encoding is applied—the focus is purely on inspecting the dataset’s structure and content.

85% match

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.

74% match

D3 Example

As more data loads, this D3 example builds a multi-day temperature line chart for San Francisco, one CSV file at a time. Each file holds a day of hourly readings, and the visualization re-renders as each new day is fetched, revealing the dataset’s daily cycles. The SVG line chart, based on a standalone example, shows the temperature curve extending across time with each incremental load, demonstrating how to stream and update data progressively in the browser.

Visualization Editor

This visualization editor presents a live scatter plot and line chart showing temperature and humidity data for seven cities, fetched from the Data Canvas Sense Your City API. The scatter plot maps humidity against temperature with lines connecting city-specific series, while the line chart shows temperature trends over time. Users can interact with a configuration editor pane, adjusting visualization parameters through Chiasm’s reactive model, built with D3.js, CodeMirror, and the Inlet library. The runtime loads data continuously in 24-hour intervals, displaying five-minute resolution records with SVG rendering.

Line Chart

This line chart visualizes temperature readings over time for Geneva, automatically updating every 5 minutes with data from the Data Canvas - Sense Your City API. The chart is built with a reusable D3.js module and uses SVG rendering with smooth transitions. It fetches aggregated CSV data (mean temperature by date) via jQuery, maps the date field to a time-scale X axis and temperature to a linear Y axis, and includes labeled axes and a title. The visualization supports dynamic resizing and live data updates through a Model-based architecture that coordinates the container, SVG dimensions, scales, and axes.

MULTILINE CHART

This multiline chart displays one week of temperature data across multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, while d3.nest groups readings by city and d3.line with curveBasis draws smoothed paths. An interactive color legend, built with a custom colorLegend function, identifies each city. The SVG rendering includes responsive axes with grid lines, and stroke blending via mix-blend-mode: multiply enhances line overlap.

Ccocktaildata

Fetch Data

This example demonstrates how to load and inspect a CSV dataset from a remote URL using D3. It fetches the latest COVID-19 data from Our World in Data via `d3.csv` and logs the column names to the console, displaying the raw data structure. The visualization renders an empty SVG canvas sized to the viewport, with commented-out code hinting at potential animated circle transitions. The implementation relies on D3 v6, specifically the `select` and `csv` APIs, within a Promise-based async function.

Ddaria.daria

70% match

Colors

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.