Last active
April 21, 2017 06:12
-
-
Save widged/cd3130a86d343259122bf124f7770459 to your computer and use it in GitHub Desktop.
d3.v4 linegraph with gradient
This file contains hidden or 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
| breeding-graph { | |
| display: block; | |
| } | |
| breeding-graph circle { | |
| fill: url(#count-gradient); | |
| } | |
| breeding-graph .axis { | |
| font-family: arial; | |
| font-size: 0.8em; | |
| } | |
| breeding-graph .axis text { | |
| fill: black; | |
| stroke: none; | |
| font-weight: bold; | |
| } | |
| breeding-graph .y.axis text { | |
| transform: translate(-10px, 0px); | |
| } | |
| breeding-graph .x.axis path, | |
| breeding-graph .y.axis path { | |
| stroke: none; | |
| } | |
| breeding-graph .tick line { | |
| stroke: none; | |
| } | |
| breeding-graph .y.axis .tick line { | |
| stroke: lightgray; | |
| } | |
| breeding-graph .line { | |
| fill: none; | |
| stroke: url(#count-gradient); | |
| stroke-width: 3px; | |
| } |
This file contains hidden or 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
| class BreedingGraph { | |
| constructor() { | |
| this.rootNode = document.createElement('breeding-graph'); | |
| } | |
| mount(parentNode) { | |
| parentNode.appendChild(this.rootNode); | |
| return this; | |
| } | |
| render(rows, config) { | |
| const rootNode = this.rootNode; | |
| const {getX, getY, gradientStops, dotRadius, dim} = config; | |
| var margin = {top: 10, right: 20, bottom: 20, left: 30}; | |
| var width = dim.width - margin.left - margin.right, | |
| height = dim.height - margin.top - margin.bottom; | |
| // X | |
| const [xStart, xEnd] = d3.extent(rows, getX); | |
| const xScale = d3.scaleTime() | |
| .range([0, width]) | |
| .domain([xStart, xEnd]); | |
| const xFn = function(d) { return xScale(getX(d)); }; | |
| const xAxis = d3.axisBottom() | |
| .scale(xScale) | |
| .ticks(d3.timeYear.every(2)) | |
| .tickFormat(d3.timeFormat("%Y")); | |
| // Y | |
| const [yStart, yEnd] = d3.extent(rows, getY); | |
| const yScale = d3.scaleLinear() | |
| .range([height, 0]) | |
| .domain([0, yEnd]); | |
| const yFn = function(d) { return yScale(getY(d)); }; | |
| const yAxis= d3.axisLeft() | |
| .scale(yScale) | |
| .ticks(5) | |
| .tickSize(-width); | |
| // Plot | |
| var svg = d3.select(rootNode) | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('class','chart') | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| svg.append("linearGradient") | |
| .attr("id", "count-gradient") | |
| .attr("gradientUnits", "userSpaceOnUse") | |
| .attr("x1", 0).attr("y1", 0 ) | |
| .attr("x2", 700).attr("y2", 0 ) | |
| .selectAll("stop") | |
| .data(gradientStops) | |
| .enter().append("stop") | |
| .attr("offset", function(d) { return d.offset; }) | |
| .attr("stop-color", function(d) { return d.color; }); | |
| svg.append('g') | |
| .attr('class', 'x axis') | |
| .attr('transform', "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append('g') | |
| .attr('class', 'y axis') | |
| .call(yAxis); | |
| d3.select(".y.axis") | |
| .append("text") | |
| .attr("class", "label"); | |
| svg.append("path") | |
| .datum(rows) | |
| .attr("class", "line") | |
| .attr("d", d3.line().x(xFn).y(yFn)); | |
| svg.selectAll(".dot") | |
| .data(rows) | |
| .enter().append("svg:circle") | |
| .attr("class", "dot") | |
| .attr("cx", xFn ) | |
| .attr("cy", yFn ) | |
| .attr("r", dotRadius); | |
| } | |
| } |
This file contains hidden or 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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="breeding-graph.css"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="BreedingGraph.js"></script> | |
| <style> | |
| body { | |
| font-family: roboto; | |
| background-color: lightgray; | |
| margin: 0; padding: 12px; | |
| } | |
| breeding-box { | |
| display: inline-block; | |
| background-color: white; | |
| } | |
| breeding-box h1 { | |
| background-color: #226A9B; | |
| margin: 0; | |
| padding: 6px; | |
| color: white; | |
| text-align: center; | |
| font-weight: normal; | |
| font-size: 16pt; | |
| } | |
| breeding-box #chart { | |
| box-sizing: border-box; | |
| margin: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <breeding-box> | |
| <h1>Max Count of Breeding Pairs 1994-2014</h1> | |
| <div id="chart"></div> | |
| </breeding-box> | |
| <script type="text/javascript"> | |
| var parseTime = d3.timeParse("%y"); | |
| var data = [ | |
| {"year":"94","count":21}, | |
| {"year":"96","count":16}, | |
| {"year":"98","count":24}, | |
| {"year":"00","count":58}, | |
| {"year":"02","count":61}, | |
| {"year":"04","count":81}, | |
| {"year":"06","count":38} | |
| ].map((d) => { | |
| // convert from string to Date object | |
| d['year'] =parseTime(d['year']); | |
| // coerce count from string to float | |
| d['count'] = +d['count']; | |
| return d; | |
| }); | |
| const breedingGraph = new BreedingGraph().mount(document.querySelector("breeding-box #chart")); | |
| breedingGraph.render( | |
| data, | |
| { | |
| getX: (d) => { return d.year; }, | |
| getY: (d) => { return d.count; }, | |
| gradientStops: [ | |
| {offset: "0%", color: "#4CD9E6"}, | |
| {offset: "100%", color: "#6085CE"} | |
| ], | |
| dim: {width: 700, height: 280}, | |
| dotRadius: 5 | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment