data analyst • mediapart
Published
Edited
May 12, 2021
Importers
// Plot.barY(data, Plot.groupX({y: "sum"}, {x: "OrderMonth", y: "SalesAmount", fill: "#4e79a7"}))
Plot.plot({
marginLeft: 60,
y: {
grid:true,
nice: true,
label: "visits"
},
x: {
tickFormat: Plot.formatMonth("en", "short"),
nice: true
},
opacity: {
domain: [d3.min(stats, d=>d.year), d3.max(stats, d=>d.year)],
range: [0,1]
},
marks: [
// Plot.ruleY([0]),
Plot.line(stats, Plot.groupX(
{ y: 'sum' },
{
x: 'month',
z: 'year',
y: 'visits',
opacity:'year',
title: 'year'
})),
Plot.text(stats, {
// transform: (d,i) => {
// console.log(d,i)
// return (d,i)
// },
x: 'month',
y: 'visits',
text: 'year'
})
]
})
// Plot.text(stocks, Plot.selectLast({x: "Date", y: "Close", z: "Symbol", text: "Symbol", textAnchor: "start", dx: 3}))
preformattedData = [ ...data.entries() ].map(
(year, months) => ({
year: year[0],
months: [ ...year[1].entries()].map(m => ({ month: m[0], visits: m[1] }))
})
)
data = {
let data = d3.rollup(stats, days => d3.rollup(days, v=>d3.sum(v, d=>d.visits), d=> d.month), d => d.year)
return data
}
stats = {
let data = d3.merge(raw)
data = data.map( d => {
let date = d['']
let year = date.getFullYear()
let month = date.getMonth()
let visits = d['nb_visits']
return { date, year, month, visits }
})
return data
}
raw = Promise.all(resources.map(async r => await d3.csv(r['url'], d3.autoType))).then( v => v)
resources = {
let dataset = await d3.json('https://www.data.gouv.fr/api/1/datasets/statistiques-de-consultation-de-data-gouv-fr/')
let data = dataset['resources']
return data
}
margin = {
return {
left: 70,
right: 70,
top: 20,
bottom: 35
}
}
height = 600
import { datasetCard } from '@taniki/datagouvfr-oembed'
Plot = require("@observablehq/plot@0.1")
d3 = require('d3')
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.
