Feed your inner data scientist. JS Visualization Tools
Download as PPTX, PDF2 likes1,625 views
This document provides an overview of JavaScript tools for data visualization and analysis, including D3.js, Crossfilter.js, dc.js, and DataTables. It discusses using these libraries to load and manipulate stock market data, create interactive bar and line charts, and build dashboards with multiple coordinated views. Examples are given of creating basic charts with each library and combining them into a dashboard using Crossfilter for filtering and dc.js for charting.
![Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/prdc2013wpg-richandbeautiful-130507145644-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
Similar to Feed your inner data scientist. JS Visualization Tools (20)
Recently uploaded (20)
Ad
Feed your inner data scientist. JS Visualization Tools
- 1. FEED YOUR INNER DATA SCIENTIST JavaScript tools for Data Visualization and Analysis
- 2. GOAL FOR TODAY Big Data • Health • Gov’t • Financial • Dev Ops IOT • Sensors • Stats
- 3. BIO Doug Mair • [email protected] • @doug_mair Principal Consultant for Improving Enterprises Windows Developer User Group – Columbus, Ohio
- 4. BIG DATA • With IOT and business processes, lots of data is being collected • Separation of concerns • Process the data on the Server as much as possible • Client computers should do as little work as possible. • Services and Event Queues are good Architectures to explore
- 6. MAP / REDUCE • MAP – Group, Sort and Filter. • Take all of the stock trades and split them out by company, date or time • Can be massively parallelized. • Reduce – Functions on each groups. • Examples are Counts, Sums and Averages.
- 9. STOCK DATASET Date Open High Low Close Volume Adj Close* Oct 6, 2015 26.99 27.41 26.96 27.29 70,409,000 27.29 Oct 5, 2015 26.37 27.20 26.22 26.82 103,735,400 26.82 Oct 2, 2015 24.87 25.49 24.83 25.47 42,508,500 25.47 Oct 1, 2015 25.15 25.31 24.79 25.19 39,649,700 25.19 Sep 30, 2015 24.73 25.24 24.69 25.22 43,496,700 25.22 Sep 29, 2015 24.33 24.60 24.26 24.57 41,155,800 24.57 Sep 28, 2015 24.69 24.74 24.31 24.31 42,431,300 24.31 Sep 25, 2015 25.00 25.04 24.86 24.92 38,818,000 24.92 Sep 24, 2015 24.87 25.45 24.65 24.91 53,239,500 24.91 Sep 23, 2015 25.01 25.33 24.98 25.14 41,190,000 25.14 Sep 22, 2015 24.76 25.16 24.60 25.11 44,205,000 25.11 Sep 21, 2015 24.89 25.20 24.84 25.09 29,618,900 25.09 Sep 18, 2015 25.15 25.21 24.71 24.80 77,869,300 24.80 Sep 17, 2015 25.50 25.93 25.27 25.35 48,844,100 25.35 Sep 16, 2015 25.53 26.03 25.42 25.93 61,540,100 25.70 Sep 15, 2015 24.90 25.45 24.70 25.30 46,334,700 25.08 Sep 14, 2015 24.97 24.98 24.60 24.77 26,237,600 24.55 Sep 11, 2015 24.74 24.96 24.50 24.95 31,903,000 24.73 Sep 10, 2015 24.56 24.86 24.50 24.68 35,043,100 24.46 Sep 9, 2015 25.20 25.22 24.48 24.55 34,611,200 24.33 Sep 8, 2015 24.51 24.98 24.27 24.96 46,212,800 24.74 Sep 4, 2015 24.18 24.18 23.85 24.00 35,628,400 23.79 Sep 3, 2015 24.76 24.95 24.39 24.51 33,564,800 24.29 Sep 2, 2015 24.14 24.58 23.83 24.57 50,480,800 24.35 Sep 1, 2015 24.24 24.36 23.68 23.88 65,344,000 23.67 Aug 31, 2015 24.98 24.98 24.58 24.82 37,006,800 24.60 Aug 28, 2015 24.92 25.17 24.78 25.16 32,942,500 24.94 Aug 27, 2015 24.43 25.01 24.38 25.01 64,894,200 24.79 Aug 26, 2015 23.85 24.07 23.27 24.01 78,965,900 23.80 Aug 25, 2015 24.73 24.74 23.27 23.27 60,778,000 2 Month Average Open High Low Average Close Total Volume OCT 25.845 27.41 25.19 26.19 256,302,600 SEP 24.79333 25.06905 24.54238 24.83429 927,769,100 AUG 24.77667 25.05333 24.58 24.99667 134,843,500
- 11. BUSINESS REQUIREMENT MAKE A BAR CHART • Now that we have all the data separated out … • Your Client wants to see it in a Bar Chart. • Options: • Generate Chart server side and Embed PDF • Plain old HTML and CSS • D3 • And more …
- 13. D3.JS D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. • Written by Mike Bostock http://d3js.org/
- 14. D3 Gallery https://github.com/d3/d3/wiki/Gallery 340+ Visual examples 600+ Links to even more examples Look for a chart you want to create and you will most likely find a working sample to build from.
- 15. D3 SAMPLES Force Layout Carto gram
- 16. D3.JS DATA DRIVEN BAR CHART
- 17. DC BARCHART
- 18. REQUIREMENT CHANGE We want to switch from Bar Chart to Line Chart. Should be easy right …
- 19. CLIENTS ARE HAPPY • But … • Now they want a Dashboard with more features. • Multiple charts that Interact with each other.
- 20. D3 DASHBOARD
- 21. DC.JS dc.js - Dimensional Charting Javascript Library dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's demo). It leverages d3 engine to render charts in css friendly svg format. Charts rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's interaction. The main objective of this project is to provide an easy yet powerful javascript library which can be utilized to perform data visualization and analysis in browser as well as on mobile device. https://dc-js.github.io/dc.js/ • Fluent interface – Be careful of return type and order. • Great for Dashboards
- 22. CROSS FILTER Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records; we built it to power analytics for Square Register, allowing merchants to slice and dice their payment history fluidly. http://square.github.io/crossfilter/
- 23. CROSS FILTER A Javascript Map / Reduce framework. Steps for using Cross Filter Create Indexes var ndx = crossfilter(data); var all = ndx.groupAll(); Create Dimensions var dateDimension = ndx.dimension(function (d) { return d.date; }); Create Groups var dayWebGroup = dayDimension.group().reduceSum(function (d) { return d.web; }); Use Groups on the charts stocksChart .dimension(dayDimension) .group(reduceGroup, "TV Spots")
- 24. DC DASHBOARD
- 25. DATATABLES DataTables Table plug-in for jQuery https://datatables.net/ DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. • Highly configurable JavaScript library for displaying data in tables.
- 26. CONCLUSION All Open Source – Still cant believe these tools are free. Easy entry to building Dashboards. It is still tough, but lots of help available online.
- 27. THANKS FOR LISTENING Covered: d3.js, dc.js, crossfilter.js, moment.js, datatables.net Contact Info: [email protected] @doug_mair Feel free to ask Questions?
Editor's Notes
- #6: We can tell this is not random data There's a structure here What does this resemble? Brain? Universe? It's a treasure trove of info, but not discoverable or explorable. How do we get meaning out of it?
- #8: Often the data we have in Raw form is useless to our users We have to coalesce and massage the data to get at what is vital This is where the secret sauce and IP of companies is built
- #9: Found this on the Internet Funny, yet accurate example of Map Reduce Walk through each step
- #10: This example is based on daily stock results Rolled up to provide monthly stats Notice multiple Reduction functions here. Compare the size of the data before and after Question: How can we tell which Company had the highest stock value for a month Question: How can we tell which Day had the most activity Answer: We can't because the data has been lost in the reduce
- #11: This is what makes developing hard and keeps us in business It's important to spend time figuring out What details the customer need Which details get in the way Iteration of datasets is important Architect your data operations for change and growth Architect your data Visuals for change too
- #12: You get a napkin with your requirements Document drawn on it. How can we do this? Switch to Example 1
- #13: Switch to Example 2 Shows redoing this with D3 Select – Enter - Exit
- #14: D3 works within the DOM Doesn't replace the DOM Similar concepts to jQuery Mike Bostock started it while working at New York Times Release in 2011. Strong Open Source Community.
- #15: Here are examples of what D3 can do. Remember I said it was community supported Scroll through the items Switch to Example 2.1 then 2.2
- #16: Lets use some of this power in our Bar Chart Switch to Example 3
- #17: Code size is starting to grow. Can we refactor? DC.js can help. Built on top of D3.js. Switch to Example 4-DC-Bar-chart.html
- #18: Cool, much fewer lines of code.
- #19: Guess what, a new napkin appears … Switch to 5-D3-Line-chart.html
- #20: How does interaction happen? Switch to 6-D3-Dashboard.html Show amount of CUSTOM code to add each chart.
- #23: Go to the website to show the details.