Built with blockbuilder.org
forked from bengadisoufiane's block:
forked from romsson's block:
Created
September 18, 2019 08:37
-
-
Save bengadisoufiane/f26d20d7a34b5555ce1a7aed461d5e73 to your computer and use it in GitHub Desktop.
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
| body { | |
| background-color: green; | |
| } | |
| div { | |
| background-color: lightblue; | |
| } | |
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 --> | |
| <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"); | |
| u.exit() | |
| .remove(); | |
| }); | |
| function update(a) { | |
| // 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") | |
| // 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") | |
| .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"); | |
| }; | |
| // Initialize the plot with the first dataset | |
| </script> | |
| </div> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment