Built with blockbuilder.org
forked from areologist's block: axes and margins
forked from areologist's block: axes and margins - responsive
forked from areologist's block: column chart
license: mit |
Built with blockbuilder.org
forked from areologist's block: axes and margins
forked from areologist's block: axes and margins - responsive
forked from areologist's block: column chart
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
.chart { | |
background-color: #f6fafc; | |
border: 1px solid #333; | |
} | |
.bar { | |
fill: steelblue; | |
opacity: 0.7; | |
} | |
.bar:hover { | |
opacity: 1; | |
} | |
.tick text { | |
font-size: 10px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="chart"></div> | |
<button onclick="changeSubject('math')">math</button> | |
<button onclick="changeSubject('science')">science</button> | |
<button onclick="changeSubject('language')">language</button> | |
<script> | |
const margin = { top: 25, right: 35, bottom: 50, left: 35 }; | |
const width = 650 - margin.left - margin.right; | |
const height = 450 - margin.top - margin.bottom; | |
const fullWidth = width + margin.left + margin.right; | |
const fullHeight = height + margin.top + margin.bottom; | |
const data = [ | |
{name: 'Alice', math: 37, science: 52, language: 54}, | |
{name: 'Billy', math: null, science: 34, language: 95}, | |
{name: 'Cindy', math: 86, science: 48, language: null}, | |
{name: 'David', math: 44, science: null, language: 75}, | |
{name: 'Emily', math: 59, science: 43, language: 29} | |
]; | |
const svg = d3.select('.chart') | |
.append('svg') | |
.attr('width', width + margin.left + margin.right) | |
.attr('height', height + margin.top + margin.bottom) | |
//.call(responsivefy) | |
.append('g') | |
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); | |
const xScale = d3.scaleBand() | |
.padding(0.2) | |
.domain(data.map(d => d.name)) | |
.range([0, width]); | |
const yScale = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([height, 0]); | |
const yAxis = d3.axisLeft(yScale) | |
.ticks(10); | |
// add the axis by passing it into d3.call (and wrap it in a <g>) | |
const yAxisElement = svg.append('g') | |
.call(yAxis); | |
const xAxis = d3.axisBottom(xScale); | |
svg.append('g') | |
.attr('transform', `translate(0, ${height})`) | |
.call(xAxis) | |
.selectAll('text') | |
.style('text-anchor', 'end') | |
.attr('transform', 'rotate(-45)'); | |
function render(subject = 'math') { | |
const speed = 500; | |
const t = d3.transition() | |
.duration(speed) | |
.ease(d3.easeCubicOut); | |
const update = svg.selectAll('rect') | |
.data(data.filter(d => d[subject]), d => d.name); | |
update.exit() | |
.transition(t) | |
.attr('y', height) | |
.attr('height', 0) | |
.remove(); | |
yScale.domain([0, d3.max(data, d => d[subject])]) | |
.nice(); | |
yAxisElement.transition() | |
.delay(speed) | |
.call(d3.axisLeft(yScale)); | |
update.transition(t) | |
.delay(speed) | |
.attr('y', d => yScale(d[subject])) | |
.attr('height', d => height - yScale(d[subject])); | |
update.enter() | |
.append('rect') | |
.attr('class', 'bar') | |
.attr('y', height) | |
.attr('height', 0) | |
.attr('x', d => xScale(d.name)) | |
.attr('width', xScale.bandwidth()) | |
.transition(t) | |
.delay(update.exit().size() ? speed : 0) | |
.attr('y', d => yScale(d[subject])) | |
.attr('height', d => height - yScale(d[subject])); | |
} | |
render(); | |
function changeSubject(subject) { | |
render(subject); | |
} | |
/// | |
function responsivefy(svg) { | |
// get container + svg aspect ratio | |
var container = d3.select(svg.node().parentNode), | |
width = parseInt(svg.style("width")), | |
height = parseInt(svg.style("height")), | |
aspect = width / height; | |
// add viewBox and preserveAspectRatio properties, | |
// and call resize so that svg resizes on inital page load | |
svg.attr("viewBox", "0 0 " + width + " " + height) | |
.attr("preserveAspectRatio", "xMinYMid") | |
.call(resize); | |
// to register multiple listeners for same event type, | |
// you need to add namespace, i.e., 'click.foo' | |
// necessary if you call invoke this function for multiple svgs | |
// api docs: https://github.com/mbostock/d3/wiki/Selections#on | |
d3.select(window).on("resize." + container.attr("id"), resize); | |
// get width of container and resize svg to fit it | |
function resize() { | |
var targetWidth = parseInt(container.style("width")); | |
svg.attr("width", targetWidth); | |
svg.attr("height", Math.round(targetWidth / aspect)); | |
} | |
} | |
</script> | |
</body> |