Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active March 22, 2023 13:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbostock/3e115519a1b495e0bd95 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbostock/3e115519a1b495e0bd95 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. mbostock revised this gist Oct 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -37,7 +37,7 @@
    <canvas width="900" height="1"></canvas>
    <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var white = d3.rgb("white"),
  3. mbostock revised this gist Jun 8, 2015. 2 changed files with 54 additions and 17 deletions.
    71 changes: 54 additions & 17 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,31 +2,68 @@
    <meta charset="utf-8">
    <style>

    canvas {
    .axis path,
    .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
    }

    .axis text {
    font: 10px sans-serif;
    }

    #c .tick:last-of-type text {
    display: none;
    }

    .channel canvas {
    float: left;
    width: 960px;
    height: 166px;
    border-bottom: solid 1px #fff;
    margin: 40px 30px 0 30px;
    width: 900px;
    height: 90px;
    }

    </style>
    <canvas id="l" width="960" height="1"></canvas>
    <canvas id="a" width="960" height="1"></canvas>
    <canvas id="b" width="960" height="1"></canvas>
    <div class="channel" id="h">
    <canvas width="900" height="1"></canvas>
    <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
    </div>
    <div class="channel" id="c">
    <canvas width="900" height="1"></canvas>
    <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
    </div>
    <div class="channel" id="l">
    <canvas width="900" height="1"></canvas>
    <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <script>

    var white = d3.rgb("white"),
    black = d3.rgb("black");
    black = d3.rgb("black"),
    width = d3.select("canvas").property("width");

    var channels = {
    h: {extent: [0, 360], x: 480},
    c: {extent: [0, 100], x: 480},
    l: {extent: [0, 150], x: 480}
    h: {scale: d3.scale.linear().domain([0, 360]).range([0, width]), x: width / 2},
    c: {scale: d3.scale.linear().domain([0, 100]).range([0, width]), x: width / 2},
    l: {scale: d3.scale.linear().domain([0, 150]).range([0, width]), x: width / 2}
    };

    var canvas = d3.selectAll("canvas")
    .data(d3.entries(channels))
    var channel = d3.selectAll(".channel")
    .data(d3.entries(channels));

    channel.select(".axis")
    .each(function(d) { d3.select(this).call(d3.svg.axis().scale(d.value.scale).orient("bottom")); })
    .append("text")
    .attr("x", width)
    .attr("y", 9)
    .attr("dy", ".72em")
    .style("text-anchor", "middle")
    .style("text-transform", "uppercase")
    .text(function(d) { return d.key; });

    var canvas = channel.select("canvas")
    .call(d3.behavior.drag().on("drag", dragged))
    .each(render);

    @@ -42,9 +79,9 @@
    i = -1;

    var current = d3.hcl(
    channels.h.extent[0] + channels.h.x / width * (channels.h.extent[1] - channels.h.extent[0]),
    channels.c.extent[0] + channels.c.x / width * (channels.c.extent[1] - channels.c.extent[0]),
    channels.l.extent[0] + channels.l.x / width * (channels.l.extent[1] - channels.l.extent[0])
    channels.h.scale.invert(channels.h.x),
    channels.c.scale.invert(channels.c.x),
    channels.l.scale.invert(channels.l.x)
    );

    for (var x = 0, v, c; x < width; ++x) {
    @@ -53,7 +90,7 @@
    } else if (x === d.value.x - 1) {
    c = black;
    } else {
    current[d.key] = d.value.extent[0] + x / (width - 1) * (d.value.extent[1] - d.value.extent[0]);
    current[d.key] = d.value.scale.invert(x);
    c = d3.rgb(current);
    }
    image.data[++i] = c.r;
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  4. mbostock created this gist Jun 8, 2015.
    68 changes: 68 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    canvas {
    float: left;
    width: 960px;
    height: 166px;
    border-bottom: solid 1px #fff;
    }

    </style>
    <canvas id="l" width="960" height="1"></canvas>
    <canvas id="a" width="960" height="1"></canvas>
    <canvas id="b" width="960" height="1"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <script>

    var white = d3.rgb("white"),
    black = d3.rgb("black");

    var channels = {
    h: {extent: [0, 360], x: 480},
    c: {extent: [0, 100], x: 480},
    l: {extent: [0, 150], x: 480}
    };

    var canvas = d3.selectAll("canvas")
    .data(d3.entries(channels))
    .call(d3.behavior.drag().on("drag", dragged))
    .each(render);

    function dragged(d) {
    d.value.x = Math.max(0, Math.min(this.width - 1, d3.mouse(this)[0]));
    canvas.each(render);
    }

    function render(d) {
    var width = this.width,
    context = this.getContext("2d"),
    image = context.createImageData(width, 1),
    i = -1;

    var current = d3.hcl(
    channels.h.extent[0] + channels.h.x / width * (channels.h.extent[1] - channels.h.extent[0]),
    channels.c.extent[0] + channels.c.x / width * (channels.c.extent[1] - channels.c.extent[0]),
    channels.l.extent[0] + channels.l.x / width * (channels.l.extent[1] - channels.l.extent[0])
    );

    for (var x = 0, v, c; x < width; ++x) {
    if (x === d.value.x) {
    c = white;
    } else if (x === d.value.x - 1) {
    c = black;
    } else {
    current[d.key] = d.value.extent[0] + x / (width - 1) * (d.value.extent[1] - d.value.extent[0]);
    c = d3.rgb(current);
    }
    image.data[++i] = c.r;
    image.data[++i] = c.g;
    image.data[++i] = c.b;
    image.data[++i] = 255;
    }

    context.putImageData(image, 0, 0);
    }

    </script>
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.