BBVA API Market
This is the best time in history for dynamic data visualization. The typical dashboard tools available for use as graphics creation programs include Tableau and Qlik, in addition to numerous JavaScript libraries for creating simple visualizations with complex datasets. Today, the perfect combination for this type of analytical productivity is a mixture of the JavaScript libraries D3 and React. D3 is a great option, but React has the potential to multiply its possibilities.
We’ve already discussed D3, but we’ve said less about React, although we also dedicated one article to its features. React is an open code JavaScript library developed by Facebook. These two elements –open code and Facebook– already have enough clout to attract the attention of any front-end developer. But the goal driving its development makes it even more appealing: to create dynamic components that can be reused in different user interfaces. What’s more, it’s a library for development from both the client and server sides. It’s a full-stack library in JavaScript.No hay nada más que darse una breve vuelta por Google Trends para darse cuenta de la explosión en el interés en React. Búsquedas como ‘React’, ‘Reactjs’, ‘React Native’ o ‘Facebook React’ ha explotado literalmente en el gran buscador durante el último año. Ver la curva de crecimiento muestra la atención que ha acaparado:
You only need to take a brief tour of Google Trends to get an idea of the booming interest in React. Searches such as “React”, “Reactjs”, “React Native” and “Facebook React” have mushroomed spectacularly on the giant search engine in the last year. A look at the growth curve reveals the attention it has attracted:
Why does it make sense to incorporate a plugin with React into the visualization works in D3? When a front-end developer creates dynamic graphics in which no kind of subsequent maintenance, purging or scaling will be required, in all likelihood D3 will be more than enough for that finite work. But when these data visualizations are part of a series that will undergo subsequent changes, incorporating React may bring a number of advantages:
render() {
// ...
return (
<g transform={translate}>
<Histogram data={this.props.data}
value={(d) => d.base_salary}
x={0}
y={0}
width={400}
height={200}
title="All" />
<Histogram data={engineerData}
value={(d) => d.base_salary}
x={450}
y={0}
width={400}
height={200}
title="Engineer" />
<Histogram data={programmerData}
value={(d) => d.base_salary}
x={0}
y={220}
width={400}
height={200}
title="Programmer"/>
<Histogram data={developerData}
value={(d) => d.base_salary}
x={450}
y={220}
width={400}
height={200}
title="Developer" />
</g>
)
}
Here you can see the rendering of four histograms with the title, their width and height values, the coordinates (x and y) and the data source for the actual visualization. With the final resulting graphic:
In a connected world, APIs are the glue that keeps all the parts that form our day-to-day lives in place. The same way the power of glue depends on the material it is used on and the knowledge of its properties, APIs are only as useful as their documentation allows for.
There are different solutions to monitor the performance of an API, in terms of traffic, quality and speed of the answers it provides. Detecting faults in the code or quantifying the generated revenues are also some of the options offered by these useful tools.
App users must be aware that a button... is in fact a clickable button. Therefore, app buttons must be designed in such a way that users should feel invited to interact with the interface and actually click on it.
