Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
May 24, 2023
1 fork
1 star
fruits = [
{ name: "🍊", count: 21 },
{ name: "🍇", count: 13 },
{ name: "🍏", count: 8 },
{ name: "🍌", count: 5 },
{ name: "🍐", count: 3 },
{ name: "🍋", count: 2 },
{ name: "🍎", count: 1 },
{ name: "🍉", count: 1 }
]
fruits.map(d => d.count) // the count dimension (quantitative)
fruits.map(d => d.name) // the name dimension (nominal)
html`<svg viewBox="0 0 ${width} ${height_bar}" style="max-width: ${width}px; font: 12px sans-serif;">
<g fill="steelblue">
${fruits.map(
d =>
svg`<rect y="${yScale_bar(d.name)}" x="${xScale_bar(
0
)}" width="${xScale_bar(d.count) -
xScale_bar(0)}" height="${yScale_bar.bandwidth()}"></rect>`
)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${yScale_bar.bandwidth() /
2})">
${fruits.map(
d =>
svg`<text y="${yScale_bar(d.name)}" x="${xScale_bar(
d.count
)}" dy="0.35em">${d.count}</text>`
)}
</g>
${d3
.select(svg`<g transform="translate(0,${margin_bar.top})">`)
.call(d3.axisTop(xScale_bar))
.call(g => g.select(".domain").remove())
.node()}
${d3
.select(svg`<g transform="translate(${margin_bar.left},0)">`)
.call(d3.axisLeft(yScale_bar))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
margin_bar = ({ top: 30, right: 30, bottom: 30, left: 30 })
xScale_bar = d3.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([margin_bar.left, width - margin_bar.right])
.interpolate(d3.interpolateRound)
xScale_bar.domain()
xScale_bar.range()
yScale_bar = d3
.scaleBand()
.domain(fruits.map(d => d.name))
.range([margin_bar.top, height_bar - margin_bar.bottom])
.padding(0.1)
.round(true)
yScale_bar.domain()
yScale_bar.range()
height_bar = 400
bar_chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height_barII]);
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(fruits)
.join("rect")
.attr("x", xScale_barII(0))
.attr("y", (d, i) => yScale_barII(i))
.attr("width", d => xScale_barII(d.count) - xScale_barII(0))
.attr("height", yScale_barII.bandwidth());
svg
.append("g")
.attr("fill", "white")
.attr("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.selectAll("text")
.data(fruits)
.join("text")
.attr("x", d => xScale_barII(d.count))
.attr("y", (d, i) => yScale_barII(i) + yScale_barII.bandwidth() / 2)
.attr("dy", "0.35em")
.attr("dx", -4)
.text(d => d.count)
.call(text =>
text
.filter(d => xScale_barII(d.count) - xScale_barII(0) < 127) // short bars, e.g. x(3) - x(0)
.attr("dx", +4)
.attr("fill", "black")
.attr("text-anchor", "start")
);
svg.append("g").call(xAxis_barII);
svg.append("g").call(yAxis_barII);
return svg.node();
}
xScale_barII = d3
.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([margin_barII.left, width - margin_barII.right])
yScale_barII = d3
.scaleBand()
.domain(d3.range(fruits.length))
.rangeRound([margin_barII.top, height_barII - margin_barII.bottom])
.padding(0.1)
xAxis_barII = (g) =>
g
.attr("transform", `translate(0,${margin_barII.top})`)
.call(d3.axisTop(xScale_barII))
.call((g) => g.select(".domain").remove())
yAxis_barII = g =>
g.attr("transform", `translate(${margin_barII.left},0)`).call(
d3
.axisLeft(yScale_barII)
.tickFormat(i => fruits[i].name)
.tickSizeOuter(0)
)
barHeight = 25
height_barII = Math.ceil((fruits.length + 0.1) * barHeight) +
margin_barII.top +
margin_barII.bottom
margin_barII = ({ top: 30, right: 30, bottom: 30, left: 30 })
html`<svg viewBox="0 0 ${width} ${height_column}" style="max-width: ${width}px; font: 12px sans-serif;">
<g fill="steelblue">
${fruits.map(
d =>
svg`<rect y="${yScale_column(d.count)}" x="${xScale_column(
d.name
)}" width="${xScale_column.bandwidth()}" height="${yScale_column(0) -
yScale_column(d.count)}"></rect>`
)}
</g>
<g fill="white" text-anchor="middle" transform="translate(${xScale_column.bandwidth() /
2},+12)">
${fruits.map(
d =>
svg`<text y="${yScale_column(d.count)}" x="${xScale_column(
d.name
)}" dx="0.35em">${d.count}</text>`
)}
</g>
${d3
.select(
svg`<g transform="translate(0,${height_column - margin_column.bottom})">`
)
.call(d3.axisBottom(xScale_column))
.call(g => g.select(".domain").remove())
.node()}
${d3
.select(svg`<g transform="translate(${margin_column.left},0)">`)
.call(d3.axisLeft(yScale_column))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
margin_column = ({ top: 30, right: 30, bottom: 30, left: 30 })
xScale_column = d3
.scaleBand()
.domain(fruits.map(d => d.name))
.range([margin_column.left, width - margin_column.right])
.padding(0.1)
.round(true)
xScale_column.domain()
xScale_column.range()
yScale_column = d3
.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([height_column - margin_column.bottom, margin_column.top])
.nice()
.interpolate(d3.interpolateRound)
yScale_column.domain()
yScale_column.range()
height_column = 400
column_chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height_columnII]);
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(fruits)
.join("rect")
.attr("x", (d, i) => xScale_columnII(i))
.attr("y", d => yScale_columnII(d.count))
.attr("height", d => yScale_columnII(0) - yScale_columnII(d.count))
.attr("width", xScale_columnII.bandwidth());
svg
.append("g")
.selectAll("text")
.data(fruits)
.join("text")
.attr("x", (d, i) => xScale_columnII(i))
.attr("y", d => yScale_columnII(d.count) + 4)
.attr("fill", "white")
.attr("text-anchor", "middle")
.attr("font-family", "sans serif")
.attr("font-size", "14px")
.attr("transform", `translate(${xScale_columnII.bandwidth() / 2},+12)`)
.text(d => d.count);
svg.append("g").call(xAxis_columnII);
svg.append("g").call(yAxis_columnII);
return svg.node();
}
xScale_columnII = d3
.scaleBand()
.domain(d3.range(fruits.length))
.range([margin_columnII.left, width - margin_columnII.right])
.padding(0.1)
yScale_columnII = d3
.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.nice()
.range([height_columnII - margin_columnII.bottom, margin_columnII.top])
xAxis_columnII = g =>
g
.attr(
"transform",
`translate(0,${height_columnII - margin_columnII.bottom})`
)
.call(
d3
.axisBottom(xScale_columnII)
.tickFormat(i => fruits[i].name)
.tickSizeOuter(0)
)
yAxis_columnII = g =>
g
.attr("transform", `translate(${margin_columnII.left},0)`)
.call(d3.axisLeft(yScale_columnII).ticks(null))
.call(g => g.select(".domain").remove())
.call(g =>
g
.append("text")
.attr("x", -margin_columnII.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(fruits.count)
)
height_columnII = 500
margin_columnII = ({ top: 30, right: 0, bottom: 30, left: 40 })
color = d3
.scaleSequential()
.domain([0, d3.max(fruits, d => d.count)])
.interpolator(d3.interpolateBlues)
d3 = require('d3@6')
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.
