As part of the user interface, it is important that data visualizations are context aware and should adjust according to screen size, media type, and other similar aspects. To tackle this, it is essential for web developers to ace at both D3 and responsive design using Bootstrap to make visualizations responsive across different viewing platforms. D3 is currently the go-to data visualization library, offering greater integration with web standards, and better customizability than other data visualization libraries available.
This video course starts out by describing ways in which D3JS fits into existing web standards to provide data visualization solutions that can be easily integrated. After working through the basic flow of simple visualizations, we'll start adding features: tooltips, axes, and scales. We'll take a look at interactivity and transitions. Then we'll walk through the use of external data sources, including CSV, TSV, JSON, and GeoJSON, which will prepare us for more in-depth visualizations.
Further on we'll tackle responsive design, covering all the basic concepts, and then work our way through a site mockup the old fashioned way, looking for breakpoints and using media queries to provide smooth screen size transitions. Our work with responsive design will then be applied to a number of our early data visualizations.
By the end of this course, you will have an armoury full of tools to create feature-rich data visualizations with D3JS that are responsive on different platforms.
About the Author
Merrill Cook is currently a freelance data journalist, who has helped to strategize, implement, and market infographics, interactive graphics, interactive maps, scrolling story pages, and a variety of other online media types. He is also the manager of an independent online course and online course platform ranking site.
You want to use the browser's native ability to render SVGs so that you can present some data to your site's visitors. In this case, you want a bar chart, so let's build a nondynamic bar chart with HTML.
It's burdensome and inefficient to maintain a bar chart hardcoded in HTML. So, let's make one that can dynamically adjust to new data in D3.
You have a progression of data points that you want plotted on a line.
You have disorganized multidimensional data points, and you want to see whether there's any trend in the data. In this case, we'll use a simple D3 scatterplot to provide a dynamic way to visualize the data.
There isn't much context for your visualisations varying in pixel values. Users can't even tell which object is which. Let's start by adding the simplest form of labels by appending a text element.
Traditional text labels can be unbecoming, and you aren't always interested in the value of every part of data visualization. Let's solve this problem by creating tooltips that appear on mouseover.
We need a way to uniformly deal with incoming data and output values that will plot well in our given visualization. Let's explore D3 scales so that we can dynamically deal with our growing datasets.
Even on fluid grid sites, there are times when the layout or content is out of sync. That's why you need to know how to use media queries to address the breakpoints.
So far, we've used small datasets already stored in an array in our script. This is seldom the way data comes to us in the real world. So, let's use the d3.csv function to start exploring the visualization of external CSV files.
You've learned a few external data sources, but nothing that relates to geographic data. Let's check out the intricacies of GeoJSON.
So far, we've only relied on hover and window resize events. This isn't enough for a truly interactive experience, so let's dive into transitions.
While you can plot whatever you want on a map projection, most people are used to some form of base map giving context to the data. So, let's look at setting up a base map of populated regions in USA.
Particularly in CMS systems, or on sites where content can vary widely by size or format, you may want a one-size-fits-all way to embed your own content in pages. That's why you need PymJS, a tool developed by the NPR visualizations team for embedding.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.