Public
Edited
Jan 23, 2023
{
let data = [10,40,30]
let resultat = "<svg>\n"
data.map((d, i) => {
resultat += `<rect x=${30*i} y=${100-d} width=10 height=${d}></rect>\n`
})
resultat += "</svg>"
return md`${resultat}`
}
{
const svg = d3.create("svg")
let data = [10, 40, 30]
data.map((d, i) => {
svg.append("rect")
.attr("x",20*i)
.attr("y", 100-d)
.attr("width", 10)
.attr("height", d)
})
return svg.node()
}
{
const svg = d3.create("svg")
let data = [10, 40, 30, 20, 10, 100]
const y = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([0,100])
const x = d3.scaleBand()
.domain(d3.range(data.length))
.range([0,100])
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",(d, i) => x(i))
.attr("y", (d) => 100-y(d))
.attr("width", x.bandwidth()-1)
.attr("height", (d) => y(d))
return svg.node()
}
height = 300
chart = {
const height = 300
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("text")
.attr("x", 50)
.attr("y", 20)
.text("MON TITRE")
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const h = 300 - margin.top - margin.bottom
const w = height - margin.left - margin.right
let data = [10, 40, 30, 20, 10, 100, 10, 10, 10, 10]
const y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([margin.top, height - margin.top])
const x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.left - margin.right])
console.log(x.domain())
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => x(i))
.attr("y", (d, i) => height - y(d) - margin.top ) // data[i]
.attr("width", x.bandwidth() - 1)
.attr("height", (d, i) => y(d))
const xAxis = g => g
.attr("transform", `translate(0,${h+31})`)
.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();
}
{
const svg = d3.create("svg")
let data = [ [10, 40], [10, 20], [40, 10],[50, 20], [10, 10]]
let c = d3.scaleOrdinal()
.domain(["A", "B"])
.range(["red", "blue"])
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("fill", d => c(d[2]))
.attr("r", 5)
return svg.node()
}
iris = FileAttachment("iris.csv").csv().then(d =>{
d.forEach( e => {
e.sepal_length = +e.sepal_length
e.sepal_width = +e.sepal_width
e.petal_length = +e.petal_length
e.petal_width = +e.petal_width
})
return d
})
{
const height = 300
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
let data = iris
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const h = 300 - margin.top - margin.bottom
const w = height - margin.left - margin.right
const x = d3.scaleLinear()
.domain([d3.min(data, d => d.sepal_width),
d3.max(data, d => d.sepal_width)])
.range([margin.top, h])
const y = d3.scaleLinear()
.domain([d3.min(data, d => d.sepal_length),
d3.max(data, d => d.sepal_length)])
.range([margin.left, w])
const color = d3.scaleOrdinal(d3.schemeCategory10)
svg.selectAll("#circle")
.data(data)
.enter()
.append("circle")
.attr("id", "circle")
.attr("cx", d => x(d.sepal_width))
.attr("cy", d => y(d.sepal_length))
.attr("fill", d => color(d.species))
.attr("r", 5)
svg.selectAll("rect").data(color.domain())
.enter()
.append("rect")
.attr("x", 400)
.attr("y", (d, i) => 15 + i * 30)
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => color(d))
svg.selectAll("text").data(color.domain())
.enter()
.append("text")
.attr("x", 400+15)
.attr("y", (d, i) => 15 + i * 30 +10)
.text(d => d)
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()
}
parseDate=d3.timeParse("%b %Y")
stocks = FileAttachment("stocks.csv").csv().then(d =>{
d.forEach( e => {
e.price = +e.price
e.date = parseDate(e.date)
})
return d
})
line = {
const height = 300
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("text")
.attr("x", 50)
.attr("y", 20)
.text("MON TITRE")
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const h = 300 - margin.top - margin.bottom
const w = height - margin.left - margin.right
let data = stocks
const y = d3.scaleLinear()
.domain([0, 100])
.range([height - margin.top, margin.top])
const x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.left - margin.right])
const line = d3.line()
.x((d, i) => x(i)).y(d => y(d.price))
svg.selectAll(".line").data([data])
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "black")
const xAxis = g => g
.attr("transform", `translate(0,${h+31})`)
.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();
}
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.
