Upgrade to Pro — share decks privately, control downloads, hide ads and more …

D3 or not D3

D3 or not D3

In overview of why D3 might be for you, these slides accompany a deep dive into javascript code using d3 and the customising power it can offer.

079fb5d4ef22e8fe922d1cbb4ef34a3a?s=128

Tess Barnes

March 12, 2018
Tweet

Transcript

  1. D3 or not D3 Whether it is nobler to use

    chartjs with mvc
  2. Who am I? • Full stack developer since 2005 •

    Made a few mistakes • Learned a lot • Happy to share • Work in payroll Tess Barnes @crataegustess linkedin.com/in/tessbarnes talks@tessbarnes.uk
  3. What is D3? JS library created by Mike Bostock: https://en.wikipedia.org/wiki/Mike_Bostock

    Open Source (BSD-3) - examples have varied licences (mostly GPLv3) Foundation for a bunch of plugins & wrappers Data visualisation tool high level language ES5 compatible wrapper for dom manipulators and svg generators
  4. What graphs did my boss like?

  5. The graphs I thought we needed

  6. Other contenders Kendo • Costs money • Limited range of

    charts • Hard coded colours ChartJS • Limited range of charts (v1) • Built for ES6 (v2 available 4/2016) • Limited configuration Google charts • Google hosted services • Limited range of charts • Harder to customise colours dynamically Must Integrate with MVC Must Work in IE10 & IE11
  7. Demo 1… The other contenders After the talk we also

    briefly discussed c3 : http://c3js.org/gettingstarted.html This is a d3 wrapper but doesn’t look like you can drill into the d3 underneath. MIT licence.
  8. Why was d3 a good fit Flexible - not just

    ‘ordinary’ graphs Interactive - • Easily filtered data • Relative sizing • Zoomable (https://bl.ocks.org/mbostock/4348373) • Selectable (http://bl.ocks.org/tylercraft/3630001) • Rollover behaviour Didn’t cost any money Worked with C# MVC Worked in IE
  9. What made it usable Just javascript (ES5 style) Styled with

    css Less a chart library More a drawing tool Able to create reusable components Lots of lambdas Charting library D3 Hand crafting SVG D3 plugin D3 plugin
  10. Why else was d3 a good fit Configurable - our

    own dynamic colour scheme - write once, use everywhere g.append("path") .attr("d", arc) .attr("fill", function (d, i) { return c.getColor(def.baseHue, def.baseSaturation, i, data.items.length, def.theme); }) getColor : function(hue, sat, itemIndex, numItems, theme) { var lightness = 0; if (theme === "Dark") { lightness = (((itemIndex + 2) / (numItems + 2)).toFixed(2)); } else { lightness = 1 - (((itemIndex + 2) / (numItems + 2)).toFixed(2)); } return d3.hsl(hue, sat, lightness); },
  11. Demo 2: Let’s dive in...

  12. What I actually needed

  13. Trips and Traps V3 or V4 (released June 2016) -

    Ch-ch-changes: https://github.com/d3/d3/blob/master/CHANGES.md Open source plugins (https://github.com/d3/d3/wiki/Plugins) Example frenzy (https://github.com/d3/d3/wiki/Gallery) Licencing / giving credit Wrapper libraries - dimple (not IE), NVD3 (not IE & abandoned 2014) MVC integration, webpack builds and the joys of RequireJS.NET Post pub discussion: Rendering as canvas for performance: https://medium.freecodecamp.org/d3-and-canvas-in-3-steps-8505c8b27444
  14. Bonus round - Maps To do maps you need a

    few more things: Topographical data - might cost money Map imagery - will cost money Data in a specific format Tooltip data? Zoomable? For less than 25,000 hits on the api per day? Maybe use google
  15. Bonus round - 3D Additional library - https://github.com/x3dom/x3dom, http://x3dom.org Uses

    canvas rather than svg Colour gotchas Examples - check out the d3 gallery Wrappers - Plotly JS (open source) Alternative - BabylonJS (for games, based on WebGL)
  16. The real use case for d3 Creating a space where:

    • Data is fun • Data is interactive • One key element emphasised Animation: https://bl.ocks.org/mbostock/raw/1136236/ Force graphs bonus Further reading: https://www.analyticsvidhya.com/blog/2017/08/visualizations-with-d3-js/ Best when: • Data is not just maths • Users have time to explore • Problem space is a one off event
  17. credits All d3 chart images copied or streamed from https://github.com/d3/d3/wiki/Gallery;

    licenced by their authors. Dragon - free range from the public domain Thanks for listening! Any questions?