Skip to content

Instantly share code, notes, and snippets.

@widged
Last active April 21, 2017 06:12
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save widged/cd3130a86d343259122bf124f7770459 to your computer and use it in GitHub Desktop.
d3.v4 linegraph with gradient
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;
}
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);
}
}
<!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