andrewnetwork / introd3

A few example D3.js projects.

Introduction to D3.js

Andrew Ribeiro - [email protected]

Talk given July 2018 to Danbury AI

Often when doing research in machine learning you need to visualize your data and results to gain insights. In addition,publications like https://distill.pub show us how much value well put together visualizations can add to the exposition of machine learning research. In this talk we will introduce the basics of a popular library for creating robust web-based data visualizations: D3.js.

Google Slides

Code

Embedded_Template

A basic project template.

This project does not require node.js or knowledge of modern JavaScript development practices. You should start here if you are a JavaScript novice.

PseudoShop

Produces a table of data sampled from a hard coded probability distribution. This project demonstrates the basic principles of using D3.js bind data to the DOM and perform data-driven transformations.

Live Demo

StockSim

A stock simulator. Shows you how to make line graphs for time series data.

Live Demo

Webpack_Template

This folder contains a webpack template project. You can copy this folder and use it as a base for your project. It was used as the template project for the following projects.

CSV_Viewer

Drag and drop a CSV file into the browser and have d3 read it in transform the data to HTML.

Live Demo

MNIST

Interactively view 55,000 MNIST digits. This project shows how image data can be rendered with D3 in the SVG canvas, how to make animations, and how to use input elements to interact with your visualization.

Live Demo