forked from micahstubbs's block: building blocks svg flag
Last active
March 12, 2016 22:53
-
-
Save micahstubbs/5c03354cc2b330b2fb60 to your computer and use it in GitHub Desktop.
#datasana 2
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: CC0-1.0 |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| </head> | |
| <style> | |
| body { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| </style> | |
| <body> | |
| <svg width=100% height=100%> | |
| <rect id="base" x=100 y=300 width=600 height=6></rect> | |
| <rect id="box" x=100 y=0 width=600 height=300 fill="none" stroke="#000"></rect> | |
| </svg> | |
| <script> | |
| var list = [ | |
| 5, 19, -10, 6, 29 | |
| ] | |
| var chartX = 121; | |
| var chartWidth = 675; | |
| var chartHeight = 485; | |
| var xMargin = 15; | |
| d3.select("#box").attr({ | |
| width: chartWidth, | |
| height: chartHeight, | |
| x: chartX | |
| }) | |
| d3.select("#base").attr({ | |
| width: chartWidth, | |
| x: chartX, | |
| y: chartHeight | |
| }) | |
| var xscale = d3.scale.linear() | |
| .domain([0, list.length-1]) | |
| .range([chartX + xMargin, chartX + chartWidth - xMargin]) | |
| var yscale = d3.scale.linear() | |
| .domain([0, d3.max(list, function(d) { return d })]) | |
| .range([chartHeight, 0]) | |
| var svg = d3.select("svg"); | |
| var circles = svg.selectAll("circle") | |
| .data(list) | |
| .enter() | |
| .append("circle") | |
| .attr({ | |
| r: 10, | |
| cx: function(d,i) { | |
| return xscale(i); | |
| }, | |
| cy: function(d,i) { | |
| return yscale(d); | |
| } | |
| }) | |
| var bars = svg.selectAll("rect.bar") | |
| .data(list) | |
| .enter() | |
| .append("rect").classed("bar", true) | |
| .attr({ | |
| x: function(d,i) { | |
| return xscale(i); | |
| }, | |
| y: function(d,i) { | |
| return yscale(d); | |
| }, | |
| width: 10, | |
| height: function(d,i) { | |
| return chartHeight - yscale(d) | |
| }, | |
| fill: "orange" | |
| }) | |
| var barLines = svg.selectAll("line") | |
| .data(list) | |
| .enter() | |
| .append("line") | |
| .attr({ | |
| x1: function(d,i) { | |
| return xscale(i) | |
| }, | |
| y1: function(d,i) { | |
| return yscale(d); | |
| }, | |
| x2: function(d,i) { | |
| return xscale(i) | |
| }, | |
| y2: function(d,i) { | |
| return yscale.range()[0] //chartHeight | |
| }, | |
| stroke: "#7a7a7a", | |
| "stroke-width": 10 | |
| }) | |
| var line = svg.selectAll("path") | |
| .data([list]) | |
| .enter() | |
| .append("path") | |
| .attr({ | |
| d: function(entries,index) { | |
| var x = xscale(0); | |
| var y = yscale(entries[0]); | |
| var string = "M" + [x,y]; | |
| console.log("STRING", string); | |
| for(var i = 1; i < entries.length; i++) { | |
| x = xscale(i); | |
| y = yscale(entries[i]); | |
| string += "L" + [x,y]; | |
| } | |
| console.log("STRING AFTER", string) | |
| return string | |
| }, | |
| fill: "none", | |
| stroke: "#000" | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment