Built with blockbuilder.org
forked from bengadisoufiane's block:
license: mit |
Built with blockbuilder.org
forked from bengadisoufiane's block:
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 |
body { | |
background-color: green; | |
} | |
div { | |
background-color: lightblue; | |
} | |
<!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="update('value1')">Variable 1</button> | |
<button onclick="update('value2')">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"; | |
var data; | |
d3.csv("data1.csv", function(dataset){ | |
data = dataset; | |
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[attribute] }) ]); | |
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[attribute]); }) | |
.attr("width", x.bandwidth()) | |
.attr("height", function(d) { return height - y(d[attribute]); }) | |
.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 update(a) { | |
// create 2 data_set | |
// Create the u variable | |
var u = svg.selectAll("rect") | |
.data(data) | |
.attr("x", function(d) { return x(d.group); }) | |
.attr("y", function(d) { return y(d[a]); }) | |
.attr("width", x.bandwidth()) | |
.attr("height", function(d) { return height - y(d[a]); }) | |
.attr("fill", "#69b3a2") | |
}; | |
// Initialize the plot with the first dataset | |
</script> | |
</div> | |
</body> |