Public
Edited
Jan 30, 2023
import {data, chart} from "22325f7fd4f0addd"
chart()
grouped_rollup = Array.from(
d3.rollup(data,
v => d3.mean(v, v => v.price),
d => d.date.getFullYear(),
d => d.symbol)
)
data_grouped = d3.rollup(data, v => d3.max(v, v => v.price), d => d.symbol)
symbols = [...grouped_rollup[0][1]].map(d => d[0])
data
years = grouped_rollup.map(d => d[0])
grouped_bar_chart(grouped_rollup)
grouped_bar_chart = (grouped_rollup) => {
const height = 400
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
let c = d3.scaleOrdinal(d3.schemeCategory10).domain(symbols)
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const x1 = d3.scaleBand()
.domain(years)
.range([margin.left, width - margin.right])
.padding(.5)
const x2 = d3.scaleBand()
.domain(symbols)
.range([0, x1.bandwidth()])
const y = d3.scaleLinear()
.domain(d3.extent(data, d => d.price))
.range([height - margin.bottom, margin.top])
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x1))
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
// let c = d3.scaleOrdinal(d3.schemeCategory10).domain(grouped.map(d => d[0]))
let g_enter = svg.selectAll(".groups").data(grouped_rollup).enter()
let g = g_enter.append("g")
.attr("class", "groups")
.attr("fill", "none")
.attr("stroke", "black")
.attr("transform", d => `translate(${x1(d[0])}, 0)`)
g_enter.append("rect")
//.attr("stroke", "black")
.attr("fill", "none")
.attr("x", d => x1(d[0]))
.attr("y", d => 0)
.attr("height", d => height - margin.bottom)
.attr("width", d => x1.bandwidth())
let bars = g.selectAll(".bar").data(d => d[1]).enter()
.append("rect")
.attr("class", "bar")
.attr("fill", d => c(d[0]))
.attr("stroke", "black")
.attr("x", d => x2(d[0]))
.attr("y", d => height - y(d[1]))
.attr("height", d => y(d[1]) - margin.bottom)
.attr("width", d => x2.bandwidth())
.on("mouseenter", (e, d) => {
d3.selectAll(".bar")
.attr("opacity", .2)
d3.select(e.target)
.attr("stroke", "red")
.attr("opacity", 1)
svg.append("text")
.attr("class", "tooltip")
.attr("font-size", 10)
.attr("transform", `translate(${e.layerX},${e.layerY})`)
.text(d[0] + " : " + d[1])
})
.on("click", (e, d) => {
d3.select(e.target)
.attr("fill", "yellow")
})
.on("mouseover", (e, d) => {
d3.select(".tooltip")
.attr("transform", `translate(${e.layerX + 50},${e.layerY})`)
})
.on("mouseleave", d => {
d3.selectAll(".bar")
.attr("stroke", "black")
.attr("opacity", 1)
d3.select(".tooltip").remove()
})
return svg.node();
}
grouped_rollup2 = Array.from(
d3.rollup(data,
v => d3.mean(v, v => v.price),
d => d.date.getFullYear(),
d => d.symbol)
)
grouped_rollup3 = Array.from(
d3.rollup(data,
v => d3.mean(v, v => v.price),
d => d.symbol,
d => d.date.getFullYear())
)
geomap = FileAttachment("departements-version-simplifiee.geojson").json()
{
let projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800)
let path = d3.geoPath().projection(projection);
const height = 500;
let svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
let g = svg.append("g");
g.selectAll("path")
.data(geomap.features)
.join("path")
.attr("d", path)
.style("fill", function (d) {
var value = d.geometry.coordinates;
return '#000'
})
.attr("stroke", "#ffffff");
d3.csv("covid-06-11-2021.csv").then(function(data){
var cleanData = data.filter(d => d.sexe = 0);
color.domain([0,2000]);
})
return svg.node()
}
covid = FileAttachment("covid-06-11-2021.csv").csv()
covid0 = covid.filter( d => d.sexe == 0);
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.
