scale = d3.scaleLinear()
.domain([0, 100]) // Вхідні дані: від 0 до 100
.range([0, 500]); // Вихідні значення: від 0 до 500 пікселів
scale(50);
scaleColor_1 = d3.scaleLinear()
.domain([0, 100]) // Вхідні дані: від 0 до 100
.range(["yellow", "red"]); // Вихідні значення: від жовтого до червоного пікселів
//scaleColor_1(50)
chart = {
const data = [3000, 2500, 2000, 3000, 2500, 1000];
const margin = {top: 50, right:50, bottom: 50, left: 50}
const width = 400;
const height = 350;
const minVal = d3.min(data, d => d);
const maxVal = d3.max(data, d => d);
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height);
//Створюємо шкалу
const x = d3.scaleLinear()
.domain([0, maxVal])
.range([margin.left, width - margin.left - margin.right]);
const y = d3.scaleBand()
.domain(d3.range(data.length))
.range([height - margin.top, margin.bottom])
.padding(0.1)
// const colorScale = d3.scaleLinear()
// .domain([0,4])
// .range(["green", "blue"]);
// i % 2 === 0 - перевіряє чи число парне. Якщо остача від ділення дорівнює 0, тоді застосовує правило
function stylizeAxis() {
svg.selectAll("text")
.style("fill", (d, i) => i % 2 === 0 ? "orange" : "blue" );
}
// Додаємо шкали на графіку
const xAxis = d3.axisBottom(x)
.ticks(4)
.tickValues([0, 1000, 3000]);
const yAxis = d3.axisLeft(y);
svg.append("g")
.attr('class', "x-axis")
.attr('transform', `translate(0, ${height - 50})`) //переносить шкалу зверху до низу
.call(xAxis) //call це спосіб застосувати функцію до всієї вибірки
.call(stylizeAxis);
svg.append("g")
.attr('class', "y-axis")
.attr('transform', `translate(${margin.left}, 0)`)
.call(yAxis)
svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(0))
.attr("y", (d, i) => y(i))
.attr("width", d => x(d)-x(0))
.attr("height", y.bandwidth())
.attr("fill", "red")
// .attr("fill", (d, i) => colorScale(i))
.attr("opacity", "0.8");
svg
.selectAll("text.label")
.data(data)
.join("text")
.attr("class", "label")
.attr("x", d => x(d) + 10)
.attr("y", (d,i) => {
return y(i) + y.bandwidth() / 2;
})
.attr("fill", "#001b42")
.text(d => d)
.attr('text-anchor', "start");
return svg.node();
}
Promise.all([
d3.csv("data1.csv"),
d3.json("data2.json")
]).then(([data, dictionary]) => {
// ...
}).catch(error => {
console.error("Помилка завантаження даних", error);
});
filtered = d3.filter(df, d => d.country === "AUSTRIA")
newData = d3.map(filtered, d => {
return {
"value":d.SD,
"country": d.country,
"monthFull": d.Month,
"month": new Date(d.Month).getMonth() + 1
}
})
groupedByProduct = d3.group(df, d => d.country);
groupedByProductAndValue = d3.group(df,
d => d.country, //група верхнього порядку
d => d.SD //вкладена група
);
// Агрегація значення за групою
totalByCountry = d3.rollup(df,
v => d3.sum(v, d => d.SD), // функція агрегації
d => d.country // ключ групування
);
//Щоб перетворити результат агрегації на масив обʼєктів:
totalByCountryArray = Array.from(totalByCountry, ([country, SD]) => ({ country, SD }));
// Множинні агрегації
statsByCountry = d3.rollup(df,
v => ({
min: d3.min(v, d => d.SD),
max: d3.max(v, d => d.SD),
median: d3.median(v, d => d.SD)
}),
d => d.country
)
mean_SD_by_country_by_month.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
