Built with blockbuilder.org
forked from romsson's block: D3 bar chart without data-binding
forked from anonymous's block: D3 bar chart with data-binding
forked from anonymous's block: D3 bar chart with data-binding
forked from romsson's block: D3 bar chart with data-binding
forked from romsson's block: D3 bar chart with line & circle
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
rect {
fill: white;
stroke: black;
stroke-width: 1;
}
path {
fill: none;
stroke: black;
stroke-width: 1;
}
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
function generate_data() {
return d3.range(10).map(function() {
return Math.random();
});
}
var data = generate_data();
var y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, +d3.select("svg").attr("height")/3]);
var r = d3.scaleLinear()
.domain([0, d3.max( function(data){
}
data
)])
.range([2, 10]);
// ordinal
var x = d3.scaleBand()
.domain(d3.range(10))
.range([0, +d3.select("svg").attr("width")]);
var s = svg.selectAll("circle").data(data);
s.enter()
.append("circle")
svg.selectAll("circle").data(data)
.attr("cx", function(d, i) { return x(i) + x.bandwidth() / 2; })
.attr("cy", function(d) { return 200 - y(d); })
.attr("r", function(d) { return r(d); });
var line = d3.line()
.x(function(d, i) { return x(i) + x.bandwidth() /2 ; })
.y(function(d) { return 200 - y(d); });
var s = svg.selectAll("path").data([data]).enter()
.append("path")
.attr("d", function(d) { return line(d); })
</script>
</body>
https://d3js.org/d3.v4.min.js