Tag Archives: Data Visualization

D3.js — Data Visualization with Javascript for beginners

via D3.js — Data Visualization with Javascript for beginners — Medium.

In many ways, D3.js (aka Data-Driven Documents — JavaScript) was a coding gateway drug for me. Last year, while still wholly unfamiliar with Javascript, I was able to use the library to make a interactive visualization with data from the Harry Ransom Center, where I was a graduate research assistant. D3.js produced beautiful results, gave me a great deal of control over design and display, and was frankly easier to make than a comparable diagram in Adobe Illustrator. I was hooked!

Interactive Data Visualization using D3.js, DC.js, Nodejs and MongoDB

via Interactive Data Visualization using D3.js, DC.js, Nodejs and MongoDB | Anmol Koul.

this blog post is to introduce open source business intelligence technologies and explore data using open source technologies like D3.js, DC.js, Nodejs and MongoDB.
Over the span of this post we will see the importance of the various components that we are using and we will do some code based customization as well.

Reusable Chart Components with React And D3

via Reusable Chart Components with React And D3.

The following should be an introduction to combining D3 with React to create reusable chart components. This is not intended to be an introduction into D3 nor React, there is a large number of resources to help getting off the ground with either frameworks, for example this for D3 and this for React.

D3s approach to data visualization fits well with the React way of building UI components and App structuring. React encourages to figure out how to structure a number of components to enforce a data flow that moves from top down, meaning that lower level components receive data and render it at best and only keep state if needed, but never manipulating any data that might affect the higher up components.

Another strong correlation between the libraries is their respective component lifecycle. D3 has enter,update and exit.

React has componentWillUpdate, componentDidUpdate and componentWillUnmount, enabling us to map the D3 lifecycle directly to the React one.

The following is just an experiment to see how far we can replace the D3 rendering with React.

Video: Data Visualization for the Web Using Google Charts

Learn the basics of data visualization and charts to present data sets on the web with no programming. Kristian Allen from the Digital Library Program at UCLA Library will cover the proper format to structure your data for use with common web tools and review some popular charting and visualization frameworks available, including Google Charts and Fusion tables.

Visualization is for Sharing: Using React for Portable Data Visualization

via Visualization is for Sharing: Using React for Portable Data Visualization | Viget.

Data visualization has become a more frequent element of our work at Viget. Be it simple pie charts or beautiful maps displaying jersey sales, visually representing data in a compelling way is a great device for storytelling and provides rich fuel for social sharing.

Yet making these illustrations fast, shareable, and accessible has its challenges. Although browsers are powerful, tightly coupling the rendering process to them greatly complicates the generation of images that can be shared or saved for presentations.

Video: ReactJS Conf Round-up 2015

via React.js Conf Round-up 2015 | React.


The conference is over, but the conversation has just begun.

Mihai Parparita detailed his efforts to hack his way to a React.js Conf ticket; James Longblogged about his first encounter with React Native; Eric Florenzano talked about how he perceives the impact of Relay, GraphQL, and React Native on software development;Margaret Staples blogged about her experience of being on-campus at Facebook HQ; Jeff Barczewski tied his experience of attending the conference up with a bow in this blog post filled with photos, videos, and links; Kevin Old left us with his takeaways; Paul Wittmannfound React Native freshly on his radar; and finally, undeterred by not being able to attend the conference in person, Justin Ball summarized it from afar.

And, in case you missed a session, you can borrow Michael Chan’s drawings, Mihai Parparita’s summary, or Shaohua Zhou’s day 1 / day 2 notes.

Keynote #

Tom Occhino opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?

Tweaking in real time

Brenton Simpson showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and Ambidex.

Abstract Syntax Trees

Gurdas Nijor showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.

Relay and GraphQL

Daniel Schafer and Jing Chen showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.


James Long explores what might happen if we introduce channels, a new style of coordinating actions, to React.

React Router

Michael Jackson reminded us that URLs should be part of our design process, and showed us how react-router can help to manage the transitions between them.

Full-stack Flux

Pete Hunt showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.


Jason Bonta showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on FixedDataTable.

FormatJS and react-intl

Eric Ferraiuolo showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.


Ryan Florence showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”

React Native

Christopher Chedeau showed us how to bring the developer experience of working with React on the web to native app development, using React Native.


Andrew Rota explained how React and Web Components can work together, and how to avoid some common pitfalls.


Lee Byron led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps Javascript in general.

Beyond the DOM

Jafar Husain told us a story about how Netflix was able to push React into places where the DOM could not go.

Data Visualization

Zach Nation showed us how we can produce visualizations from over 45 million data points without breaking a sweat.

React Refracted

David Nolen gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.

Flux Panel

Bill Fisher coordinated a Flux panel together with Michael Ridgway, Spike Brehm, Andres Suarez, Jing Chen, Ian Obermiller, and Kyle Davis.

Component communication#

Bonnie Eisenman led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.

Flow and TypeScript

James Brantly demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.

Core Team Q&A

Tom Occhino, Ben Alpert, Lee Byron,Christopher Chedeau, Sebastian Markbåge, Jing Chen, and Dan Schaferclosed the conference with a Q&A session.

Eight New Ideas From Data Visualization Experts

via Plotly — Eight New Ideas From Data Visualization Experts.

This post summarizes and visualizes eight key ideas we’ve heard from data visualization experts. Check out our first Case Study to learn more about using Plotly Enterprise on-premise, on your servers. To get started on free online graphing like in this post, check out our tutorials.

Make Interactive Graphs

Pictures of graphs in PowerPoints, dashboards, and emails can be dull. Viewers get value when they can see data with their mouse, zoom, filter, drill down, and study graphs. Plotly uses D3.js so all your graphs are interactive. The graph above for example models the historical temperature record and associated temperature changes contributed by each factor.

Make Graphs With IPython Widges In Plotly & Domino

Our friends at Domino wrote a blog post showing how you or a developer on your team can useDomino, Plotly’s APIs, and IPython Notebooks to add sliders, filters, and widgets to graphs and take exploration a new direction. See our tutorial to learn more.

Reproducible Research with Plotly & Overleaf

Institutional memory is crucial for research. But data is easily lost if it’s on a thumbdrive, in an email, or on a desktop. The team at Overleaf is enabling reproducible, online publication. You can import Plotly graphs into Overleaf papers and write together.

Plotly graphs are mobile-optimized, reproducible, downloadable, and web-based. Just add the URL in your presentation or Overleaf project to share it all. For examples, for the climate graph above:

Use Statistical Graphs

Graphing pros love using statisical graphs like histograms, heatmaps, 2D histograms, and box plots to investigate and explain data. Below, we’re showing a log axis plot, a boxplot, and a histogram. The numbers are Facebook users per country. Curious? We have tutorials.

Use 3D Graphs

Below see the prestige, education, and income of a few professions, sorted by gender. 3D graphing enables a whole new dimension of interactivity. The points are projected on the outside of the graph. Click and hold to flip the plot or toggle to zoom. Click here to visit the graph. Or takea 3D graphing tutorial.

Embed Interactive Graphs With Dashboards

In a fast-moving world, it’s crucial to get the most recent data. That’s why we make it easy to embed updating graphs in dashboards, like the temperature graph below of San Francisco and Montréal (live version here). See our tutorials on updating graphs, interactive dashboards or graphing from databases.

Customize Interactive Graphs With JavaScript

For further customizations, use our JavaScript API. You (or a developer on your team) can build custom controls that change anything about an embedded Plotly graph

Embed Interactive Graphs With Shiny

If you are an R user, you can render and embed interactive ggplot2 graphs in Shiny with Plotly. See our tutorial.