Observable Educators Network
Public
Edited
Jan 27
1 fork
d3
<svg>
<rect x=0 y=40 height=10 width=10></rect>
<rect x=20 y=10 height=40 width=10></rect>
<rect x=40 y=30 height=20 width=10></rect>
</svg>
{
let res = "<svg>";
const data = [10, 100, 20, 30, 5, 50, 200]
const scaleY = d3.scaleLinear().domain([0, 500]).range([0, 100]);
const scaleX = d3.scaleBand().domain(data).range([0, 200]);
data.map((d , i) => {
res += `<rect x=${scaleX(d)} y=${50-scaleY(d)} height=${scaleY(d)} width=10></rect>`
})
res += "</svg>"
return html`${res}`
}
{
const svg = d3.create("svg");
const data = [10, 20, 30, 50];
const scaleY = d3.scaleLinear().domain([0, d3.max(data)]).range([0, 50]);
const scaleX = d3.scaleBand().domain(d3.range(data.length)).range([0, 100]);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => scaleX(i))
.attr("y", d => 50 - scaleY(d)) // d => scaleY(d)
.attr("width", 20)
.attr("height", d => scaleY(d))
return svg.node()
}
viewof a = html`<select><option value='A'>A</select>`
a
{
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const w = 300
const h = 300
const svg = d3.create("svg").attr("width", w).attr("height", h);
const data = penguins
const titre = svg.append("text").attr("x", 100).attr("y", 20).text("MON TITRE")
const scaleY = d3.scaleLinear().domain([0, d3.max(penguins, d => d.culmen_length_mm)
]).range([300, 0]);
const scaleX = d3.scaleLinear().domain([0, d3.max(penguins, d => d.culmen_depth_mm)
]).range([0, 300]);
const color = d3.scaleOrdinal(d3.schemeCategory10) //d3.scaleOrdinal().domain(list_categories).range(["red", "blue"])
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d, i) => scaleX(d.culmen_depth_mm))
.attr("cy", (d, i) => scaleY(d.culmen_length_mm))
.style("fill", d => color(d.sex))
.attr("r", 3)
const legend = svg.selectAll("rect")
.data(list_categories)
.enter()
legend.append("rect")
.attr("x", 50)
.attr("y", (d,i) => 50 + i*20)
.attr("height", 10)
.attr("width", 10)
.style("fill", d => color(d))
legend.append("text")
.attr("x", 70)
.attr("y", (d,i) => 50 + i*20)
.text(d => d)
const xAxis = g => g
.attr("transform", `translate(0, ${280})`)
.call(d3.axisBottom(scaleX))
const yAxis = g => g
.attr("transform", `translate(${20}, 0)`)
.call(d3.axisLeft(scaleY))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node()
}
d3.max(penguins.map(d => d.culmen_length_mm))
list_categories = new Set(penguins.map(d => d.sex))
penguins
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
stocks = FileAttachment("stocks.csv").csv()
list_symbol = new Set(stocks.map(d => d.symbol))
stocks_parsed = stocks.map(d => {
let r = {}
r.symbol = d.symbol
r.date = new Date(d.date)
r.price = +d.price
return r
})
// https://observablehq.com/@d3/margin-convention
linechart = {
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const height = 500
const x = d3.scaleTime()
.domain(d3.extent(stocks_parsed, d=>d.date))
.range([margin.left, width - margin.right])
const y = d3.scaleLinear()
.domain(d3.extent(stocks_parsed, d=>d.price))
.range([height - margin.bottom, margin.top])
const color = d3.scaleOrdinal(d3.schemeCategory10)
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// svg.selectAll("circle").data(stocks_parsed).enter().append("circle")
// .attr("cx", (d, i) => x(d.date))
// .attr("cy", (d, i) => y(d.price))
// .style("fill", d => color(d.symbol))
// .attr("r", 3)
const grouped_data = d3.group(stocks_parsed, d => d.symbol)
console.log(grouped_data)
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.price))
svg.selectAll("path").data(grouped_data).enter().append("path")
.attr("d", d => line(d[1]))
.attr("stroke", d => color(d[0]))
.attr("fill", "none")
console.log(grouped_data)
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
width
// https://observablehq.com/@d3/margin-convention
template = {
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const height = 500
const x = d3.scaleLinear()
.domain([0, 1])
.range([margin.left, width - margin.right])
const y = d3.scaleLinear()
.domain([0, 1])
.range([height - margin.bottom, margin.top])
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
// https://observablehq.com/@d3/margin-convention
histogram = {
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const height = 500
const bins = d3.bin()(dataset)
const x = d3.scaleBand()
.domain(bins.map(d => d.x0))
.range([margin.left, width - margin.right])
.padding(0.1)
const y = d3.scaleLinear()
.domain([0, d3.max(bins, d => d.length)])
.range([height - margin.bottom, margin.top])
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.selectAll("rect").data(bins).enter().append("rect")
.attr("x", (d, i) => x(d.x0))
.attr("y", d => y(d.length))
.attr("width", (d, i) => x.bandwidth())
.attr("height", d => height - y(d.length) - margin.bottom)
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
dataset = Array.from({length: 20000}, d3.randomNormal(1, 1))
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.
