Visualization Editor

Visualization Editor

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.

90% match

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.

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

78% match

D3 Scatter Plot w/ other data set

This scatter plot displays the relationship between temperature and humidity using data from the Sense Your City dataset, which is loaded via a CSV URL. Each circle represents a data point, with position mapped along the x-axis for temperature and y-axis for humidity. The visualization leverages D3 v6.7.0 within a React environment, using `scaleLinear` and `axisLeft`/`axisBottom` from D3 to construct the plot, rendering circles as SVG elements. The margins are defined, and the plot area spans the full window dimensions.

Ccardoza-IPH

76% match

Cchalasanigayaetiri@gmail.com

Project Visualizations

This scatter plot displays the Vancouver city humidity levels over time, with each data point colored according to its humidity value using a viridis color scale. The visualization loads CSV data from a GitHub gist via `d3.csv` and renders circles positioned by `d3.scaleBand` for both datetime and humidity axes. Gridlines enhance readability, while text labels above each point show the humidity percentage. The SVG is styled with custom CSS for axis colors, grid dashes, and background, and the code uses D3 v7 to construct the chart with margins and scales.

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.

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.

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.