{
yield html`
<div id="horizontalBarchart">
<h1 class="chart-title">Title of Chart</h1>
<div id="wrapper-horizontalBarChart">
</div>
</div>`;
horizontalBarChart();
}
async function horizontalBarChart() {
// Data - can change to sampleData for alluma-esque data
// const dataset = await d3.json(
// "https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json"
// );
const dataset = sampleData;
// Chart dimensions
let dimensions = {
width: 685,
height: 450,
margin: {
top: 25,
right: 25,
bottom: 50,
left: 75
}
};
dimensions.boundedWidth =
dimensions.width - dimensions.margin.left - dimensions.margin.right;
dimensions.boundedHeight =
dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
// Canvas
const wrapper = d3
.select("#wrapper-horizontalBarChart")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height);
const bounds = wrapper
.append("g")
.style(
"transform",
`translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
);
// Accessors + Scales
const xAccessor = d => d.value;
const xScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, xAccessor)])
.range([dimensions.margin.left, dimensions.boundedWidth])
.nice();
const xAxis = d3
.axisTop(xScale)
.ticks(width / 80)
.tickFormat(d3.format(".2s"));
const yAccessor = d => d.county;
const yScale = d3
.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([dimensions.margin.top, dimensions.boundedHeight])
.padding(0.1);
const yAxis = d3
.axisLeft(yScale)
.tickFormat(i => `${dataset[i].county} - ${dataset[i].gender}`)
.tickSizeOuter(0);
const colorAccessor = d => d.gender;
const colorScale = d3
.scaleOrdinal()
.domain(["Male", "Female"])
.range([allumaGreen, allumaSlate]);
/// details
const barHeight = 25;
// Draw data
bounds
.append("g")
.selectAll("rect")
.data(dataset)
.join("rect")
.attr("x", xScale(0))
.attr("y", (d, i) => yScale(i))
.attr("width", d => xScale(xAccessor(d) - xScale(0)))
.attr("height", yScale.bandwidth())
.style("fill", d => colorScale(colorAccessor(d)));
// Peripherals
bounds
.append("g")
.style("transform", `translate(0,${dimensions.margin.top}px)`)
.call(xAxis);
bounds
.append("g")
.style("transform", `translate(${dimensions.margin.left}px, 0px)`)
.call(yAxis);
// Interactions
}
vl.markBar()
.data(sampleData)
.encode(
vl.x().fieldQ('value').axis({title: "Number of Apps"}),
vl.y().fieldN('county'),
vl.color().fieldN('gender')
.scale({range: colorsPossibleMain}),
vl.row().fieldN('gender')
)
.title("Example")
.render()
vl.markBar()
.data(sampleData)
.encode(
vl.x().fieldQ('value').axis({title: "Number of Apps"}),
vl.y().fieldN('county'),
vl.color().fieldN('county')
.scale({range: colorsPossibleMain}),
vl.row().fieldN('gender')
)
.title("Example")
.render()
vl.markBar({color: colorsPossibleMain[index]})
.data(sampleData)
.encode(
vl.x().fieldQ('value').axis({title: "Number of Apps"}),
vl.y().fieldN('county'),
vl.row().fieldN('gender')
)
.title("Example Chart")
.render()
colorsPossibleMain = [
"#00C389",
"#18BEF5",
"#F51852",
"#F2B705",
"#C93D32",
"#f26514",
"#254E5C",
]
d3 = require("d3@5")
import {range} from '@observablehq/introduction-to-generators'
html`<style>
body {
font-family: "Arial";
color: "#425563";
}
.chart-title {
font-size: 18px;
}
.axis-title {
font-size: 12px;
}
</style>`
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.
