Thursday, August 23, 2018

Collaboration scenario: sharing and cloning

Recently, charte.ca feature set got new additions: chart cloning and chart sharing. Cloning is getting an exact copy of a source chart. Sharing is allowing other users to edit your chart.

Consider an example: Bob is working on a chart and wants Alice to help him. Bob opens the chart in the editor, finds "Sharing" panel and clicks "Share with another user" button. He is presented with a popup that displays a URL of the invitation that Bob has to send Alice so she gets access to his chart. Bob presses "Confirm":


Now, "Sharing" panel displays the invitation in the list. If Bob changes his mind, he can cancel this invitation by clicking the "x" button on the right of the invitation:

Monday, May 7, 2018

Javascript ES6 only please

Starting from May 7, 2018, charte.ca charts are not displayed in browsers that do not support major ES6 features. In plain English: Internet Explorer users will not be able to see charts created by charte.ca, Edge users should be fine. Also, the editor now requires ES6 as well (which is not much of a change since the editor requires data uri support and IE and Edge are both lacking it).

Charts have just become 5-10% smaller in size.

Monday, January 29, 2018

charte.ca as an educational resource: motion charts visualizing World Bank data

High school students extract data from the World Bank dataset and create a motion chart that shows the relationship between life expectancy and expenditure on health in different countries. See discussion in Information Technology Teachers' Mailing List:

https://edulists.com.au/pipermail/yr11it/2017-August/003375.html

A set of instructions for Yr11 Information Technology students:

http://www.edulists.com.au/pipermail/yr11it/attachments/20170820/71ebeb96/VisualisingBigDatausingCharte-steps-0001.docx

Thursday, November 30, 2017

Visualizing Google analytics report: motion chart with drilldowns

Below is a motion chart with drilldowns visualizing Google Analytics report for a fictional website. Click and hold on any bubble to see acquisition and conversion details for a specific channel: Direct, Organic Search, Referral, Social.


Why motion charts?


Motion chart allows efficient and interactive exploration and visualization of multi-dimensional data and can make it easier to notice an important trend. Google has done a great job explaining how motion chart can be useful in web analytics and providing a tool for building motion charts based on analytics reports.

Tuesday, November 28, 2017

Interactive charts in online presentations

Earlier this year, we posted a small research on US and Canada immigration patterns. Let's make a simple online presentation from it.

Using slides.com

We will be using slides.com, which is probably the most flexible and powerful online presentation engine these days. We will re-use all charts from our earlier post without modifications - they are already published and ready to be embedded. The presentation is available here:

http://slides.com/chartecaguy/us-canada-demographics#/


A few things worth noting.

1.  All charts are interactive - move mouse pointer over the curves and see.

2. All charts are embedded with style="width:100%" attribute, which makes them scalable: try running the presentation in full-screen mode or resize your browser window - you will see charts changing their sizes accordingly.

A screenshot of the slides.com editor with embedded chart:


Other online presentation tools

Are there any other online presentation tools that support HTML embedding from arbitrary sources? Unfortunately, not many. So far I have come up with this list:

  • Emaze - NO
  • Google Slides - NO
  • Haiku Deck - NO
  • Prezi - NO
  • Slides.com- YES
  • Sway - NO
  • Slidebean - NO
  • Visme - YES


Friday, November 24, 2017

Chart background graphics: SVG

We are excited to announce SVG background support. This means that chart authors now can use vector or raster graphics for chart backgrounds. The following example shows gender symbols and generation names behind the population pyramid chart:



This chart uses data from this spreadsheet. Import settings are as follows:

Friday, November 17, 2017

MI, NC, OH, PA congressional elections 1972-2016: district breakdown by % of votes for Democrats

Inspired by Blake Esseltyn's attempt to visualize MI,NC,OH, and PA redistricting results, I copied congressional election results (democratic votes only) in those four states from gerrymander.princeton.edu into a spreadsheet and broke down district results by percentile. For example, for 1972 Michigan congressional elections we have 19 districts with the following votes % for Democrats (in no particular order):

89.08%, 43.57%, 40.24%, 32.75%, 38.14%, 49.36%, 29.89%, 39.93%, 29.83%, 31.63%, 30.05%, 50.82%, 86.54%, 54.86%, 66.68%, 69.58%, 67.15%, 47.38%, 28.93%.

After breaking down buy percentile, we get:
Districts that got between 0% and 10% votes for Democrats: 0 out of 19: 0%
Districts that got between 10% and 20% votes for Democrats: 0 out of 19: 0%
Districts that got between 20% and 30% votes for Democrats: 3 out of 19: 16%
Districts that got between 30% and 40% votes for Democrats: 5 out of 19: 26%
and so on.

The following are four heatmap charts that visualize Democratic votes breakdown for these fours states. Watch districts gravitating towards 30-50 democratic vote percentiles since 2010.