Select Page

Category: JavaScript

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called that I’d never seen or even heard of before. According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather embarrassingly for me, it isn’t a new and fancy addition to the spec since Chris used it in a post all the way back in 2011. But regardless! What does output do and how do we use it? Well, let’s say we have an input with a type of range. Then we add an output element and correlate it to the input with its for attribute. See the Pen Input Output #2 by CSS-Tricks (@css-tricks) on CodePen. It… doesn’t really do anything. By default, output doesn’t have any styles and doesn’t render a box or anything in the browser. Also, nothing happens when we change the value of our input. We’ll have to tie everything together with JavaScript. No problem! First we need to find our input in the DOM with JavaScript, like so: const rangeInput = document.querySelector('input'); Now we can append an event listener onto it so that whenever we...

Read More

The Importance Of JavaScript Abstractions When Working With Remote Data

Recently I had the experience of reviewing a project and assessing its scalability and maintainability. There were a few bad practices here and there, a few strange pieces of code with lack of meaningful comments. Nothing uncommon for a relatively big (legacy) codebase, right? However, there is something that I keep finding. A pattern that repeated itself throughout this codebase and a number of other projects I’ve looked through. They could be all summarized by lack of abstraction. Ultimately, this was the cause for maintenance difficulty. In object-oriented programming, abstraction is one of the three central principles (along with encapsulation and inheritance). Abstraction is valuable for two key reasons: Abstraction hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the code. Abstraction helps us to reduce code duplication. Abstraction provides ways of dealing with crosscutting concerns and enables us to avoid tightly coupled code. The lack of abstraction inevitably leads to problems with maintainability. Often I’ve seen colleagues that want to take a step further towards more maintainable code, but they struggle to figure out and implement fundamental abstractions. Therefore, in this article, I’ll share a few useful abstractions I use for the most common thing...

Read More

Create Interactive Charts Using Plotly.js, Part 3: Bar Charts

In our last tutorial, you learned how to create line charts in Plotly.js. Every aspect of line charts, like the data to be plotted and the shape or color of the line connecting the plotted points, can be controlled using a set of attributes. Plotly.js allows you to create bar charts in a similar manner.  In this tutorial, you will learn how to create different kinds of bar charts using Plotly.js. I will also discuss how to control the appearance of these charts, like the bar color and width, using specific attributes. Before going further, I would like to mention that you can also create some basic bar charts using Chart.js. If you don’t plan on using any of the fancy features of Plotly.js, using a lightweight library makes more sense. Creating Your First Bar Chart You can plot a bar chart in Plotly.js by setting the value of the type attribute to bar. The rest of the tasks, like creating a trace object or providing the data to be plotted, are similar to the process of creating line charts. Here is the code you need to create a basic bar chart in Plotly. var barDiv = document.getElementById('bar-chart'); var traceA = { x: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], type: 'bar' }; var data = [traceA]; var layout = {...

Read More

Create Interactive Charts Using Plotly.js, Part 2: Line Charts

In the Getting Started With Plotly.js tutorial of this series, you were presented with a quick start guide that briefly covered all the features, bundles and chart types available in the library. If you have not already read that tutorial, I would suggest that you go over it at least once to get a broad idea of the Plotly.js library. In this tutorial, you will learn how to create line charts in Plotly. I have also written another series in the past about a lightweight library called Chart.js that can be used to create canvas-based charts in JavaScript. In one tutorial that is titled Getting Started With Chart.js: Line and Bar Charts, I covered the process of creating line charts using Chart.js. People who have read that tutorial will probably remember that you have to set the type attribute to line to create a line chart in Chart.js. With Plotly.js, you cannot set the type attribute to line to create a line chart. You will have to set the type attribute to scatter and then set the mode attribute to “lines”, “lines+markers”, or “lines+markers+text”. Keeping this in mind, let’s get started with the tutorial and create some awesome line charts. Creating a Basic Line Chart In this section, we will plot two different scatter traces in the form of line charts using Plotly. The code is very similar to the...

Read More
  • 1
  • 2