Skip to content

Instantly share code, notes, and snippets.

@puzzler10
puzzler10 / README.md
Last active May 30, 2016 10:36
Visualising Net Promoter Score (NPS)

Let's say you're a restaurant owner, and you want to see exactly how important good table service is to your business. If you use the NPS system, you will have a number of reviews (possibly many if you own multiple restaruants) with ratings between 0 and 10 and comments.

You categorise each review into a number of predefined categories - good/bad table service, good/bad food, good/bad atmosphere , etc. If you categorise enough of these reviews, then you could fit a multiple linear regression model to quantify exactly just how much good table service affects your NPS score.

This is one way you could visualise these results. You can interpret the above pretty easily - good service adds 30.8 points to your NPS, while a meal that isn't good will take away 45.2 NPS points. You can quickly see how important each factor is.

Note that the values and the categories should not be taken literally - they were simply made up for illustration purposes.

See http://www.puzzlr.org/ for more examples.

@puzzler10
puzzler10 / README.md
Last active May 30, 2016 10:44
Simple Scatter Plot

This is an example of a simple scatterplot with a mouseover tooltip. The data is tracking the speed of building a random forest in R as a function of the number of observations.

See http://www.puzzlr.org/?p=11 for more information.

@puzzler10
puzzler10 / README.md
Last active May 30, 2016 10:46
Simple bar chart

This is an example of a simple bar chart. Most beginners to d3 will build one of these charts at some point.

See http://www.puzzlr.org/?p=25 for the thought process behind this graph.

@puzzler10
puzzler10 / .block
Last active May 30, 2016 10:50
Simple Line Graph
height: 700
@puzzler10
puzzler10 / README.md
Created June 9, 2016 11:27
Simple Stacked Bar Chart

This is a simple exploration of a stacked bar chart.

It can also be seen as a basic example of d3's stack layout.

@puzzler10
puzzler10 / index.html
Created June 14, 2016 08:32
Grouped, Stacked, Scatter and Line
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
@puzzler10
puzzler10 / Readme.md
Last active February 25, 2017 08:11
d3-force: minimal working example

This is a basic force directed graph using version 4 of d3. Find the tutorial of how to make it here.

@puzzler10
puzzler10 / Readme.md
Last active March 6, 2017 11:02
dragable force directed graphs

Dragable force directed graph. Instructions on the dragging mechanism are here.

@puzzler10
puzzler10 / README.md
Last active March 6, 2017 11:22
sticky nodes

Sticky nodes - they stay where they are dragged. Read more about it here

@puzzler10
puzzler10 / README.md
Last active March 18, 2017 22:21
Popcorn graph

This graph combines a strong attractive force between particles and a repelling effect from forceCollide.

This leads to a popcorn effect!

Click here for other examples and here for an explanation of this effect.