Visualization Editor

100%

Visualization Editor

✓ Published0🌍 Public

Last edited Mar 27, 2015

Created on Mar 20, 2015

This interactive visualization, built with the Chiasm runtime, combines a scatter plot with lines and a line chart to explore temperature data from the Data Canvas - Sense Your City API. The lower line chart displays temperature over time for all cities, while the upper chart allows zooming via brushing, inspired by the D3 Focus+Context example. Brushing in the top chart filters the scatter plot to show only the selected time range. The editor uses reactive dataflow to update scales, axes, and brush interactions dynamically.

AI-generated description

This program makes a scatter plot (with lines) and line chart from data in the Data Canvas - Sense Your City API and makes use of the Chiasm visualization runtime engine.

The line chart shows the temperature for all cities with available data. The program constantly fetches more data going back in time, in invervals of 24 hours with a resolution of 10 minutes.

You can use the bottom line chart to zoom in with the top line chart. This approach is inspired by the D3 Focus+Context Via Brushing example. Brushing in the top line chart causes data for only the brushed region to be shown in the scatter plot. This allows you to focus on specific regions of time.

Draws from

Similar vizzes

Loading thumbnail…

Visualization Editor

This interactive editor uses the Chiasm runtime to coordinate a linked bar chart and line chart, both fed by the Data Canvas Sense Your City API. The line chart displays temperature trends across seven cities over the past 24 hours, while the bar chart shows current temperatures; both update every five minutes. Users can hover over the line chart to filter the bar chart to a specific time slice via Crossfilter. A gear icon toggles a configuration editor, enabling interactive editing of properties like color scales and title text. The editor is implemented with CodeMirror and Inlet.

CCurran Kelleher

91% match

Loading thumbnail…

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.

CCurran Kelleher

90% match

Loading thumbnail…

Visualization Editor

This example demonstrates the Chiasm visualization runtime engine, which enables live configuration of visualizations through an interactive editor. The layout divides the screen between a configuration editor and two charts—a bar chart and a line chart—displaying data from CSV files. Users can click on numbers and colors in the editor to open interactive widgets that adjust the visual properties of the charts in real time. The runtime uses a reactive data model, where changes to the configuration JSON propagate to the visualizations instantly. The bar chart shows categorical frequencies from `simpleBars.csv`, while the line chart plots temperature over time from `simpleTime.csv`, styled with axes from a shared stylesheet. This setup demonstrates how Chiasm's reactive architecture enables dynamic, code-free customization of visualizations.

CCurran Kelleher

81% match

Loading thumbnail…

Visualization Editor

This animated demo of Chiasm, a visualization runtime engine, cycles through configurations that combine a bar chart and a line chart in a split view, alongside a live configuration editor. The interactive editor lets you modify chart properties—such as data bindings, axes, colors, and titles—and see the updates render instantly. Built with reusable D3-based plugins, the example demonstrates how different chart types and data sources can be composed dynamically, with the bar chart plotting letter frequencies and the line chart showing temperature over time.

CCurran Kelleher

79% match

Loading thumbnail…

Working with time

This interactive scatter plot visualizes temperature readings over time, with each point representing a data sample and a smooth curve connecting the series. Users can brush horizontally across the chart to highlight specific time ranges, which turns the corresponding circles red. Built with React and D3 v7, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveNatural`, and `d3.brushX` for the selection interaction. Data comes from a CSV file of weekly San Francisco temperatures, rendered as SVG elements with custom axes.

Cchrismeeky

76% match

Loading thumbnail…

Line Chart

This interactive line chart displays temperature trends over time from the Data Canvas Sense Your City dataset. The visualization uses React to render an SVG graph with time-scaled x-axis and linear-scaled y-axis, applying a natural curve to connect data points smoothly. D3 v5 utilities generate the axes and line path, while React hooks load and parse the CSV data. The chart includes labeled axes showing days on the horizontal axis and temperature values on the vertical axis, with a clean, minimal design emphasizing the data pattern.

Ggujjapooja7@gmail.com

75% match

Loading thumbnail…

Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, using a time-scaled x-axis and linear y-axis. The visualization employs React components with D3 v5 scales and SVG rendering, where each circle represents a temperature measurement with a tooltip showing the date. The code uses `scaleTime` and `scaleLinear` for axis scaling, `timeFormat` for tick labels, and custom React `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded asynchronously via D3’s `csv` function from a GitHub gist URL.

Jjuanmy400

75% match

Loading thumbnail…

Working with Time

This interactive scatter plot visualizes temperature readings over a week-long period, using a time-based x-axis and linear temperature scale on the y-axis. Built with React and D3 v5, the visualization loads CSV data from the Data Canvas Sense Your City dataset and renders SVG circles for each measurement. The code utilizes scaleTime, scaleLinear, extent, and timeFormat APIs to handle temporal scales and date formatting, while custom React components manage axis rendering and data point marks with tooltips showing the day of the week.

NNick

75% match