D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jfourmond
Full window
Github gist
simple bar chat with interaction
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } rect { fill: none; stroke: black; stroke-width: 1px; } </style> </head> <body> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500); // var data = [22, 32, 21, 23, 10, 22, 11, 19, 30, 50]; var x = d3.scale.linear().range([0, 500]); var y = d3.scale.linear().range([0, 50]); var g = svg.append("g").attr("transform", "translate(100, 0)"); d3.dsv(",")("dataset.csv", function(data) { // Chargement des données console.log(data); x.domain([0, data.length]); y.domain([0, d3.max(data, function(d) { return d.value;})]); g.selectAll("text").data(data).enter().append("text") .text(function(d) { return d.name; }) .attr("y", 200) .attr("x", function(d, i) { return x(i) + 20; }) .style("font-size", 12) .style("font-family", "monospace"); g.selectAll("rect").data(data).enter().append("rect") .attr("x", function(d, i) { return x(i); }) .attr("y", function(d) { return 170 - y(d.value); }) .attr("height", function(d) { return y(d.value); }) .attr("width", 500 / data.length - 10) .on("mouseover", function(d) { d3.select(this).style("fill", "red"); // Should be using Ids instead of values d3.selectAll("text").filter(function(e) { return d === e; }) .style("font-size", 24); }) .on("mouseout", function(d) { d3.select(this).transition().duration(500).style("fill", "white"); // Should be using Ids instead of values d3.selectAll("text").filter(function(e) { return d === e; }) .transition().duration(500) .style("font-size", 12); }); }) </script> </body>
https://d3js.org/d3.v3.min.js