{"id":2139,"date":"2015-04-09T10:16:17","date_gmt":"2015-04-09T14:46:17","guid":{"rendered":"http:\/\/www.danielpradilla.info\/blog\/?p=2139"},"modified":"2017-01-15T13:32:58","modified_gmt":"2017-01-15T17:32:58","slug":"interactive-visualizations-javascript","status":"publish","type":"post","link":"https:\/\/www.danielpradilla.info\/blog\/interactive-visualizations-javascript\/","title":{"rendered":"Creating interactive visualizations of large datasets using JavaScript"},"content":{"rendered":"<p><a href=\"http:\/\/square.github.io\/crossfilter\/\" target=\"_blank\">Crossfilter<\/a> is a JavaScript library initially designed by <a href=\"squareup.com\" target=\"_blank\">Square<\/a> to explore large multivariate datasets in a web browser. It basically allows you to create sorted indexes and feed them to a charting library like <a href=\"http:\/\/mbostock.github.com\/d3\/\" target=\"_blank\">D3<\/a>, and enable the user to filter by clicking and dragging, even when sifting through 200.000 rows in a 5MB file:<\/p>\n<div id=\"crossfilter1\">\n<style>\n@import url('\/resources\/dc\/css\/crossfilter-example.css')\n<\/style>\n<div id=\"charts\"  class=\"dashboard\">\n<div id=\"hour-chart\" class=\"chart\">\n<div class=\"title\">Time of Day<\/div>\n<\/div>\n<div id=\"delay-chart\" class=\"chart\">\n<div class=\"title\">Arrival Delay (min.)<\/div>\n<\/div>\n<div id=\"distance-chart\" class=\"chart\">\n<div class=\"title\">Distance (mi.)<\/div>\n<\/div>\n<div id=\"date-chart\" class=\"chart\">\n<div class=\"title\">Date<\/div>\n<\/div>\n<\/div>\n<\/div>\n<aside id=\"totals\"><span id=\"active\">&#8211;<\/span> of <span id=\"total\">&#8211;<\/span> flights selected.<\/aside>\n<p>(go ahead, you can play with it. Click and drag on any of the charts to perform a live filtering of the dataset)<\/p>\n<p>The process to create these charts is relatively easy:<br \/>\n1. Load the data.<br \/>\n2. Define the dimensions with crossfilter.<br \/>\n3. Create the charts with D3.<br \/>\n4. Write the event code to respond to clicks and filters.<\/p>\n<p>The main challenge of using crossfilter is that you have to spend quite some time <del>fighting<\/del>\u00a0engaging D3 to make the charts respond to\u00a0filter changes and user clicks. These charts have to be wired together, so when you click on one, the others respond to the action. The JavaScript code for the chart above is <a href=\"http:\/\/square.github.io\/crossfilter\/\" target=\"_blank\">about 300 lines<\/a> and was made by clever guys who work at Square.<\/p>\n<p>There&#8217;s also the question of reusability. How much code would we have to write \u00e2\u20ac\u201cand maintain\u00e2\u20ac\u201c if we wanted to adapt any of these charts to another visualization? <\/p>\n<p>A lot! <\/p>\n<p>This is the main problem with using D3.js as a charting library and doing everything by hand. The development and testing of a single non-trivial dashboard could take weeks, if not months.<\/p>\n<p>You know what would be ideal? To have a charting library that allowed us to use large datasets with crossfilter and, at the same time, enabled us to create reusable charts that we could easily plug in wherever we want.<\/p>\n<p>That&#8217;s exactly what <a href=\"http:\/\/dc-js.github.io\/dc.js\/\" target=\"_blank\">dc.js<\/a> does. Here I&#8217;m loading the same 5MB, 200.000 records file, and dealing with it in only <a href=\"https:\/\/github.com\/danielpradilla\/dc\/blob\/master\/js\/crossfilter-with-dc.js\" target=\"_blank\">121 lines of un-optimized JavaScript<\/a>.<\/p>\n<div id=\"charts-dc\" class=\"dashboard\">\n<div class=\"chart-container\">\n<div class=\"title\">Time of Day<\/div>\n<div id=\"hour-chart-dc\" class=\"chart\"><\/div>\n<\/p><\/div>\n<div class=\"chart-container\">\n<div class=\"title\">Arrival Delay (min.)<\/div>\n<div id=\"delay-chart-dc\" class=\"chart\"><\/div>\n<\/p><\/div>\n<div class=\"chart-container\">\n<div class=\"title\">Distance (mi.)<\/div>\n<div id=\"distance-chart-dc\" class=\"chart\"><\/div>\n<\/p><\/div>\n<div class=\"chart-container\">\n<div class=\"title\">Date<\/div>\n<div id=\"date-chart-dc\" class=\"chart\"><\/div>\n<\/p><\/div>\n<\/div>\n<p>(click and drag on any of the charts to filter the data)<\/p>\n<p>This is the same set of charts, but done in a much simpler, faster and expressive way.<\/p>\n<p>Take a look at <a href=\"https:\/\/github.com\/dc-js\/dc.js\/wiki#examples-contributed-by-community\" target=\"_blank\">the samples<\/a> they have in their site, like this interactive <a href=\"https:\/\/vida.io\/documents\/qcNqZk8oRMPCdFHg9\" target=\"_blank\">Twitter dashboard<\/a> or this <a href=\"http:\/\/www.acrodatics.com\/\" target=\"_blank\">stock picker<\/a>. <\/p>\n<p><a href=\"http:\/\/dc-js.github.io\/dc.js\/\" target=\"_blank\">dc.js<\/a> performs the dirty work of linking the charts together, so when we click on a chart, the other charts in the group respond automatically, without writing any additional code. Magic!<\/p>\n<p><script src=\"\/resources\/dc\/js\/crossfilter.min.js\"><\/script><br \/>\n<script src=\"\/resources\/dc\/js\/d3.min.js\"><\/script><br \/>\n<script src=\"\/resources\/dc\/js\/crossfilter-example.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/resources\/dc\/js\/dc.min.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/resources\/dc\/js\/crossfilter-with-dc.js\"><\/script><br \/>\n<script>\njQuery('.dashboard').css('backgroundSize','inherit');\ncrossfilter_example('\/\/www.danielpradilla.info\/resources\/dc\/data\/flights-3m.json');\ncrossfilter_with_dc('\/\/www.danielpradilla.info\/resources\/dc\/data\/flights-3m.json');\n$(document).on('end-dc-charts',function(){\njQuery('.dashboard').css('backgroundSize','0');\n});\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Crossfilter is a JavaScript library initially designed by Square to explore large multivariate datasets in a web browser. It basically allows you to create sorted indexes and feed them to a charting library like D3, and enable the user to filter by clicking and dragging, even when sifting through 200.000 rows in a 5MB file:&hellip; <a class=\"more-link\" href=\"https:\/\/www.danielpradilla.info\/blog\/interactive-visualizations-javascript\/\">Continue reading <span class=\"screen-reader-text\">Creating interactive visualizations of large datasets using JavaScript<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_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_post_was_ever_published":false},"categories":[172,331],"tags":[198,197],"class_list":["post-2139","post","type-post","status-publish","format-standard","hentry","category-projectmanagement-en","category-software-development-en-en","tag-charts","tag-visualization","entry"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1tlzy-yv","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2436,"url":"https:\/\/www.danielpradilla.info\/blog\/classification-visualized\/","url_meta":{"origin":2139,"position":0},"title":"Classification, visualized","author":"Daniel Pradilla","date":"15\/05\/2026","format":false,"excerpt":"The other day, I was tinkering with model parameters and second-guessing myself. I wondered, wouldn't it be cool if i could compare side by side the results of different models? Yeah, it would. I ended up building a small interactive explainer for seeing how different classification and clustering approaches behave\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2026\/05\/SCR-20260515-urdl.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2026\/05\/SCR-20260515-urdl.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2026\/05\/SCR-20260515-urdl.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2026\/05\/SCR-20260515-urdl.jpeg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2026\/05\/SCR-20260515-urdl.jpeg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":2152,"url":"https:\/\/www.danielpradilla.info\/blog\/hello-p5js\/","url_meta":{"origin":2139,"position":1},"title":"Having fun coding with p5.js","author":"Daniel Pradilla","date":"01\/06\/2015","format":false,"excerpt":"p5.js is an effort to port the ideas and concepts of the Processing programming language to JavaScript. Even though there's already processing.js \u2013which transcodes Processing code into JavaScript\u2013, p5.js is built with extensibility in mind, trough plugins, and instead of writing Processing code to be transcoded, you write pure JavaScript.\u2026","rel":"","context":"In &quot;Software Dev.&quot;","block_context":{"text":"Software Dev.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/software-development-en-en\/"},"img":{"alt_text":"p5js","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2015\/06\/p5js.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2015\/06\/p5js.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2015\/06\/p5js.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2015\/06\/p5js.jpg?resize=700%2C400 2x"},"classes":[]},{"id":2082,"url":"https:\/\/www.danielpradilla.info\/blog\/amcharts-a-charting-library-for-creating-interactive-web-charts\/","url_meta":{"origin":2139,"position":2},"title":"amCharts, a charting library for creating interactive web charts","author":"Daniel Pradilla","date":"19\/05\/2014","format":false,"excerpt":"amCharts is a new JavaScript library for creating charts on the web. It handles many types of charts and it's somewhat reminiscent of D3.js. Its most exciting feature is a live editor, which removes the grunt work related to your typical JavaScript charting library and enables you to design, change\u2026","rel":"","context":"In &quot;Project Mgmt.&quot;","block_context":{"text":"Project Mgmt.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/projectmanagement-en\/"},"img":{"alt_text":"amcharts","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg?resize=700%2C400 2x"},"classes":[]},{"id":2306,"url":"https:\/\/www.danielpradilla.info\/blog\/classifying-convolutional-neural-network-keras\/","url_meta":{"origin":2139,"position":3},"title":"Classifying fruits with a Convolutional Neural Network in Keras","author":"Daniel Pradilla","date":"19\/02\/2019","format":false,"excerpt":"I followed a tutorial on Convolutional Neural Networks that left many questions unanswered. Soon I realized that the actual process of architecting a Neural Network and setting the parameters seemed to be much more experimental than I thought. It took a while to find explanations that a rookie like me\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"Photo by William Felker on Unsplash","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2019\/02\/william-felker-38344-unsplash.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2019\/02\/william-felker-38344-unsplash.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2019\/02\/william-felker-38344-unsplash.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2019\/02\/william-felker-38344-unsplash.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":2020,"url":"https:\/\/www.danielpradilla.info\/blog\/zoomdata-bi-without-etl\/","url_meta":{"origin":2139,"position":4},"title":"Zoomdata: BI without ETL","author":"Daniel Pradilla","date":"29\/10\/2013","format":false,"excerpt":"This weekend I took a few minutes to test Zoomdata. And when I say minutes, I literally mean minutes. These guys have done an amazing job to provide a quick mobile-ready demo that you can download as a VM, or as I did, install from an RPM package in a\u2026","rel":"","context":"In &quot;Project Mgmt.&quot;","block_context":{"text":"Project Mgmt.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/projectmanagement-en\/"},"img":{"alt_text":"zoomdata","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=700%2C400 2x"},"classes":[]},{"id":2157,"url":"https:\/\/www.danielpradilla.info\/blog\/a-swiss-railway-clock-in-d3\/","url_meta":{"origin":2139,"position":5},"title":"A swiss railway clock in D3.js","author":"Daniel Pradilla","date":"09\/06\/2015","format":false,"excerpt":"\u00a0 The other day I saw this cool JavaScript+CSS clock and I immediately thought that I wanted to create an analog clock in D3.js. First of all as an exercise, but also with the aim \u2013perhaps\u2013 of smuggling it in to a future dashboard ;) It seemed straightforward: just paint\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"Screen Shot 2015-06-05 at 5.26.54 PM","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2015\/06\/Screen-Shot-2015-06-05-at-5.26.54-PM.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/2139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/comments?post=2139"}],"version-history":[{"count":0,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/2139\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/media?parent=2139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/categories?post=2139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/tags?post=2139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}