<svg width="600" height="220"> <!-- add 50 px margin from the left side -->
<rect x="0" y="0" width="300" height="25" fill="red"/> <!-- change color to red and add black stroke -->
<rect class="bar" x="0" y="35" width="250" height="25" fill="#001b42"/> <!-- add class "bar" -->
<rect x="0" y="70" width="200" height="25" style="fill:red" fill="#001b42" /> <!-- style="fill: red" -->
<rect x="0" y="105" width="300" height="25" fill="#001b42" /> <!-- rotate by 50 degrees style="transform: rotate(50deg)"-->
<rect x="0" y="140" width="250" height="25" fill="#001b42"/> <!-- hide element style="display: none"-->
<rect x="0" y="175" width="100" rx= '10' height="25" fill="#001b42"/> <!-- round the corners*: атрибути rx ry -->
</svg>
<svg width="1000" height="200">
<!-- Circle -->
<g transform="translate(200, 100)">
<circle cx="1500" cy="50" r="25" fill="steelblue"/>
<circle cx="100" cy="75" r="25" fill="orange"/>
</g>
<!-- Polygon -->
<polygon points="100,30 130,70 100,110 70,70" fill="steelblue" />
<!-- Line -->
<line x1="10" y1="10" x2="500" y2="100" stroke="green" stroke-width="3"/>
<!-- Polyline -->
<polyline points="0,100 50,25 50,75 100,0" fill="none" stroke="red" stroke-width="3" />
</svg>
<svg width="1000" height="250">
<!-- Path -->
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 60 H 100 200" stroke="black" fill="transparent"/>
</svg>
<svg width="800" height="200">
<g fill="red" transform="translate(100,0)"> <!-- дозволяє маніпулювати всією групою елементів -->
<rect x="0" y="0" width="300" height="25"/>
<rect x="0" y="35" width="250" height="25"/>
<rect x="0" y="70" width="200" height="25"/>
<rect x="0" y="105" width="300" height="25"/>
<rect x="0" y="140" width="250" height="25"/>
<rect x="0" y="175" width="100" height="25"/>
</g>
</svg>
<svg width="400" height="100">
<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();
}
<svg width={width} height="0">
<g fill="white" stroke="currentColor" stroke-width="1.5">
{#each data as d, i}
<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />
{/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.
