<!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .bar rect { fill: #bbb; shape-rendering: crispEdges; } .bar text { fill: #bbb; } .axis path, .axis line { fill: none; stroke: #bbb; shape-rendering: crispEdges; } .clicked { fill: #888; } .not-clicked { fill: #bbb; } </style> <body> <script src="http://d3js.org/d3.v2.min.js?2.10.0"></script> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/util.js"></script> <script> // Generate an Irwin–Hall distribution of 10 random variables. var values = d3.range(1000).map(d3.random.irwinHall(10)); // A formatter for counts. var formatCount = d3.format(",.0f"); var margin = {top: 10, right: 30, bottom: 30, left: 30}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var animals = ['cat', 'cat', 'dog', 'mouse','cat', 'cat', 'dog', 'mouse','cat', 'cat', 'dog', 'mouse','dog', 'mouse','cat', 'cat','dog', 'mouse','cat', 'cat'] var unq_animals = animals.unique(); var scale = d3.scale.ordinal() .domain(unq_animals) .range(d3.range(0, unq_animals.length)); var inv_scale = d3.scale.ordinal() .domain(d3.range(0, unq_animals.length)) .range(unq_animals); var animal_values = []; animals.forEach(function(d) { animal_values.push( scale(d)) }) console.log(scale('cat')); console.log(inv_scale(2)); var x = d3.scale.linear() .domain([0, 3]) .range([0, width]); // Generate a histogram using twenty uniformly-spaced bins. var data = d3.layout.histogram() .bins(x.ticks(3)) (animal_values); var y = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.y; })]) .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var mouse_is_over_bar = false; var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.select("body").on("click", function(e) { if (mouse_is_over_bar == false) { bar.attr("class", "not-clicked"); } }); var bar = svg.selectAll(".bar") .data(data) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }) .on("click", function() { if ($(this).attr("class") == "clicked") { $(this).attr("class", "not-clicked"); } else { $(this).attr("class", "clicked"); } }); bar.append("rect") .attr("x", 1) .attr("width", x(data[0].dx) - 1) .attr("height", function(d) { return height - y(d.y); }) .on("mouseover", function(e) { mouse_is_over_bar = true; }) .on("mouseout", function(e) { mouse_is_over_bar = false; }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("text") .attr("class", "x label") .attr("text-anchor", "center") .attr("x", width-470) .attr("y", height+30) .text("ANIMALS"); </script>