D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
DarMontou
Full window
Github gist
bar chart examples
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v5.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <div style="border: 1px solid"> <svg height="300" width="500"> </svg> </div> <script> var data = [100, 250, 175, 200, 120, 225, 125, 150, 300, 600]; var rectWidth = 30; var height = 300; var max = d3.max(data); var domain = [0, max]; var extent = d3.extent(data); console.log('extent', extent) var yScale = d3.scaleLinear() .domain([0, max]) .range([height, 0]); var colors = ['green', 'yellow', 'red'] var fillColor = d3.scaleBand([[0, 200, 200, 300, 300, 400], 0, 1, 2]) var yAxis = d3.axisLeft() .scale(yScale); var svg = d3.select('svg'); var axis = svg.append('g') .attr('transform', 'translate(40, 20)') .call(yAxis); axis.selectAll('text') .attr('fill', d => d === 250 ? 'red' : 'blue') var enter = svg.selectAll('rect') // empty selection .append('g') .data(data) .enter().append('rect') .attr('x', (d, i, e) => {console.log(i, d, e[i]); return i * rectWidth + i * 5 + 50;}) .attr('y', d => yScale(d)) .attr('width', rectWidth) .attr('height', d => height - yScale(d)) .attr('fill', d => {if (d == 250) {return 'red'} else {return 'blue'}}) .attr('stroke', "#fff"); // // console.log(d3.selectAll('rect')) // // console.log(document.select) console.log("enter:", enter); </script> </body>
https://d3js.org/d3.v5.min.js