{"id":932,"date":"2012-08-30T12:00:35","date_gmt":"2012-08-30T10:00:35","guid":{"rendered":"http:\/\/visurus.wordpress.com\/?p=932"},"modified":"2013-12-10T11:03:37","modified_gmt":"2013-12-10T11:03:37","slug":"visualizing-swiss-politicians-on-twitter-using-d3-js","status":"publish","type":"post","link":"https:\/\/www.ralphstraumann.ch\/blog\/2012\/08\/visualizing-swiss-politicians-on-twitter-using-d3-js\/","title":{"rendered":"Visualizing Swiss politicians on Twitter using D3.js"},"content":{"rendered":"

\"\"I’ve recently been playing with D3.js, mainly for my side-project, SoMePolis<\/a>, which investigates social media usage by Swiss MPs.<\/p>\n

D3.js<\/a> (D3:\u00a0d<\/strong>ata-d<\/strong>riven d<\/strong>ocuments) is a Javascript library for creating complex, static or animated\/interactive web graphics using HTML, SVG and CSS. The main site has a short tutorial<\/a>\u00a0and lots of example implementations<\/a>. A well-known solid introduction to D3.js is the one by Scott Murray from alignedleft.com<\/a>. Small tutorials also come from Mike Bostocks<\/a>\u00a0(developer of D3.js), Jan Willem Tulp<\/a>\u00a0and Christophe Viau<\/a>.<\/p>\n

D3.js is not exactly easy to use to build something from scratch, especially if you are not that<\/em> experienced a Javascript developer. But it’s easily understandable enough to take an existing visualization and tweak it to fit your purpose. Guess what? That’s exactly what I did.<\/p>\n

\"\"<\/a>
SoMePolis infographic of tweeting Swiss politicians<\/figcaption><\/figure>\n

Our first infographic<\/a>\u00a0(German, but English-speakers should still be fine looking at it; find the\u00a0French version here<\/a>)\u00a0details the membership of tweeting MPs to a range of classes in the dimensions “political party”, “sex”, “chamber”, “status in parliament”, “age” and “year of account creation”.<\/p>\n

The visualization, called Par(allel)Sets<\/em>, thus allows you to explore a six-dimensional attribute space with relative ease. All the dimensions can be (vertically) re-ordered using drag-and-drop.
\nSimilarly, the classes on each dimension can be (horizontally) re-ordered using either drag-and-drop, alphabetic sorting or sorting according to class size (in terms of number of politicians in each class). The latter two support ascending and descending sorting.
\nDistilling insight from the graphic is facilitated by informative captions that show when you hover over a class or a portion of the coloured bands.<\/p>\n

The adaptation of the D3.js code was actually not as much work as making the graphic in an iframe work seamlessly within our WordPress template and compiling a concise introduction video<\/a> using in-browser screencasting tool Screenr<\/a> (thumbs up!) and YouTube annotations (thumbs down).<\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve recently been playing with D3.js, mainly for my side-project, SoMePolis, which investigates social media usage by Swiss MPs. D3.js (D3:\u00a0data-driven documents) is a Javascript library for creating complex, static or animated\/interactive web graphics using HTML, SVG and CSS. The main site has a short tutorial\u00a0and lots of example implementations. A well-known solid introduction to … Continue reading Visualizing Swiss politicians on Twitter using D3.js<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1482,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Visualizing Swiss politicians on Twitter in the browser using D3.js http:\/\/wp.me\/p1qYOj-f2","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[8],"tags":[24,31,87,101,117,125],"class_list":["post-932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-piece","tag-chart","tag-d3-js","tag-politics","tag-social-media","tag-twitter","tag-visualization"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.ralphstraumann.ch\/blog\/wp-content\/uploads\/2012\/08\/SoMePolis.png","jetpack_shortlink":"https:\/\/wp.me\/p3pPwF-f2","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts\/932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/comments?post=932"}],"version-history":[{"count":2,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts\/932\/revisions"}],"predecessor-version":[{"id":1483,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/posts\/932\/revisions\/1483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/media\/1482"}],"wp:attachment":[{"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/media?parent=932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/categories?post=932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ralphstraumann.ch\/blog\/wp-json\/wp\/v2\/tags?post=932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}