D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
marreguin523
Full window
Github gist
Bar
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <style> body { margin: 15px; background-color: #F1F3F3 } .bar { fill: #6F257F; } .axis path, .axis line { fill: none; stroke: #D4D8DA; stroke-width: 1px; shape-rendering: crispEdges; } .x path { display: none; } .toolTip { position: absolute; display: none; min-width: 80px; height: auto; background: none repeat scroll 0 0 #ffffff; border: 1px solid #6F257F; padding: 14px; text-align: center; } </style> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 80}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; var tooltip = d3.select("body").append("div").attr("class", "toolTip"); var x = d3.scaleLinear().range([0, width]); var y = d3.scaleBand().range([height, 0]); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("Patients.csv", function(error, data) { if (error) throw error; data = data.sort(function(a, b) { return a.sumtd - b.sumtd; }).filter(function(d) {return d.sumtd > 100000}); x.domain([0, d3.max(data, function(d) { return d.sumtd; })]); y.domain(data.map(function(d) { return d.DRG; })).padding(0.1); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).ticks(10).tickFormat(function (d) { if (d >=1000 && d<1000000) { d = d / 1000 + "K"; } if (d >=1000000) { d = d / 1000000 + "M"; } return d; }).tickSizeInner([-height])); g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", 0) .attr("height", y.bandwidth()) .attr("y", function(d) { return y(d.DRG); }) .attr("width", function(d) { return x(d.sumtd); }) .on("mousemove", function(d){ tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html((d.DRG) + "<br>" + (d.sumtd)); }) .on("mouseout", function(d){ tooltip.style("display", "none");}); svg.append("text") .attr("id", "title") .attr("transform", "translate(320, 14)") .text("DRG Incident Count in the U.S. for 2011"); }); </script>
https://d3js.org/d3.v4.min.js