JavaScript | Python | Data Visualization | Web Development | Geology | Space | Analytics | IoT |
Learn, Build Stuff, and Figure Things Out
Public
Edited
Dec 6, 2022
d3 = import("d3")
<div id="chart"></div>
svg = d3.select("#chart")
.append("svg")
.attr("width", 500)
.attr("height", 500)
xScale = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0, 400])
.padding(0.2)
data = [
{name: "A", value: 10},
{name: "B", value: 20},
{name: "C", value: 30},
{name: "D", value: 40},
{name: "E", value: 50}
]
yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([400, 0])
xAxis = d3.axisBottom(xScale)
yAxis = d3.axisLeft(yScale)
svg.append("g")
.attr("transform", "translate(50, 0)")
.call(yAxis);
svg.append("g")
.attr("transform", "translate(50, 400)")
.call(xAxis)
bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => xScale(d.name) + 50)
.attr("y", d => yScale(d.value))
.attr("width", xScale.bandwidth())
.attr("height", d => 400 - yScale(d.value))
.attr("fill", "steelblue")
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.
