t-viSNE: Interactive Assessment and Interpretation of t-SNE Projections
https://doi.org/10.1109/TVCG.2020.2986996
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
635 lines
17 KiB
635 lines
17 KiB
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<head>
|
|
|
|
|
|
<meta name="author" content="Susie Lu">
|
|
<meta name="description" content="Tired of making legends for your data visualizations? This is a component for d3 that allows you to reuse the scales you’ve made for your visualization to quickly add a legend.">
|
|
<link rel="canonical" href="http://d3-legend.susielu.com">
|
|
|
|
|
|
<link href='http://fonts.googleapis.com/css?family=Cardo:400,700' rel='stylesheet' type='text/css'>
|
|
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="minimal-ui.min.css">
|
|
<link rel="stylesheet" href="prism.css">
|
|
|
|
<style>
|
|
svg {
|
|
padding: 10px 15px;
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
background: white;
|
|
border: 1px solid $grey;
|
|
}
|
|
|
|
pre[class*="language-"]{
|
|
margin-top: 0px;
|
|
margin-bottom: 30px;
|
|
border: 1px solid #E4E4E4;
|
|
}
|
|
|
|
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
|
|
color: #323232;
|
|
}
|
|
|
|
.token.function {
|
|
color: #989898;
|
|
}
|
|
|
|
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
|
|
color: #00993C;
|
|
}
|
|
|
|
h4 {
|
|
display: inline-block;
|
|
}
|
|
|
|
strong {
|
|
color: #272727;
|
|
}
|
|
|
|
text {
|
|
font: 12px sans-serif;
|
|
}
|
|
|
|
hr {
|
|
border-top: 1px solid #999;
|
|
}
|
|
|
|
table tbody tr:not(:last-child) td{
|
|
border-bottom: 2px solid #E7E7E7;
|
|
}
|
|
|
|
table tbody td:not(:last-child), table thead th:not(:last-child) {
|
|
border-right: 2px solid #e7e7e7
|
|
}
|
|
|
|
table td:not(:first-child){
|
|
width: 60px;
|
|
}
|
|
|
|
table td.included{
|
|
background-color: rgb(102, 178, 155);
|
|
}
|
|
|
|
@media only screen and (max-width: 480px){
|
|
table {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
#contents ul li {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.legendSize rect, .legendSize circle{
|
|
fill: rgb(46, 73, 123);
|
|
}
|
|
|
|
|
|
.legendSizeHorz circle{
|
|
stroke: rgb(71, 187, 94);
|
|
fill: none;
|
|
}
|
|
|
|
.legendSizeLine line {
|
|
stroke: rgb(46, 73, 123);
|
|
}
|
|
|
|
.legendSymbol path {
|
|
fill: rgb(64, 108, 189);
|
|
}
|
|
|
|
|
|
.q0-9 { fill:rgb(247,251,255); }
|
|
.q1-9 { fill:rgb(222,235,247); }
|
|
.q2-9 { fill:rgb(198,219,239); }
|
|
.q3-9 { fill:rgb(158,202,225); }
|
|
.q4-9 { fill:rgb(107,174,214); }
|
|
.q5-9 { fill:rgb(66,146,198); }
|
|
.q6-9 { fill:rgb(33,113,181); }
|
|
.q7-9 { fill:rgb(8,81,156); }
|
|
.q8-9 { fill:rgb(8,48,107); }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<div class="txt-center">
|
|
<h1 class="column12">d3 SVG Legend</h1>
|
|
<div class="column6 prefix3">
|
|
<p>Tired of making legends for your data visualizations? Me too, enjoy.</p>
|
|
<p>A library to make legends in svg-land easy as pie.</p>
|
|
<img src="d3-legend.jpg">
|
|
<p>By <a href="http://www.susielu.com">Susie Lu</a></p>
|
|
</div>
|
|
<nav class="column6 prefix3 nav nav-small">
|
|
<a href="#usage">Usage</a>
|
|
<a href="#contents">Contents</a>
|
|
<a href="#color">Color</a>
|
|
<a href="#size">Size</a>
|
|
<a href="#symbol">Symbol</a>
|
|
<a href="#summary">Summary of Functions</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
<section id="usage">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h2>Usage</h2>
|
|
|
|
<h3>Client-side</h3>
|
|
|
|
<h4>CDN</h4>
|
|
<p>You can add latest version of d3-legend hosted on cdnjs.<p>
|
|
<a href="https://cdnjs.com/libraries/d3-legend">https://cdnjs.com/libraries/d3-legend</a>
|
|
|
|
<h4>Include the file directly</h4>
|
|
<p>You must include the <a href="http://d3js.org/">d3 library</a> before including the legend file. Then you can simply add the compiled js file to your website:</p>
|
|
<ul>
|
|
<li><a href="https://raw.githubusercontent.com/susielu/d3-legend/master/d3-legend.min.js">All legends</a></li>
|
|
<li><a href="https://github.com/susielu/d3-legend/blob/master/d3-legend.js">All legends - human readable</a></li>
|
|
|
|
</ul>
|
|
|
|
<h3>npm</h3>
|
|
<p>Already using d3? Great! You can add the d3 legend as a node module by running:<p>
|
|
<code>npm i d3-svg-legend -S</code>
|
|
|
|
<p>If not, install both this way:</p>
|
|
<code>npm i d3@^3.0.0 d3-svg-legend -S</code>
|
|
|
|
|
|
<h3>Github + feedback</h3>
|
|
<p>The full source code is available on <a href="https://github.com/susielu/d3-legend">github</a>. I would love to hear from you about any additional features that would be useful, please say hi on twitter <a href="https://www.twitter.com/DataToViz">@DataToViz</a>.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-light" id="contents">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h2>Contents</h2>
|
|
<div id="contents-md"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="" id="color">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h2>Color</h2>
|
|
|
|
<h3 id="color-doc">Documentation</h3>
|
|
<div id="color-md"> </div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-light" id="color-examples">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h3 >Examples</h3>
|
|
|
|
<h4 id="color-quant">Quantile Scale Legend</h4>
|
|
<svg height=200 width=160 id="svg-color-quant"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var quantize = d3.scale.quantize()
|
|
.domain([ 0, 0.15 ])
|
|
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendQuant")
|
|
.attr("transform", "translate(20,20)");
|
|
|
|
var legend = d3.legend.color()
|
|
.labelFormat(d3.format(".2f"))
|
|
.useClass(true)
|
|
.scale(quantize);
|
|
|
|
svg.select(".legendQuant")
|
|
.call(legend);
|
|
</code>
|
|
</pre>
|
|
|
|
<h4 id="color-quant">Log Scale Legend</h4>
|
|
<svg height=160 width=100 id="svg-color-log"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var log = d3.scale.log()
|
|
.domain([ 0.1, 100, 1000 ])
|
|
.range(["rgb(46, 73, 123)", "rgb(71, 187, 94)"]);
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendLog")
|
|
.attr("transform", "translate(20,20)");
|
|
|
|
var logLegend = d3.legend.color()
|
|
.cells([0.1, 5, 10, 50, 100, 500, 1000])
|
|
.scale(log);
|
|
|
|
svg.select(".legendLog")
|
|
.call(logLegend);
|
|
|
|
</code>
|
|
</pre>
|
|
|
|
<h4 id="color-linear">Linear Scale Legend - Horizontal</h4>
|
|
<svg height=60 width=200 id="svg-color-linear"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var linear = d3.scale.linear()
|
|
.domain([0,10])
|
|
.range(["rgb(46, 73, 123)", "rgb(71, 187, 94)"]);
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendLinear")
|
|
.attr("transform", "translate(20,20)");
|
|
|
|
var legendLinear = d3.legend.color()
|
|
.shapeWidth(30)
|
|
.orient('horizontal')
|
|
.scale(linear);
|
|
|
|
svg.select(".legendLinear")
|
|
.call(legendLinear);
|
|
</code>
|
|
</pre>
|
|
|
|
<h4 id="color-linear-10">Linear Scale Legend - 10 cells</h4>
|
|
<svg height=60 width=360 id="svg-color-linear-10"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var linear = d3.scale.linear()
|
|
.domain([0,10])
|
|
.range(["rgb(46, 73, 123)", "rgb(71, 187, 94)"]);
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendLinear")
|
|
.attr("transform", "translate(20,20)");
|
|
|
|
var legendLinear = d3.legend.color()
|
|
.shapeWidth(30)
|
|
.cells(10)
|
|
.orient('horizontal')
|
|
.scale(linear);
|
|
|
|
svg.select(".legendLinear")
|
|
.call(legendLinear);
|
|
</code>
|
|
</pre>
|
|
|
|
<h4 id="color-linear-custom">Linear Scale Legend - Custom cells</h4>
|
|
<svg height=60 width=200 id="svg-color-linear-custom"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var linear = d3.scale.linear()
|
|
.domain([0,10])
|
|
.range(["rgb(46, 73, 123)", "rgb(71, 187, 94)"]);
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendLinear")
|
|
.attr("transform", "translate(20,20)");
|
|
|
|
var legendLinear = d3.legend.color()
|
|
.shapeWidth(30)
|
|
.cells([1, 2, 3, 6, 8])
|
|
.orient('horizontal')
|
|
.scale(linear);
|
|
|
|
svg.select(".legendLinear")
|
|
.call(legendLinear);
|
|
</code>
|
|
</pre>
|
|
|
|
<h4 id="color-ordinal">Ordinal Scale Legend - Custom shape</h4>
|
|
<svg height=150 width=70 id="svg-color-ordinal"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var ordinal = d3.scale.ordinal()
|
|
.domain(["a", "b", "c", "d", "e"])
|
|
.range([ "rgb(153, 107, 195)", "rgb(56, 106, 197)", "rgb(93, 199, 76)", "rgb(223, 199, 31)", "rgb(234, 118, 47)"]);
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendOrdinal")
|
|
.attr("transform", "translate(20,20)");
|
|
|
|
var legendOrdinal = d3.legend.color()
|
|
//d3 symbol creates a path-string, for example
|
|
//"M0,-8.059274488676564L9.306048591020996,
|
|
//8.059274488676564 -9.306048591020996,8.059274488676564Z"
|
|
.shape("path", d3.svg.symbol().type("triangle-up").size(150)())
|
|
.shapePadding(10)
|
|
.scale(ordinal);
|
|
|
|
svg.select(".legendOrdinal")
|
|
.call(legendOrdinal);
|
|
</code>
|
|
</pre>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="" id="size">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h2>Size</h2>
|
|
|
|
<h3 id="size-doc">Documentation</h3>
|
|
<div id="size-md"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-light" id="size-examples">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
|
|
<h3>Examples</h3>
|
|
<h4 id="size-linear">Linear Scale Legend - Circles</h4>
|
|
<svg height=100 width=350 id="svg-size-linear"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var linearSize = d3.scale.linear().domain([0,10]).range([10, 30]);
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendSize")
|
|
.attr("transform", "translate(20, 40)");
|
|
|
|
var legendSize = d3.legend.size()
|
|
.scale(linearSize)
|
|
.shape('circle')
|
|
.shapePadding(15)
|
|
.labelOffset(20)
|
|
.orient('horizontal');
|
|
|
|
svg.select(".legendSize")
|
|
.call(legendSize);
|
|
</code>
|
|
</pre>
|
|
|
|
<h4 id="size-line">Linear Scale Legend - Lines</h4>
|
|
<svg height=60 width=380 id="svg-size-line"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var lineSize = d3.scale.linear().domain([0,10]).range([2, 10]);
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendSizeLine")
|
|
.attr("transform", "translate(0, 20)");
|
|
|
|
var legendSizeLine = d3.legend.size()
|
|
.scale(lineSize)
|
|
.shape("line")
|
|
.orient("horizontal")
|
|
//otherwise labels would have displayed:
|
|
// 0, 2.5, 5, 10
|
|
.labels(["tiny", "small", "medium", "large", "grand"])
|
|
.shapeWidth(40)
|
|
.labelAlign("start")
|
|
.shapePadding(10);
|
|
|
|
svg.select(".legendSizeLine")
|
|
.call(legendSizeLine);
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="" id="symbol">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h2>Symbol</h2>
|
|
|
|
<h3 id="symbol-doc">Documentation</h3>
|
|
<div id="symbol-md"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-light" id="symbol-examples">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h3>Examples</h3>
|
|
<h4 id="symbol-ordinal">Ordinal Scale Legend - Custom symbols</h4>
|
|
<svg height=90 width=170 id="svg-symbol-ordinal"></svg>
|
|
<pre class="column6 left-margin right-margin">
|
|
<code class="language-javascript">
|
|
|
|
var triangleU = d3.svg.symbol().type('triangle-up')(),
|
|
circle = d3.svg.symbol().type('circle')(),
|
|
cross = d3.svg.symbol().type('cross')(),
|
|
diamond = d3.svg.symbol().type('diamond')(),
|
|
triangleD = d3.svg.symbol().type('triangle-down')();
|
|
|
|
//example output of d3.svg.symbol().type('circle')();
|
|
//"M0,4.51351666838205A4.51351666838205,4.51351666838205 0 1,1 0,
|
|
//-4.51351666838205A4.51351666838205,4.51351666838205 0 1,1 0,4.51351666838205Z"
|
|
|
|
var symbolScale = d3.scale.ordinal()
|
|
.domain(['a','b','c', 'd', 'e'])
|
|
.range([ triangleU, circle, cross, diamond, triangleD] );
|
|
|
|
var svg = d3.select("svg");
|
|
|
|
svg.append("g")
|
|
.attr("class", "legendSymbol")
|
|
.attr("transform", "translate(20, 20)");
|
|
|
|
var legendPath = d3.legend.symbol()
|
|
.scale(symbolScale)
|
|
.orient("horizontal")
|
|
.title("Symbol Legend Title")
|
|
.on("cellclick", function(d){alert("clicked " + d);});
|
|
|
|
svg.select(".legendSymbol")
|
|
.call(legendPath);
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="summary">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
<h2>Summary of Functions</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Function</th>
|
|
<th>Color</th>
|
|
<th>Size</th>
|
|
<th>Symbol</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>scale</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>cells</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>orient</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>ascending</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>shape</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>shapeWidth</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>shapeHeight</td>
|
|
<td class="included"></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>shapeRadius</td>
|
|
<td class="included"></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>shapePadding</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>useClass</td>
|
|
<td class="included"></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>classPrefix</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>title</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>labels</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>labelAlign</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>labelFormat</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>labelOffset</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>labelDelimiter</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>on</td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
<td class="included"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-light">
|
|
<div class="container">
|
|
<div class="column6 prefix3">
|
|
|
|
<br />
|
|
<p>NOTES</p>
|
|
|
|
<p>Huge thanks to <a href="http://elijahmeeks.com/">Elijah Meeks</a> for discussing ideas and encouraging me to complete this project.</p>
|
|
<p>The styling and layout of this page is made with another project of mine, <a href="http://minimal-ui.susielu.com">minimal-ui.</a></p>
|
|
<p>The fonts on this page are provided by Google Fonts, and created by <a href="https://www.google.com/fonts/specimen/Montserrat">Julieta Ulanovsky</a> and <a href="https://www.google.com/fonts/specimen/Cardo">David Perry</a>.</p>
|
|
<p>Using <a href="http://prismjs.com/">Prism</a> for syntax highlighting.</p>
|
|
<p>And of course, thanks <a href="http://d3js.org/">d3.js</a> for creating such a lovely project and <a href="http://bost.ocks.org/mike/">Mike Bostock</a> for providing <a href="http://bost.ocks.org/mike/chart/">examples</a> on how to make your own components.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script src="prism.js"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
|
|
<script src="d3-legend.min.js"></script>
|
|
|
|
<script src="docs.min.js"></script>
|
|
<script src="ga.js"></script>
|
|
</body>
|
|
|