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.
Tom Roth puzzler10
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| height: 700 |
This is an example of how to change the attributes of a SVG element through a HTML input. It is not fully bug tested - near the edges of the graph, the rectangle can get "stuck".
See http://www.puzzlr.org/ for more d3 related fun!
This was made as an example of how to add elements to a SVG container upon mouse-click. Click in the rectangle and see what happens!
See http://www.puzzlr.org/?p=46 for a more detailed explanation and walkthrough of the code.
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.
This is a simple exploration of a stacked bar chart.
It can also be seen as a basic example of d3's stack layout.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| margin: auto; | |
| position: relative; | |
| width: 960px; | |
| } |
This is a basic force directed graph using version 4 of d3. Find the tutorial of how to make it here.
Example of using version 4 of d3.js to drag circles around the screen. Want to learn this? Read this.
OlderNewer