Building a Custom UI Control with D3 - 2015 Esri Devoloper Summit
•Download as PPTX, PDF•
0 likes•490 views
This document discusses building a custom UI control with D3.js by choosing interactive SVG elements, forking an open source gauge template, customizing the specs and style, adding interactive elements, and connecting it to a map. The author shares their experience building a custom gauge control based on a template from Jake Trent and customizing it, and provides their contact information for any questions.
Recommended
More Related Content
More from Blue Raster
More from Blue Raster (20)
Recently uploaded
Recently uploaded (20)
Building a Custom UI Control with D3 - 2015 Esri Devoloper Summit
- 1. Alicia Barnash, Blue Raster Esri Developer Summit March 9, 2015 Build a Custom UI Control with D3.js
- 3. choose a solution… Interactive SVG elements with http://d3js.org/
- 4. …borrowing an open source template http://jaketrent.com/post/rotate-gauge-needle-in-d3/
- 5. …fork a template Original: http://codepen.io/jaketrent/pen/eloGk/ My Fork: http://codepen.io/codeleash/pen/QwBeOP
- 6. … customize the specs
- 7. … customize the specs
- 8. … customize the specs
- 9. … customize the style
- 10. … add interactive elements
- 11. …and connect to the map
- 12. …and connect to the map
- 13. …and connect to the map
- 14. …and connect to the map
- 15. …and connect to the map
- 16. Contact Alicia Barnash, Blue Raster abarnash@blueraster.com @aspacebarnash http://codepen.io/codeleash/
Editor's Notes
- We were building an application that updates a number of thematic layers on the map, within each thematic data type, the user has four possible climate change scenarios to select from. For the UX design, this presented the problem of communicating this concept to the user. During the application design phase, someone on our team had the idea of switching between the four scenarios with this circular dial control. The control looks cool and does a nice job of communicating the scenario options for each layer to the user. However, from the perspective of the developer, this is a pretty annoying design as it is not exactly trivial to implement in the CSS Box Model. The client, designer, and project managers loved it, so the challenge for the developer was to find a solution that worked smoothly and didn’t spend a lot of development hours on this relatively small piece of the application.
- “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.” Not just useful, for traditional Data Visualization, also can be leveraged for building controls that go beyond typical HTML/CSS box elements We wanted the individual pieces of the control to be interactive, and the needle movement to have an animation effect, so simple CSS background classes weren’t ideal
- Didn’t want to spend a lot of time learning the entire framework, when I only needed to use a subset of the functionality D3 has a steeper learning curve than many other JS libraries but fortunately there are lots of examples of controls that other people have already built Found this example from a “Jake Trent” character online. No need to reinvent the wheel from scratch, Jake Trent’s gauge control get’s us halfway there
- He posted the code for his gauge control on Codepen, made it really easy to play around with his parameters to see how much work would be involved in making this gauge look like our dial control Luckily after some trial and error I was able to find which parameters I needed to change to get the dial look
- numSections was set to 3, ours needed 8 different sections
- We also wanted the sections to fill out a circle, rather than a half circle, able to accomplish that
- Added parameter to make the sections look thicker, rotate them so the first section was directly on top, and changed the needle to a smaller radius, chartInset brings the arcs in closer to the needle
- - It’s really easy to style the look of D3 elements, using CSS, I changed the color of all sections to the same rgb value, also changed the color of the needle
- After I got the look of the gauge to match our dial control. The next steps where to integrate the code into our application framework and extend the functionality to support updating our map. I added 4 clickable text elements to the control. When the user clicks on one of the labels, the callback function sets the needle to point to that label and adds a .select class to that element, which is then highlighted a different color in the css.
- - Once all the internal logic of the control was functioning, All I had to do was add a line of code to the callback function to wire the control into our application code. Our modelEventControll changeScenario function handles the rest of the task of updating our map.