Old school D3 from simpler times

All examples By author By category About

katielong

Full window Github gist

d3-legend v3 practice

<!DOCTYPE html>
<meta charset = "utf-8">

<style>
</style>
<script src = "https://d3js.org/d3.v3.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js"></script>
<body>
    <p>d3-legend practice</p>
    <svg style="width: 1000px; height:600px"></svg>
</body>

<script>
    var svg = d3.select("svg");
    // LINEAR
    var linearV = d3.scale.linear()
                        .domain([0,1000])
                        .range(['rgb(46,73,123)', 'rgb(71, 187, 94)']);
    svg.append("g")
        .attr("class", "legendV")
        .attr("transform", "translate(10,50)");
    
    var legendV = d3.legend.color()
                              .shapeWidth(20)
                              .cells(10)
                              .title("Linear")
                              .labelFormat(d3.format('.0f'))
                              .scale(linearV);
    svg.select(".legendV")
        .call(legendV);
    
    // QUANTIZE
    var indexToColor = d3.scale.linear()
                    .domain([0, 10])
                    .range(['rgb(46,73,123)', 'rgb(71, 187, 94)']);
    var range = d3.range(10).map(indexToColor);
    var quant = d3.scale.quantize()
                        .domain([0, 200, 1000])
                        .range(range);
    
    svg.append("g")
        .attr("class", "quantize")
        .attr("transform", "translate(200,50)");
    
    var legendQuant = d3.legend.color()
                        .title("Quantize")
                        .labelFormat(d3.format('.0f'))
                        .scale(quant);
    
    svg.select(".quantize").call(legendQuant);

// QUANTILE: 200 as 50%
    var quantl = d3.scale.quantile()
                    .domain([0,200,1000])
                    .range(range);
    svg.append("g")
        .attr("class", "quantile")
        .attr("transform", "translate(400, 50)");
    
    var legendQuantl = d3.legend.color()
                            .scale(quantl)
                            .title("Quantile(200:50%)")
                            .labelFormat(d3.format('.0f'));
    d3.select(".quantile").call(legendQuantl);

// LOG
    var log = d3.scale.log()
                .domain([0.1, 100, 1000])
                .range(["rgb(46,73,123)", "rgb(71, 187, 94)"]);
    
    svg.append("g")
        .attr("class", "legendLog")
        .attr("transform", "translate(600,50)");
    
    var logLegend = d3.legend.color()
                    .cells([0.1,5,10,50,100,500,1000]) //IMPORTANT
                    .title("Log")
                    .scale(log);
    
    svg.select(".legendLog")
        .call(logLegend);

</script>