Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., the same measure a year ago). Layout inspired by Stephen Few. Implementation based on work by Clint Ivy, Jamie Love of N-Squared Software and Jason Davies. The "update" button randomizes the values slightly to demonstrate transitions.
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
.module { | |
overflow-y: scroll; /* has to be scroll, not auto */ | |
-webkit-overflow-scrolling: touch; | |
} |
A series of related examples:
- Canvas geometric zooming
- Canvas semantic zooming
- SVG geometric zooming
- SVG semantic zooming
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> | |
<meta http-equiv='X-UA-Compatible' content='IE=edge' /> | |
<meta charset="UTF-8"> | |
<title>OpenUI5 Demokit - Apps</title> | |
<script | |
id="sap-ui-bootstrap" | |
type="text/javascript" | |
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" |
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
/** | |
* License (MIT) | |
* | |
* Copyright (c) 2015 Ashish Singh [https://github.com/git-ashish] | |
* | |
* Permission is hereby granted, free of charge, to any person obtaining a copy of | |
* this software and associated documentation files (the "Software"), to deal in | |
* the Software without restriction, including without limitation the rights to | |
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of | |
* the Software, and to permit persons to whom the Software is furnished to do so, |
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
// Credit Christopher Chiche & Clemens Tolboom | |
// - http://stackoverflow.com/a/14426477/2806996 | |
d3.selection.prototype.moveToFront = function() { | |
return this.each(function(){ | |
this.parentNode.appendChild(this); | |
}); | |
}; | |
d3.selection.prototype.moveToBack = function() { | |
return this.each(function() { |
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> | |
<meta charset="utf-8"> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var w = 960, | |
h = 500, | |
nodes = [], | |
node; |
Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.
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> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style> | |
body { margin:0; padding:0; } | |
#map { width:960px; height:500px; background:cyan; } | |
</style> | |
</head> | |
<body> |