Тема 4. SVG і вступ до D3.js / UCU

UCU

Workspace

Public

Edited

Apr 30

Fork of Тема 4. SVG і вступ до D3.js

</svg>

</g>

</svg>

</svg>

</g>

</svg>

<text x="0" y="20" style="font-size: 15px; fill: red;">Hello world!</text>

<text x="0" y="60" font-size="15px" fill="red">Hello world!</text>

</svg>

chart = {

// const data = [300, 250, 30000, 300, 250, 100];

//Визначаємо висоту і ширину

const width = 900;

const height = 250;

//Створюємо svg

const svg = d3.create("svg")

//.attr("viewBox", [0, 0, width, height]) // атрибут, що відповідає за responsiveness svg

.attr("width", width)

.attr("height", height);

var valName = "value"

//Додаємо bar стовпчики відновідно до наявних даних

svg

.selectAll("rect")

.data(data_2) //спробувати інші дані

.join("rect")

.attr("x", 40)

//(d) => d - key concept of d3.js

//function(d) { return .... } у старих версіях (v3)

.attr("y", (d, i) => {

console.log("d",d);

console.log("i",i);

return 30 + i * 30})

.attr("width", d => d[valName])

.attr("height", 25)

.attr("fill", "#001b42")

.attr("class", "bar")

//Додаємо text (bar labels) відновідно до наявних даних

svg

.selectAll("text")

.data(data_2)

.join("text")

.attr("x", 0)

.attr("y", (d,i) => 45 + i * 30)

.attr("fill", "#001b42")

.text(d => d.name);

return svg.node();

}

{#each data as d, i}

{/each}

</g>

</svg>

chart2 = {

let width = 600, height = 400

//Random data

const circlesData = d3.range(1, 1000, 10);

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

svg.selectAll("circle")

.data(circlesData)

.join("circle")

.attr("cx", d => {

let newWidth = width * 0.8;

return Math.random() * newWidth;

})

.attr("cy", d => Math.random() * height)

.attr("r", 5)

.attr("fill", "red")

.attr("opacity", 0.5)

return svg.node()

}

data = [300, 250, 200, 300, 250, 100]

data_2 = [

{name: "A", value: 300},

{name: "B", value: 250},

{name: "C", value: 200},

{name: "D", value: 300},

{name: "E", value: 250},

{name: "F", value: 100}

]

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.

Learn more