dataviz & research
Public
Edited
Sep 20, 2023
i = 7
j = 2 + k
viewof k = Inputs.range([100, 200])
viewof var_x = Inputs.select(cats)
viewof var_y = Inputs.select(cats)
scatterplot(var_x, var_y)
scatterplot = (var_x, var_y) => {
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const width = 400
const height = 300
// https://observablehq.com/@d3/margin-convention
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
const x = d3.scaleLinear()
.domain([d3.min(raw_dataset, d => d[var_x]),
d3.max(raw_dataset, d => d[var_x])])
.range([margin.left, width -margin.left-margin.right])
const y = d3.scaleLinear()
.domain([d3.min(raw_dataset, d => d[var_y]),
d3.max(raw_dataset, d => d[var_y])])
.range([margin.top, height -margin.top-margin.bottom])
const c = d3.scaleOrdinal().domain(species).range(d3.schemeCategory10)
svg.selectAll("circle").data(raw_dataset).enter().append("circle")
.attr("cx", d => x(d[var_x]))
.attr("cy", d => y(d[var_y]))
.attr("r", d => d[var_y])
.attr("fill", d => c(d["species"]))
const xAxis = g => g.append('g')
.attr('transform', `translate(0, ${height-margin.bottom-margin.top})`)
.call(d3.axisBottom(x))
const yAxis = g => g.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
svg
.call(xAxis)
.call(yAxis)
var legend = svg.selectAll(".legend")
.data(c.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d) { return c(d); })
.attr("transform", function(d, i) {
return "translate(" + (width -10) + "," + 10 + ")";
})
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.attr("font-size", 15)
.style("text-anchor", "end")
.text(function(d) { return d; });
return svg.node()
}
species = [...new Set(raw_dataset.map(d => d["species"]))]
raw_dataset = FileAttachment("iris.csv").csv()
cats = raw_dataset.columns.filter(d => d != "species")
dataset = raw_dataset.map(d => {
d.sepal_length = parseFloat(d.sepal_length)
d.petal_length = parseFloat(d.petal_length)
d.sepal_width = parseFloat(d.sepal_width)
d.petal_width = parseFloat(d.petal_width)
return d
})
dataset.map(d => parseFloat(d.sepal_length))
Math.max(...dataset.map(d => parseFloat(d.sepal_length)))
new Set(dataset.map(d => d.species))
Plot.dot(dataset,
{x: "petal_length",
y: "petal_width",
r: "petal_length",
fill: "species",
}).plot()
Plot.rectY(dataset, Plot.binX({y: "count"}, {x: "petal_length"})).plot()
edt = FileAttachment("edt-matiere.xlsx").xlsx()
e = edt.sheet("Sheet1", {headers: true})
csv_raw = FileAttachment("edt-matiere.csv").csv()
csv = csv_raw.map((e, i) => {
const d = Object.assign({}, e)
d.Date = parseTime(e.Date)
d.week = getISOWeekNumber(d.Date)
d.hour_start = parseHour(d.Heure.split("-")[0])
d.full_time_start = parseDateHour(d.Date + " " + d.Heure.split("-")[0])
d.index = i
return d
})
Plot.line(csv, {x: "Date", y: "index"}).plot()
groupes = [...new Set(csv.map(d => d["Groupe(s)"]))]
weeks = [...new Set(csv.map(d => d["week"]))]
heures = [...new Set(csv.map(d => d["Heure"]))]
hour_starts = [...new Set(csv.map(d => d["hour_start"]))]
parseTime = d3.timeParse("%m/%d/%Y")
viewof f = Inputs.checkbox(groupes, {value: groupes})
Plot.plot({
marks:[
Plot.dot(csv.filter(d => d["Groupe(s)"].length < 2 && f.indexOf(d["Groupe(s)"]) >= 0),
{x: "Date", y: "Groupe(s)", fill: "Groupe(s)"}
),
Plot.tickX(csv.filter(d => d["Groupe(s)"].length > 2 && f.indexOf(d["Groupe(s)"]) >= 0),
{x: "Date", y: "Groupe(s)", stroke: "Groupe(s)"})
]
})
getISOWeekNumber = (date) => {
const currentDate = new Date(date);
currentDate.setHours(0, 0, 0, 0); // Set the time to midnight to avoid time zone issues
// Find the Thursday in this week (ISO week starts on Monday)
currentDate.setDate(currentDate.getDate() + 3 - (currentDate.getDay() + 6) % 7);
// Calculate the year of the Thursday
const year = currentDate.getFullYear();
// Calculate the day number of the year for the Thursday
const dayNumber = Math.floor((currentDate - new Date(year, 0, 1)) / 86400000);
// Calculate the week number
const weekNumber = 1 + Math.floor(dayNumber / 7);
return weekNumber;
}
viewof w = Inputs.range(d3.extent(weeks), {step: 1})
Plot.plot({
padding: 0,
y: {
tickFormat: Plot.formatMonth()
},
color: {
scheme: "BuRd",
legend: true,
domain: [0, 10]
},
marks: [
Plot.cell(csv, Plot.group({fill: "count"}, {
x: d => d.Date.getUTCDate(),
y: d => d.Date.getUTCMonth(),
fill: "count",
inset: 0.5
})),
Plot.text(csv, Plot.group({fill: "count"}, {
x: d => d.Date.getUTCDate(),
y: d => d.Date.getUTCMonth(),
text: "count"
}))
]
})
parseHour = d3.timeParse("%H:%M ");
parseDateHour = d3.timeParse("%Y-%m-%d %H:%M ");
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.
