Skip to content

Instantly share code, notes, and snippets.

@uredkar

uredkar/.block

Last active April 27, 2017 18:21
Show Gist options
  • Save uredkar/cff4dd017b8555cfa874cd0f8f3844bb to your computer and use it in GitHub Desktop.
Save uredkar/cff4dd017b8555cfa874cd0f8f3844bb to your computer and use it in GitHub Desktop.
Download ZIP
ordinal mulit line curve
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="https://d3js.org/d3-axis.v1.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var fruits = [
{ name: "apple", value: 100 },
{ name: "orange", value: 200 },
{ name: "banana", value: 200 },
{ name: "grapefruit", value: 400 },
{ name: "papaya", value: 150 },
{ name: "coconut", value: 400 },
];
var data = [];
for (var i=0; i<10; i++) {
var fruit = fruits.map(
(d,j) => ({
name: d.name,
value: d.value + Math.random() * 30 *
(j === 0 ? 0 :
(j === fruits.length - 1 ? 0 : (Math.random() > 0.5 ? 1 : -1)))
})
);
data[i] = Array.prototype.slice.call(fruit);
}
var x = d3.scalePoint()
.domain(fruits.map(x => x.name))
.range([0, width]);
console.log(x);
var y = d3.scaleLinear()
.domain(d3.extent(fruits,(x) => x.value))
.range([height, 0]);
var color = d3.scaleLinear()
.domain([0, data.length])
.interpolate(d3.interpolateRgb)
.range(['lightgray', 'black'])
var xAxis = d3.axisBottom().scale(x);
var line = d3.line()
.x(d => x(d.name))
.y(d => y(d.value))
.curve(d3.curveNatural);
var svg = d3.select("body").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 + ")");
svg.append("g")
.attr("class", "x-axis")
.call(xAxis);
d3.select('.x-axis').attr('transform', 'translate(0,' + height + ')');
var gLine = svg.selectAll('.gline')
.data(data)
.enter()
.append('g').classed('gline', true);
gLine
.append("path")
.attr("d", d => line(d))
.style('fill', 'none')
.style('stroke', (d,i) => color(i));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment