background preloader

Tutorials · mbostock/d3 Wiki

Tutorials · mbostock/d3 Wiki
Wiki ▸ Tutorials Please feel free to add links to your work!! Tutorials may not be up-to-date with the latest version 4.0 of D3; consider reading them alongside the latest release notes, the 4.0 summary, and the 4.0 changes. Introductions & Core Concepts Specific Techniques D3 v4 Blogs Books Courses D3.js in Motion (Video Course)Curran Kelleher, Manning Publications, September 2017D3 4.x: Mastering Data Visualization Nick Zhu & Matt Dionis, Packt. Talks and Videos Meetups Research Papers D3: Data-Driven DocumentsMichael Bostock, Vadim Ogievetsky, Jeffrey HeerIEEE Trans. Related:  Datavisualisation

Creating Animated Bubble Charts in D3 - Jim Vallandingham Update: I moved the code to its own github repo - to make it easier to consume and maintain. Update #2 I’ve rewritten this tutorial in straight JavaScript. So if you aren’t that in to CoffeeScript, check the new one out! Recently, the New York Times featured a bubble chart of the proposed budget for 2013 by Shan Carter . As FlowingData commenters point out , the use of bubbles may or may not be the best way to display this dataset. In this post, we attempt to tease out some of the details of how this graphic works. #Simple Animated Bubble Chart In order to better understand the budget visualization, I’ve created a similar bubble chart that displays information about what education-based donations the Gates Foundation has made. You can see the full visualization here And the visualization code is on github **Warning Coffeescript** The example is written in [CoffeeScript]( as I find it much easier to read and write than javascript. #D3’s Force Layout #nodes #gravity #alpha

Folium: Python Data. Leaflet.js Maps. — Folium 0.1.2 documentation Folium builds on the data wrangling strengths of the Python ecosystem and the mapping strengths of the Leaflet.js library. Manipulate your data in Python, then visualize it in on a Leaflet map via Folium. Concept Folium makes it easy to visualize data that’s been manipulated in Python on an interactive Leaflet map. It enables both the binding of data to a map for choropleth visualizations as well as passing Vincent/Vega visualizations as markers on the map. The library has a number of built-in tilesets from OpenStreetMap, Mapbox, and Stamen, and supports custom tilesets with Mapbox or Cloudmade API keys. Base Maps To create a base map, simply pass starting coordinates to Folium, then create the map: import foliummap_osm = folium.Map(location=[45.5236, -122.6750])map_osm.create_map(path='osm.html') Live example Folium defaults to 960 x 500 pixels (to make it easy to generate maps for bl.ocks ). map = folium.Map(location=[45.5236, -122.6750], width=500, height = 300) Tilesets Example: Markers

Vega Sankey Diagram Source: Department of Energy & Climate Change, Tom Counsell. Sankey diagrams visualize the magnitude of flow between nodes in a network. This intricate diagram shows a possible scenario for UK energy production and consumption in 2050: energy supplies are on the left, and demands are on the right. Intermediate nodes group related forms of production and show how energy is converted and transmitted before it is consumed (or lost!). The thickness of each link encodes the amount of flow from source to target. This example is built with D3’s Sankey plugin. The fully automatic layout is convenient for rapid visualization—positioning nodes manually is tedious! Many thanks to Tom Counsell, whose Sankey library provided inspiration for this example.

Interactive Data Visualization for the Web Copyright © 2013 Scott Murray Printed in the United States of America. O’Reilly books may be purchased for educational, business, or sales promotional use. Nutshell Handbook, the Nutshell Handbook logo, the cover image, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

D3js Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai faite sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie. A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Manipuler ou créer une div avec d3.js Ajouter et manipuler un rectangle SVG Dessiner plusieurs éléments dans un groupe svg Gérer des données au format JSON et dessiner en fonction de ces données Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class “node”. Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter(). selectAll() data() La methode data() permet de “binder” (attacher) des données à des éléments sélectionnés par la methode selectAll(). enter() Ressources

Method: Data visualization with D3.js and python - part 1 - Next Genetics View the demo hereHTML source is at the bottom of the post Computers and the internet have changed academia in dramatic ways from greater sharing of data to a larger sense of community. Science journals are now all digitized and available online either through your web browser or downloadble as a .pdf. Even with all the technology available for presenting data, most published papers still only contain static figures. Science papers are generally viewed on a computer through a web browser like Chrome, Firefox, or Safari which use javascript/html/css for displaying information. Here are a bunch of examples of interactive figures made using browser technologies, specifically D3.js. How a web page displays information A brief primer on javascript, html, css, and how they are interpreted by the browser: HTML is essentially a templating language. Here is an example of a web page displaying a red 'hello world' link. I am not going to go into more detail than this about scripting for the browser.

Predicting future returns of trading algorithms: Bayesian cone | Quantopian Blog Authors: Sepideh Sadeghi and Thomas Wiecki Foreword by Thomas This blog post is the result of a very successful research project by Sepideh Sadeghi, a PhD student at Tufts who did an internship at Quantopian over the summer 2015. Follow her on twitter here. All of the models discussed here-within are available through our newly released library for finance performance and risk analysis called pyfolio. When evaluating trading algorithms we generally have access to backtest results over a couple of years and a limited amount of paper or real money traded data. Here, we will briefly introduce two Bayesian models that can be used for predicting future daily returns. All of these models are available through our newly released library for finance performance and risk analysis called pyfolio. How do we get the model inputs? At Quantopian we have built a world-class backtester that allows everyone with basic Python skills to write a trading algorithm and test it on historical data. Normal model

D3.js D3.js (or just D3 for Data-Driven Documents) is a JavaScript library that uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers. It is a tool for data visualization in W3C-compliant computing, making use of the widely implemented Scalable Vector Graphics (SVG), JavaScript, HTML5, and Cascading Style Sheets (CSS3) standards. It is the successor to the earlier Protovis framework.[2] In contrast to many other libraries, D3 allows great control over the final visual result.[3] Its development was noted in 2011,[4] as version 2.0.0 was released in August 2011.[5] Context[edit] The first web browsers appeared in the early 1990s. At the same time, researchers, engineers, and practitioners from various branches of engineering and science looked for tools that would enable web browsers to visually present data within web pages. In 2011, the development of Protovis was stopped to focus on a new project, D3.js. Selections[edit]