Skip to content

Instantly share code, notes, and snippets.

@bengadisoufiane

bengadisoufiane/.block

Last active September 18, 2019 09:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bengadisoufiane/c10e021556d8cc4d132c6bc0379aff7b to your computer and use it in GitHub Desktop.
Save bengadisoufiane/c10e021556d8cc4d132c6bc0379aff7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.block
license: mit
Raw
data1.csv
group value1 value2
Alabama 1390.63 25.11
Alaska 13.31 0
Arizona 1463.17 60.27
Arkansas 3586.02 6.88
California 16472.88 8736.4
Colorado 1851.33 17.99
Connecticut 259.62 13.1
Delaware 282.19 1.53
Florida 3764.09 1371.36
Georgia 2860.84 233.51
Hawaii 401.84 55.51
Idaho 2078.89 21.64
Illinois 8709.48 12.53
Indiana 5050.23 12.98
Iowa 11273.76 3.24
Kansas 4589.01 3.11
Kentucky 1889.15 6.6
Louisiana 1914.23 17.83
Maine 278.37 52.01
Maryland 692.75 12.9
Massachusetts 248.65 80.83
Raw
index.css
body {
background-color: green;
}
div {
background-color: lightblue;
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js & color palette -->
<head>
</head>
<style>
body {
background-color: linen;
}
</style>
<body>
<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="update1()">Variable 1</button>
<button onclick="update2()">Variable 2</button>
<!-- Create a div where the graph will take place -->
<div>
<svg id="my_dataviz" height=8000 width=8000></svg>
<script>
var margin = {top: 30, right: 0, bottom: 70, left: 200},
width = 700 - 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 + ")");
var attribute="value1";
function update1() {
// create 2 data_set
d3.csv("data1.csv", function(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))
.selectAll("text")
.attr("transform", "translate(0," + height + ")")
.attr("transform", "rotate(45)")
.style("text-anchor", "start");
// Update the Y axis
y.domain([0, d3.max(data, function(d) { return d.value1 }) ]);
yAxis.transition().duration(1000).call(d3.axisLeft(y));
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(2000)
.attr("x", function(d) { return x(d.group); })
.attr("y", function(d) { return y(d.value1); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.value1); })
.attr("fill", "#69b3a2")
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
svg.append("text")
.attr("x", (width / 2-40))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("2011 US agriculture exports");
});
};
function update2() {
d3.csv("data1.csv", function(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))
.selectAll("text")
.attr("transform", "translate(0," + height + ")")
.attr("transform", "rotate(45)")
.style("text-anchor", "start");
// Update the Y axis
y.domain([0, d3.max(data, function(d) { return d.value2 }) ]);
yAxis.transition().duration(1000).call(d3.axisLeft(y));
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(2000)
.attr("x", function(d) { return x(d.group); })
.attr("y", function(d) { return y(d.value2); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.value2); })
.attr("fill", "#69b3a2")
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
svg.append("text")
.attr("x", (width / 2-40))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Total fruits prodution in USA by state");
});
};
update1() ;
</script>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment