D3 Bar graph Sort sandbox

Developer
David Mora
Size
3,874 Kb
Views
10,120
  1. D3 Bar graph Sort sandbox Previews
  2. D3 Bar graph Sort sandbox HTML Codes
  3. D3 Bar graph Sort sandbox CSS Codes
  4. D3 Bar graph Sort sandbox JS Codes

How do I make an d3 bar graph sort sandbox?

Taken from Mike Bostock's Sortable Bar Chart http://bl.ocks.org/mbostock/3885705. What is a d3 bar graph sort sandbox? How do you make a d3 bar graph sort sandbox? This script and codes were developed by David Mora on 29 November 2022, Tuesday.

D3 Bar graph Sort sandbox Previews
IQ Test

D3 Bar graph Sort sandbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3 Bar graph Sort sandbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label><input type="checkbox"> Sort values</label> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 Bar graph Sort sandbox - Script Codes CSS Codes

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; width: 960px;
}
.axis text { font: 10px sans-serif;
}
.axis path,
.axis line { fill: none; stroke: #000; shape-rendering: crispEdges;
}
.bar { fill: steelblue; fill-opacity: .9;
}
.x.axis path { display: none;
}
label { position: absolute; top: 10px; right: 10px;
}

D3 Bar graph Sort sandbox - Script Codes JS Codes

{
var data = [{ "letter": "A", "frequency": 0.08167
}, { "letter": "B", "frequency": 0.01492
}, { "letter": "C", "frequency": 0.0278
}, { "letter": "D", "frequency": 0.04253
}, { "letter": "E", "frequency": 0.12702
}, { "letter": "F", "frequency": 0.02288
}, { "letter": "G", "frequency": 0.02022
}, { "letter": "H", "frequency": 0.06094
}, { "letter": "I", "frequency": 0.06973
}, { "letter": "J", "frequency": 0.00153
}, { "letter": "K", "frequency": 0.00747
}, { "letter": "L", "frequency": 0.04025
}, { "letter": "M", "frequency": 0.02517
}, { "letter": "N", "frequency": 0.06749
}, { "letter": "O", "frequency": 0.07507
}, { "letter": "P", "frequency": 0.01929
}, { "letter": "Q", "frequency": 0.00098
}, { "letter": "R", "frequency": 0.05987
}, { "letter": "S", "frequency": 0.06333
}, { "letter": "T", "frequency": 0.09056
}, { "letter": "U", "frequency": 0.02758
}, { "letter": "V", "frequency": 0.01037
}, { "letter": "W", "frequency": 0.02465
}, { "letter": "X", "frequency": 0.0015
}, { "letter": "Y", "frequency": 0.01971
}, { "letter": "Z", "frequency": 0.00074
}]
}//closes var data
var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1, 1)
.domain(data.map(function(d) { return d.letter;
}));
//to use when appending your bars
//.attr("width", x.rangeBand())
var y = d3.scale.linear() .range([height, 0])
//assigns the scale "y" a domain using d3.max, which evaluates every frequency property for each "d" and returns the max value.
.domain([0, d3.max(data, function(d) { return d.frequency;
})]);
var xAxis = d3.svg.axis() .scale(x) .orient("bottom");
var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".0%"));
//sets "svg": which is the svg canvas everything is appended to. Used constantly throughout
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 + ")");
//DOES NOTHING (A SECURITY MEASURE?)
// data.forEach(function(d) {
// d.frequency = d.frequency;
// });
//adds xAxis as a g group
svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis);
//adds yAxis as a g group, adds "Frequency" label
svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency");
//appends the bars for each data letter
svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); })
//rangeBand() returns an even spacing based on rangeRoundBands() when x was created .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); //y height using "y" scale }) .attr("height", function(d) { return height - y(d.frequency); //because it's drawn UP to DOWN });
//runs "change" function when change of button status happens
d3.select("input").on("change", change);
function change() {
//1. reset domain based on your DESIRED final state
//MORA: OVERALL: sets domain for x-scale. HOW: sorts the data based off if the box is checked (if it is, then it needs to be in order of FREQUENCY VALUE), then maps the sorted DATA ("d") to a sorted ARRAY OF LETTERS, which it then copy()s so it can be used for bars AND x-axis-labels, and returns as the new domain of x, stored in x0. // BOSTOCK: "Copy-on-write since tweens are evaluated after a delay." var x0 = x.domain(data.sort(this.checked ? //"is the box checked?" //if so, do a simple HIGHEST to lowest frequency sort: function(a, b) { return b.frequency - a.frequency; } : //if not sort in ascending alphabetical order: function(a, b) { return d3.ascending(a.letter, b.letter); }) //close sort .map(function(d) { return d.letter; }) )//closes domain() .copy(); //calculates delay for each element so they fire in succession var delay = function(d, i) { return i * 100; }; //2. sort your BARS to the DESIRED END STATE (note this does not change what's displayed on svg, just how the DATA is ordered), here using the new x-axis scale //this code makes the x-axis labels stay with the bars when transitioning from value-sorted to alphabetical. Why? By prepping your svg selectAll(".bar") in the order they will transition to, they FIRE IN THE ORDER OF [END STATE] FIRST TO LAST. svg.selectAll(".bar") .sort(function(a, b) { return x0(a.letter) - x0(b.letter); }); //3. select svg canvas, apply transition, select bars, if you want each "d" triggering in succession apply a delay, set the new position you want the bar at using the new scale you created in 1. //actually executes the transitions: var transition = svg.transition().duration(500); //transitions bars, passing "x0" the current letter to get transition.selectAll(".bar") .delay(delay) .attr("x", function(d) { return x0(d.letter); });
//transitions x-axis transition.select(".x.axis") .call(xAxis) .selectAll("g") .delay(delay);
}
D3 Bar graph Sort sandbox - Script Codes
D3 Bar graph Sort sandbox - Script Codes
Home Page Home
Developer David Mora
Username davidnmora
Uploaded November 29, 2022
Rating 3
Size 3,874 Kb
Views 10,120
Do you need developer help for D3 Bar graph Sort sandbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Mora (davidnmora) Script Codes
Name
JS Array of 20,000 adjectives
DiverseCity Prototype 1.0
Animate.css
Legend for Social Dance 2 vis - 1.0, pre bootstrap sidebar
Updates in global variables register inside closures
PrettyPhoto test
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!