Public
Edited
Jun 17, 2024
// Ici je définie les data
data = FileAttachment("penguins.csv").csv({typed: true})
// Puis ci-dessous je crée une table à partir de data.
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Sortir un graph Plot
Voici un graph mettant en rapport la longueur du bec et la masse corporel. Leur sexe est symbolisé par la couleur.
Plot.plot({
inset: 8,
grid: true,
color: {
legend: true,
},
marks: [
Plot.dot(data, {x: "flipper_length_mm", y: "body_mass_g", stroke: "sex"})
]
})
// Là j'isole les species
species = _.uniqBy(data.map(d => d.species))
// ici je crée le selecteur. J'aimerais ajouter une option au selecteur : ALL, mais je vois pas comment faire.
viewof speciesselect = Inputs.select(species, {value: "Tous", label: "Select one"})
// la je montre l'espèce séléctionnée
speciesselect
// la je crée le array pour mon graph masi je sais pas trop pourquoi ni comment haha
selectionspecies = data.filter(d => speciesselect.includes(d.species))
selectionspecies
X
body_mass_g
Y
flipper_length_mm
Color
sex
Size
—
Facet X
—
Facet Y
—
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.
{
let text = {label: '', value: ''}
// setupDimensions
const width = configWidth - margin.left - margin.right
const height = configHeight - margin.top - margin.bottom
const radius = Math.min(configWidth, configHeight) / 2
const thickness = 40
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom));
// initialize the donut holder
const container = svg.append('g')
.attr('class', 'donut')
.attr('transform', 'translate(' + (width / 4 + margin.left / 2) + ',' + (height / 2 + margin.top) + ')')
const textGroup = container.append('g')
.attr('class', 'text-group')
textGroup
.append('text')
.attr('font-size', '30')
.attr('class', 'name-text')
.attr('text-anchor', 'middle')
.attr('dy', '-1.2em')
textGroup
.append('text')
.attr('font-size', '25')
.attr('class', 'value-text')
.attr('text-anchor', 'middle')
.attr('dy', '.6em');
const legendContainer = svg.append('g')
.attr('class', 'legendOrdinal')
// this might not be the best way to figure out where the legend should go
.attr('transform', `translate( ${3.5 * radius}, ${2 * margin.top})`)
const themeColors = d3colors.schemeSet1
const color = d3.scaleOrdinal(themeColors)
.domain(data.map((d) => d.species))
// create the arc function
const arc = d3.arc()
.innerRadius(radius - thickness)
.outerRadius(radius)
// creat the pie function
const pie = d3.pie()
.value((d) => d.species)
.sort(null)
// renderArcs
container.append('g')
.attr('class', 'donut-arcs')
// add the arcs
.selectAll('path')
.data(pie(data))
.enter()
.append('g')
.append('path')
.attr('d', arc)
.attr('fill', (d) => color(d.data.species))
return svg.node()
}
margin = ({top: 50, right: 20, bottom: 50, left: 250})
configWidth = 850
configHeight = 500
Importer librairies D3
// import { legendColor } from "d3-svg-legend"
d3colors = require("https://d3js.org/d3-scale-chromatic.v1.min.js")
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.
