Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>  
   <div id="chart">
    </div>
  </div>
</body>
</html>
 
var data = [
  {
    "item":1,
    "value":313400,
    "group":1
  },
  {
    "item":2,
    "value":313400,
    "group":1
  },
  {
    "item":3,
    "value":313400,
    "group":1
  },
  {
    "item":4,
    "value":313400,
    "group":1
  },
  {
    "item":5,
    "value":313400,
    "group":1
  },
  {
    "item":1,
    "value":94020,
    "group":2
  },
  {
    "item":2,
    "value":94020,
    "group":2
  },
  {
    "item":4,
    "value":94020,
    "group":2
  },
  {
    "item":5,
    "value":94020,
    "group":2
  },
  {
    "item":2,
    "value":3134,
    "group":3
  },
  {
    "item":3,
    "value":3134,
    "group":3
  },
  {
    "item":4,
    "value":3134,
    "group":3
  },
  {
    "item":5,
    "value":3134,
    "group":3
  },
  {
    "item":1,
    "value":62680,
    "group":4
  },
  {
    "item":2,
    "value":62680,
    "group":4
  },
  {
    "item":3,
    "value":62680,
    "group":4
  },
  {
    "item":4,
    "value":62680,
    "group":4
  },
  {
    "item":1,
    "value":3134,
    "group":5
  },
  {
    "item":3,
    "value":3134,
    "group":5
  },
  {
    "item":4,
    "value":3134,
    "group":5
  },
  {
    "item":5,
    "value":3134,
    "group":5
  },
  {
    "item":1,
    "value":156700,
    "group":6
  },
  {
    "item":2,
    "value":156700,
    "group":6
  },
  {
    "item":3,
    "value":156700,
    "group":6
  },
  {
    "item":5,
    "value":156700,
    "group":6
  },
  {
    "item":1,
    "value":31340,
    "group":7
  },
  {
    "item":3,
    "value":31340,
    "group":7
  },
  {
    "item":5,
    "value":31340,
    "group":7
  },
  {
    "item":1,
    "value":188040,
    "group":8
  },
  {
    "item":4,
    "value":188040,
    "group":8
  },
  {
    "item":5,
    "value":188040,
    "group":8
  },
  {
    "item":2,
    "value":219380,
    "group":9
  },
  {
    "item":4,
    "value":219380,
    "group":9
  },
  {
    "item":5,
    "value":219380,
    "group":9
  },
  {
    "item":2,
    "value":31340,
    "group":10
  },
  {
    "item":3,
    "value":31340,
    "group":10
  },
  {
    "item":5,
    "value":31340,
    "group":10
  },
  {
    "item":3,
    "value":125360,
    "group":11
  },
  {
    "item":4,
    "value":125360,
    "group":11
  },
  {
    "item":5,
    "value":125360,
    "group":11
  },
  {
    "item":1,
    "value":250720,
    "group":12
  },
  {
    "item":2,
    "value":250720,
    "group":12
  },
  {
    "item":4,
    "value":250720,
    "group":12
  },
  {
    "item":1,
    "value":94020,
    "group":13
  },
  {
    "item":2,
    "value":94020,
    "group":13
  },
  {
    "item":3,
    "value":94020,
    "group":13
  },
  {
    "item":2,
    "value":125360,
    "group":14
  },
  {
    "item":3,
    "value":125360,
    "group":14
  },
  {
    "item":2,
    "value":31340,
    "group":15
  },
  {
    "item":4,
    "value":31340,
    "group":15
  },
  {
    "item":1,
    "value":219380,
    "group":16
  },
  {
    "item":5,
    "value":219380,
    "group":16
  },
  {
    "item":3,
    "value":94020,
    "group":17
  },
  {
    "item":5,
    "value":94020,
    "group":17
  },
  {
    "item":1,
    "value":125360,
    "group":18
  },
  {
    "item":4,
    "value":125360,
    "group":18
  },
  {
    "item":4,
    "value":125360,
    "group":19
  },
  {
    "item":5,
    "value":125360,
    "group":19
  },
  {
    "item":1,
    "value":165360,
    "group":20
  },
  {
    "item":2,
    "value":256881,
    "group":21
  },
  {
    "item":3,
    "value":282060,
    "group":22
  },
  {
    "item":4,
    "value":200031,
    "group":23
  },
  {
    "item":5,
    "value":180000,
    "group":24
  },
  {
    "item":1,
    "value":0,
    "group":25
  },
  {
    "item":2,
    "value":0,
    "group":25
  },
  {
    "item":3,
    "value":0,
    "group":25
  },
  {
    "item":4,
    "value":0,
    "group":25
  },
  {
    "item":5,
    "value":0,
    "group":25
  }
];
​
var margin = {  top: 30, right: 10, bottom: 100, left: 75},
    chartWidth = 1000,
    chartHeight = 250,
    gridSize = 40,
    groupPadding = 30,
    colors = ['rgb(224,236,244)','rgb(191,211,230)','rgb(158,188,218)','rgb(140,150,198)','rgb(140,107,177)','rgb(136,65,157)','rgb(129,15,124)','rgb(77,0,75)'],
    colorScale = null,
    minValue = 0,
    maxValue = 0;
    
// min/max value
minValue = d3.min(data, function (d) { return d.value; });
maxValue = d3.max(data, function (d) { return d.value; });
​
// color scale
colorScale = d3.scale.quantize()
    .domain([minValue, maxValue])
    .range(colors);
​
// build the chart
buildChart();
​
function  buildChart() {
    console.log("Building chart...");
​
    // groups
    var firstGroup = data[0].group;
    var lastGroup = data[data.length - 1].group;
​
    // markers
    var section1StartMarkerX = 0;
    var section1EndMarkerX = 0;
    var section2StartMarkerX = 0;
    var section2EndMarkerX = 0;
    var section3StartMarkerX = 0;
    var section3EndMarkerX = 0;
​
    console.log("firstGroup: " + firstGroup);
    console.log("lastGroup: " + lastGroup);
​
    var width = chartWidth - margin.left - margin.right,
        height = chartHeight - margin.top - margin.bottom,
        items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
​
    gridSize = (width - (groupPadding * 2)) / data[data.length - 1].group;
​
    // svg
    var svg = d3.select("#chart").append("svg")
        .attr({
            width: width + margin.left + margin.right,
            height: height + margin.top + margin.bottom
        })
        .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
​
    // item labels
    var itemLabels = svg.append("g").selectAll(".itemLabel")
        .data(items)
        .enter()
        .append("text")
        .text(function (d) { return d; })
        .attr({
            x: 0,
            y: function (d, i) { return i * gridSize; },
            transform: "translate(-50, " + gridSize / 1.5 + ")",
            "class": "itemLabel"
        })
        .style("text-anchor", "middle");
​
    // chart
    var chart = svg.append("g").selectAll(".item")
        .data(data)
        .enter()
        .append("rect")
        .attr({
            x: function (d, i) {
                var padding = 0;
​
                // account for gap between "section 1" and "section 2"
                if (d.group != firstGroup && d.group != lastGroup) {
                    padding = groupPadding;
                // account for gap between "section 2" and "section 3" ranges
                } else if (d.group == lastGroup) {
                    // x value will need to be double padding to account for both gaps
                    padding = groupPadding * 2;
                    
                    // store location where the "section 2" range ends
                    section2EndMarkerX = (d.group - 1) * gridSize + groupPadding;
                }
​
                console.log("x: " + (d.group - 1) * gridSize + padding);
                
                return (d.group - 1) * gridSize + padding;
            },
            y: function (d) { return (d.item - 1) * gridSize; },
            //rx: 4,
            //ry: 4,
            width: gridSize,
            height: gridSize,
            fill: colors[0],
            "class": "bordered"
        });     
​
    // chart color transition
    chart.transition().duration(1000)
        .style("fill", function (d) {
            if (d.group != lastGroup) {
                return colorScale(d.value);
            } else {
                return "#e4e4e4";
            }
        });
  
    // title
  chart.append("title").text(function(d) { return formatNumber(d.value); });
​
    // THIS IS WHERE IT ALL GETS  A BIT FUZZY (ie. dirty)
  
    // set the rest of the markers - section2EndMarkerX alread set
    section1StartMarkerX = 0;
    section1EndMarkerX = 0 + gridSize;
    section2StartMarkerX = section1EndMarkerX + groupPadding;
    section3StartMarkerX = section2EndMarkerX + groupPadding;
    section3EndMarkerX = section3StartMarkerX + gridSize;
    section3EndMarkerX = section3StartMarkerX + gridSize;
​
    console.log("section1StartMarkerX: " + section1StartMarkerX);
    console.log("section1EndMarkerX: " + section1EndMarkerX);
    console.log("section2StartMarkerX: " + section2StartMarkerX);
    console.log("section2EndMarkerX: " + section2EndMarkerX);
    console.log("section3StartMarkerX: " + section3StartMarkerX);
    console.log("section3EndMarkerX: " + section3EndMarkerX);
​
    var lineHeight = 7;
    var lineY = chartHeight - 50;
​
    var selectedMarkerCoordinates = [
        {
            x: section1StartMarkerX,
            y: lineY - lineHeight
        },
        {
            x: section1StartMarkerX,
            y: lineY
        },
        {
            x: section1EndMarkerX,
            y: lineY
        },
        {
            x: section1EndMarkerX,
            y: lineY - lineHeight
        }
    ];
​
    var section2MarkerCoordinates = [
        {
            x: section2StartMarkerX,
            y: lineY - lineHeight
        },
        {
            x: section2StartMarkerX,
            y: lineY
        },
        {
            x: section2EndMarkerX,
            y: lineY
        },
        {
            x: section2EndMarkerX,
            y: lineY - lineHeight
        }
    ];
​
    var section3MarkerCoordinates = [
        {
            x: section3StartMarkerX,
            y: lineY - lineHeight
        },
        {
            x: section3StartMarkerX,
            y: lineY
        },
        {
            x: section3EndMarkerX,
            y: lineY
        },
        {
            x: section3EndMarkerX,
            y: lineY - lineHeight
        }
    ];
​
    var line = d3.svg.line()
        .interpolate("interpolate")
        .x(function (d, i) {
            console.log("d:" + d.x);
            return d.x;
        })
        .y(function (d) { return d.y; });
​
    var selectedMarkerLine = svg.append("g").append("path")
        .attr({
            d: line(selectedMarkerCoordinates),
            stroke: "#333333",
            "stroke-width": 1,
            fill: "none"
        });
​
    var section2MarkerLine = svg.append("g").append("path")
        .attr({
            d: line(section2MarkerCoordinates),
            stroke: "#333333",
            "stroke-width": 1,
            fill: "none"
        });
​
    var section3MarkerLine = svg.append("g").append("path")
        .attr({
            d: line(section3MarkerCoordinates),
            stroke: "#333333",
            "stroke-width": 1,
            fill: "none"
        });
}
​
function formatNumber(d) {
    var prefix = d3.formatPrefix(d);
    var num = prefix.scale(d).toFixed();
    return num + prefix.symbol.toUpperCase();
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
markerasmuspro
0viewers