Built with blockbuilder.org
Last active
September 17, 2019 20:25
-
-
Save bengadisoufiane/40762141c373f286c81baee70752e944 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
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 |
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="update1()">Total Export</button> | |
<button onclick="update2()">Fruits production</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: 30, bottom: 110, left: 30}, | |
width = 760 - 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 + ")"); | |
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)") | |
.attr("font-size","20px") | |
.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(1000) | |
.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)) | |
.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() { | |
// create 2 data_set | |
// 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)") | |
.attr("font-size","20px") | |
.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(1000) | |
.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)) | |
.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() ; | |
// Initialize the plot with the first dataset | |
</script> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment