Public
Edited
Jan 29, 2023
iris = FileAttachment("iris.csv").csv().then((d) => {
d.forEach(e => {
e.sepal_length = +e.sepal_length
e.sepal_width = +e.sepal_width
})
return d
})
Inputs.table(iris)
{
const height = 300
const svg = d3.create("svg")
.attr("viewBox", [-300, 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([0, d3.max(data, d => d.sepal_length)])
.range([margin.top + 20, h + 100])
const y = d3.scaleLinear()
.domain([d3.max(data, d => d.sepal_width), 0])
.range([height - margin.bottom , margin.top ])
const color = d3.scaleOrdinal(d3.schemeCategory10)
svg.selectAll("#circle")
.data(data)
.enter()
.append("circle")
.attr("id","circle")
.attr("cx", d => x(d.sepal_length))
.attr("cy", d => y(d.sepal_width))
.attr("fill", d => color(d.species))
.attr("r", 2)
// légende:
svg.selectAll("rect").data(color.domain())
.enter()
.append("rect")
.attr("x", 500)
.attr("y", (d, i) => 10 + i * 20)
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => color(d))
svg.selectAll("text").data(color.domain())
.enter()
.append("text")
.attr("x", 410)
.attr("y", (d, i) => 20 + i * 20)
.text(d => d)
const xAxis = (label) => (g) => g
.attr("transform", `translate(0, ${h + 20})`)
.call(d3.axisBottom(x))
.append('text')
.attr('class', "axis-label")
.text(label)
.attr('x', 350)
.attr('y', 25)
const yAxis = (label) => (g) => g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
.append('text')
.attr('class', 'axis-label')
.text(label)
.attr('transform', 'rotate(-90)')
.attr('x', 0)
.attr('y', -35) // Relative to the y axis.
svg.append("g")
.call(xAxis('sepal_length'));
svg.append("g")
.call(yAxis('sepal_width'));
return svg.node();
}
// font de la légende
html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@0;1&display=swap">
<style>
.axis-label {
fill: #000;
font-family: "Source Serif Pro", serif;
/* font-size: 5px; */
}
</style>
`
ScatterPlot=(dataset,var_x,var_y,c)=>{
const width=650
const height=650
const padding=130
const x=d3.scaleLinear()
.domain([d3.min(dataset,(d=>d[var_x])),d3.max(dataset,(d=>d[var_x]))])
.range([padding , width-padding])
const y=d3.scaleLinear()
.domain([d3.min(dataset,(d=>d[var_y])),d3.max(dataset,(d=>d[var_y]))])
.range([ height-padding , padding])
const svg= d3.create("svg")
.attr("width",width)
.attr("height",height)
const color=d3.scaleOrdinal(d3.schemeCategory10)
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("id", "circle")
.attr("cx", (d) => x(d[var_x]))
.attr("cy", (d) => y(d[var_y]))
.attr("fill", d => color(d[c]))
.attr("stroke", "black")
svg.selectAll("rect").data(color.domain())
.enter()
.append("rect")
.attr("x",width-padding+30)
.attr("y",(d,i)=>i*20+100)
.attr("width",10)
.attr("height",10)
.attr("fill",(d)=>color(d))
.attr("stroke","black")
const shape = d3.scaleOrdinal()
.domain(dataset.map(d => d[c]))
.range(d3.symbols.map(s => d3.symbol().type(s)()))
const marks = svg.selectAll(".marks")
.data(dataset)
.enter().append("path")
.attr("class", "marks")
.attr("transform", d => `translate(${x(d[var_x])},${y(d[var_y])})`)
.attr("fill", d => color(d[c]))
.attr("d", d => shape(d["species"]));
var group = Array.from(d3.group(dataset,d=>d[c]))
svg.selectAll("text").data(group)
.enter()
.append("text")
.attr("x",width-padding + 50)
.attr("y", (d,i) => i*20 + 110)
.text(d=>d[0])
svg.append("text")
.attr("x",(width-padding)/2 - 80,padding/2)
.attr("y",padding-50)
.text(" Variable Axis Y: " + var_y +" / " + " Variable Axis X: " +var_x)
const xAxis=d3.axisBottom(x)
const yAxis=d3.axisLeft(y)
svg.append("g")
.attr("transform","translate(0," + (height-padding) + ")")
.call(xAxis)
svg.append("g")
.attr("transform","translate(" + padding + ",0)")
.call(yAxis)
return svg.node();
}
DAT = ({petal_width: Data[0], sepal_length:Data[1], sepal_width:Data[2]})
import {select} from "@jashkenas/inputs"
ScatterPlot(iris,x,y,"species")
data2= FileAttachment("stocks.csv").csv()
Inputs.table(data2)
d3.group(data2, d=>d.symbol)
data = d3.extent(data2, d=>d.price)
d3.rollup(data2,v=>d3.sum(v,d=>d.price),d=>d.symbol)
date_parse = d3.timeParse("%b %Y")
stocks_parsed = data2.map(d => {
d.price = +d.price
d.date_parsed = date_parse(d.date)
return d
})
chart = {
const height = 500
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const h = height - margin.top - margin.bottom
const w = 900 - margin.left - margin.right
let data = Array.from(d3.group(stocks_parsed, d => d.symbol))
const y = d3.scaleLinear()
.domain([0, d3.max(stocks_parsed, d => d.price)])
.range([h, margin.top])
const x = d3.scaleTime()
.domain([d3.min(stocks_parsed, d => d.date_parsed), d3.max(stocks_parsed, d => d.date_parsed)])
.range([margin.left, w])
const line = d3.line()
.x((d, i) => x(d.date_parsed))
.y(d => y(d.price))
const color = d3.scaleOrdinal(d3.schemeCategory10)
svg.selectAll(".line").data([data[0][1], data[1][1], data[2][1], data[3][1]])
.enter()
.append("path")
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", d => color(d[0].symbol))
.attr("d", line)
const xAxis = g => g
.attr("transform", `translate(0, ${h})`)
.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);
svg.selectAll("rect").data(color.domain())
.enter()
.append("rect")
.attr("x", 65)
.attr("y", (d, i) => 60 + i * 15)
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => color(d))
svg.selectAll("#text").data(data)
.enter()
.append("text")
.attr("id","legende")
.attr("x", 80)
.attr("y", (d, i) => 70 + i * 15)
.text(d => d[0])
return svg.node();
}
bin = d3.bin().thresholds(42)
bin(Array.from(iris.map(d => d.petal_length)))
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 300]);
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const h = 300 - margin.top - margin.bottom
const w = 900 - margin.left - margin.right
const bars = bin(Array.from(iris.map(d => d.petal_length)));
const y = d3.scaleLinear()
.domain([d3.min(bars, d => d.length),d3.max(bars, d => d.length)])
.range([h, margin.top])
const x = d3.scaleLinear()
.domain([d3.min(iris, d => d.petal_length),d3.max(iris, d => d.petal_length)])
.range([margin.left, w])
svg.selectAll("rect")
.data(bars)
.join("rect")
.attr("fill", "black")
.attr("x", d => x(d.x0))
.attr("width", d => Math.max(0, x(d.x1) - x(d.x0)))
.attr("y", d => y(d.length))
.attr("height", d => y(0) - y(d.length));
const xAxis = g => g
.attr("transform", `translate(0, ${h})`)
.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();
}
scatterplotMatrix(iris, columns, 'species', width, height, padding, true)
ScatterplotMatrix2(iris, {
dimensions: [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width",
],
z: "species",
transform: normalizeMaxY
})
width = 964
height = 600
padding = 20
columns = iris.columns.filter(d => d !== "species")
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.
