Built with blockbuilder.org
Last active
September 17, 2019 18:08
-
-
Save bengadisoufiane/edb2d74633e7432295529402637b3950 to your computer and use it in GitHub Desktop.
fresh block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<!-- Load d3.js & color palette --> | |
<script src="https://d3js.org/d3.v4.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<!-- Add 2 buttons --> | |
<button onclick="update(data1)">Variable 1</button> | |
<button onclick="update(data2)">Variable 2</button> | |
<!-- Create a div where the graph will take place --> | |
<div> | |
<svg id="my_dataviz" height=500 width=500></svg> | |
<script> | |
// create 2 data_set | |
var data1 = [ | |
{group: "A", value: 4}, | |
{group: "B", value: 16}, | |
{group: "C", value: 8} | |
]; | |
var data2 = [ | |
{group: "A", value: 7}, | |
{group: "B", value: 1}, | |
{group: "C", value: 20}, | |
{group: "D", value: 10} | |
]; | |
// set the dimensions and margins of the graph | |
var margin = {top: 30, right: 30, bottom: 70, left: 60}, | |
width = 560 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
// append the svg object to the body of the page | |
var svg = d3.select("#my_dataviz") | |
.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 + ")"); | |
// Initialize the X axis | |
// A function that create / update the plot for a given variable: | |
function update(data) { | |
d3.selectAll("text").style("opacity","0") | |
var x = d3.scaleBand() | |
.range([ 0, width ]) | |
.padding(0.2); | |
var xAxis = svg.append("g") | |
.attr("transform", "translate(0," + height + ")") | |
// Initialize the Y axis | |
var y = d3.scaleLinear() | |
.range([ height, 0]); | |
var yAxis = svg.append("g") | |
.attr("class", "myYaxis") | |
// Update the X axis | |
x.domain(data.map(function(d) { return d.group; })) | |
xAxis.call(d3.axisBottom(x)) | |
// Update the Y axis | |
y.domain([0, d3.max(data, function(d) { return d.value }) ]); | |
yAxis.transition().duration(1000).call(d3.axisLeft(y)); | |
// select the svg area | |
var SVG = d3.select("#my_dataviz") | |
// Usually you have a color scale in your chart already | |
var color = d3.scaleOrdinal() | |
.domain(data) | |
.range(d3.schemeSet1); | |
// Create the u variable | |
var u = svg.selectAll("rect") | |
.data(data) | |
u | |
.enter() | |
.append("rect") // Add a new rect for each new elements | |
.merge(u) // get the already existing elements as well | |
.transition() // and apply changes to all of them | |
.duration(1000) | |
.attr("x", function(d) { return x(d.group); }) | |
.attr("y", function(d) { return y(d.value); }) | |
.attr("width", x.bandwidth()) | |
.attr("height", function(d) { return height - y(d.value); }) | |
.attr("fill", "#69b3a2") | |
.style("fill", function(d){ return color(d.value)}) | |
.attr("text-anchor", "left") | |
.style("alignment-baseline", "middle") | |
// Add one dot in the legend for each name. | |
var size = 20 | |
var a=svg.selectAll("mydots") | |
a | |
.data(data) | |
.enter() | |
.append("rect") | |
.attr("x", 350) | |
.attr("y", function(d,i){ return 50 + i*(size+5)}) // 100 is where the first dot appears. 25 is the distance between dots | |
.attr("width", size) | |
.attr("height", size) | |
.style("fill", function(d){ return color(d.value)}) | |
// Add one dot in the legend for each name. | |
var b=svg.selectAll("mydots") | |
b | |
.data(data) | |
.enter() | |
.append("text") | |
.merge(b) | |
.transition() | |
.duration(1000) | |
.attr("x", 350 + size*2.352) | |
.attr("y", function(d,i){ return 55 + i*(size+5) + (size/2)}) | |
.text(function(d){ return d.group}) | |
// If less group in the new dataset, I delete the ones not in use anymore | |
u | |
.exit() | |
.remove(); | |
svg.append("text") | |
.attr("x", (width / 2)) | |
.attr("y", 0 - (margin.top / 2)) | |
.attr("text-anchor", "middle") | |
.style("font-size", "16px") | |
.style("text-decoration", "underline") | |
.text("Value vs Date Graph"); | |
} | |
// Initialize the plot with the first dataset | |
update(data1) | |
</script> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment