Data Visualization Engineer
chart = {
const chartWidth = svgWidth - margin.left - margin.right;
const chartHeight = svgHeight - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr('viewBox', [0, 0, svgWidth, svgHeight])
.attr('aria-label', 'It is a bar chart of significant earthquakes above magnitude 7 since 2000, representing the number and distribution of earthquakes over time.')
.attr("tabindex", 0)
const xScale = d3.scaleBand()
.domain(chartData.map(d => d.key))
.range([ 0, chartWidth])
.padding(0.1);
const earthquakeCountArray = chartData.map(d => d['value'].length);
const earthquakeCountExtent = d3.extent(earthquakeCountArray);
const yScale = d3.scaleLinear()
.domain(earthquakeCountExtent)
.range([chartHeight, 0]);
const bars = svg.append('g');
const barHeight = 15; // height of each rectangle
const padding = 4; // padding between rectangles
const totalPadding = (d => (d['value'].length - 1) * padding);
lines.forEach((t) => {
svg.call(t);
});
bars.selectAll("g")
.data(chartData)
.enter().append('g')
.attr("class", "bar")
.attr("transform", d => `translate(${xScale(d.key)}, ${(yScale.range()[0] + yScale.range()[1]) / 2 - (barHeight * d['value'].length + totalPadding(d)) / 2})`)
.selectAll("rect")
.data(d => d['value'])
.enter().append("rect")
.attr("x", 0)
.attr("y", (d, i) => i * (barHeight + padding))
.attr('rx',1.5)
.attr('ry',1.5)
.attr("width", xScale.bandwidth())
.attr("height", barHeight)
.attr('fill', d => mapTextures(d.magnitude))
.attr('stroke','#000')
.attr('stroke-width',0.6)
const chartAxisG = svg.append('g');
const xAxis = g => g
.attr('transform', `translate(0,${svgHeight - margin.bottom - margin.top -40})`)
// .call(d3.axisBottom(xScale).tickFormat(d3.format("d")).tickSize(0))
.call(d3.axisBottom(xScale)
.tickFormat((d, i) => (i % 2 === 0) ? d3.format("d")(d) : "")
// .tickValues(xScale.domain().filter((d, i) => i % 2 === 0))
.tickSize(9) // remove the tick line
.tickPadding(10) // increase the distance between tick labels and axis line
)
.call(g => g.select('.domain').remove())
.call(g => g.selectAll(".tick").attr("font-size", "14px").attr('color', '#5c5c5c'))
chartAxisG.append("g").call(xAxis);
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
