Built with blockbuilder.org
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.line {
fill: none;
stroke: #ffab00;
stroke-width: 3;
}
.dot {
fill: #ffab00;
stroke: #fff;
}
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis--x path {
display: none;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
console.time('test');
for (let i = 0; i < 20; i++) {
const x = randomInt(0, 2);
if (x === 1) {
createLineChart();
} else if (x === 2) {
createPie();
} else {
createBar();
}
}
console.timeEnd('test');
function createLineChart() {
// 2. Use the margin convention practice
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
, width = 500 - margin.left - margin.right // Use the window's width
, height = 400 - margin.top - margin.bottom; // Use the window's height
// The number of datapoints
var n = 10;
// 5. X scale will use the index of our data
var xScale = d3.scaleLinear()
.domain([0, n - 1]) // input
.range([0, width]); // output
// 6. Y scale will use the randomly generate number
var yScale = d3.scaleLinear()
.domain([0, 1]) // input
.range([height, 0]); // output
// 7. d3's line generator
var line = d3.line()
.x(function (d, i) {
return xScale(i);
}) // set the x values for the line generator
.y(function (d) {
return yScale(d.y);
}) // set the y values for the line generator
.curve(d3.curveMonotoneX) // apply smoothing to the line
const data = [];
for (let i = 0; i < 4; i++) {
data.push(
d3.range(n).map(function (d) {
return { "y": d3.randomUniform(1)() }
})
)
}
// var dataset = d3.range(n).map(function (d) {
// return { "y": d3.randomUniform(1)() }
// });
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")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom
// 4. Call the y axis in a group tag
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft
// 9. Append the path, bind the data, and call the line generator
for (let i = 0; i < data.length; i++) {
svg.append("path")
.datum(data[i])
.attr("class", "line")
.attr("d", line)
.attr('style', `stroke: rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`);
svg.selectAll(".dot" + i)
.data(data[i])
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function (d, i) {
return xScale(i)
})
.attr("cy", function (d) {
return yScale(d.y)
})
.attr("r", 5)
.attr('style', `fill: rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`);
}
}
function createPie() {
var arc, color, csv, data, g, height, pie, radius, svg, width;
csv = 'category,value\none,123\ntwo,534\nthree,230\nfour,56';
width = 500;
height = 300;
// data = d3.csv.parse(csv);
//
// data.forEach(function (d) {
// return d.value = +d.value;
// });
var data = [];
d3.range(5).forEach(function (el, index) {
data.push({ value: Math.random() * 10 * el, time: new Date(Date.now() + index * 6000) });
});
radius = Math.min(width, height) / 2;
// color = d3.scale.ordinal().range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d"]);
color = d3.scaleOrdinal(d3.schemeCategory10);
arc = d3.arc().outerRadius(radius - 40).innerRadius(0);
pie = d3.pie().sort(null).value(function (d) {
return d.value;
});
svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
.append("g")
.attr("transform",
"translate(" + (width / 2) + ", " + (height / 2) + ")"
);
g = svg.selectAll(".arc")
.data(pie(data))
.enter()
.append("path")
.attr('class', 'arc')
.attr("d", arc)
.style("fill", function (d, i) {
// return color(d.data.category);
return color(Math.floor(Math.random() * 20));
});
}
function createBar() {
const data = [];
for (var i = 0; i < 20; i++) {
data.push({
letter: i,
frequency: randomInt(1, 50)
})
}
var svgHeight = 300;
var svgWidth = 500;
var svg = d3.select("body").append("svg")
.attr('width', svgWidth)
.attr('height', svgHeight);
var margin = { top: 30, right: 30, bottom: 40, left: 50 };
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(function (d) {
return d.letter;
}));
y.domain([0, d3.max(data, function (d) {
return d.frequency;
})]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(9, 0)")
.call(d3.axisLeft(y).ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(d.letter);
})
.attr("y", function (d) {
return y(d.frequency);
})
.attr("width", x.bandwidth())
.attr("height", function (d) {
return height - y(d.frequency);
});
}
function randomInt(firstParam, secondParam) {
if (secondParam === void 0) {
return Math.floor(Math.random() * (firstParam + 1));
} else {
return firstParam + Math.floor(Math.random() * (secondParam - firstParam + 1));
}
}
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js