A demo of the Chiasm visualization runtime engine.
Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations.
Curran Kelleher curran
A demo of the Chiasm visualization runtime engine. Demonstrates the nested box layout and basic setup.
Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations. Also, click and drag the X lines in the dummy visualizations to see the changes propagate to the configuration.
This program makes a bar chart 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 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.
Hovering over the line chart causes the bar chart to display data for the selected slice of time only (using Crossfilter).
The gear icon lets you open the configuration editor. Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations. For example, you can edit the color scale used by both visualizations, or edit the title text.
Draws from
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 5 minutes.
Draws from
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
A test of textures.js that shows one approach for creating a "texture scale" that combines individual scales for pattern, size, and color.
See also this discussion on GitHub: riccardoscalco/textures#7
This is a "kitchen sink" demo of the Chiasm visualization runtime engine. It contains various configurations that are loaded at runtime, showing various Chiasm plugins and how they can be used.
Press any key to stop the automated configuration changes.
This program allows you to explore the world's cities.
- Zoom in and out with the scroll wheel.
- Pan by dragging.
- Hover over a city to get its name and population.
Each circle represents a city. Each filled in pixel of a circle represents 50,000 people. When city circles overlap, they appear brighter, so brightness can be interpreted as population density.
The data comes from Geonames and shows only cities with population >100,000.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |