Simple Bar Chart (D3.js) - Observablehq Typing CST Test
Loading…
Simple Bar Chart (D3.js) — Observablehq Code
A basic D3.js bar chart defined in an Observable cell.
import {scaleBand, scaleLinear, max} from "d3"
const data = [4, 8, 15, 16, 23, 42]
const x = scaleBand()
.domain(d3.range(data.length))
.range([0, 420])
.padding(0.1)
const y = scaleLinear()
.domain([0, max(data)])
.range([0, 120])
svg`<svg width=420 height=120>
${data.map((d, i) => `<rect x="${x(i)}" y="${120 - y(d)}" width="${x.bandwidth()}" height="${y(d)}"></rect>`).join("")}
</svg>`Observablehq Language Guide
ObservableHQ is a web-based platform for reactive JavaScript notebooks, primarily used for data visualization, analysis, and interactive computational documents. It allows users to create dynamic, shareable notebooks that update automatically as underlying data changes.
Primary Use Cases
- ▸Creating interactive data visualizations
- ▸Exploring datasets with live code experiments
- ▸Prototyping reactive visual analytics
- ▸Teaching and demonstrating JavaScript and D3 concepts
- ▸Collaborative analysis and storytelling with data
Notable Features
- ▸Reactive notebook environment where cells auto-update
- ▸Live JavaScript, TypeScript, and visualization rendering
- ▸Seamless integration with D3.js, Vega, Plot, and other libraries
- ▸Notebook forking and sharing with the community
- ▸Embedding visualizations and notebooks into web pages
Origin & Creator
Created by Mike Bostock, the creator of D3.js, ObservableHQ was launched in 2017 to enable collaborative, interactive data analysis and visualization in the browser.
Industrial Note
Primarily used for data visualization, interactive storytelling with data, scientific computing, and teaching JavaScript-based data analysis. Not intended for building production-grade full-stack applications.