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.


Tess Barnes

March 12, 2018


  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?