chart = {
const svg = d3.select(DOM.svg(w, h));
let circles = svg.selectAll("circle")
.data(Atentados)
.enter()
.append("circle")
.style('fill', d => scale.c(d.nkill))
.attr("cx", d => scale.x(d.imonth))
.attr("cy", d => scale.y(d.iyear))
.attr("r", d => scale.r(d.nkill));
let formatNumber = d3.format("");
let xaxis = svg.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${h - margin.bottom})`)
.call(d3.axisBottom()
.scale(scale.x)
.ticks(10)
.tickSize(-h)
.tickPadding(20)
.tickFormat(formatNumber));
let yaxis = svg.append("g")
.attr("class","y-axis")
.attr("transform",`translate(50,0)`)
.call(d3.axisLeft()
.scale(scale.y)
.ticks(20)
.tickSize(-h)
.tickPadding(10)
);
return svg.node();
}
scale = {
const x = d3.scaleLinear()
.domain(d3.extent(["0","12"]))
.range([margin.left, w - margin.right]);
const c = d3.scaleLinear()
.domain(d3.extent(Atentados, dk => dk.nkill))
.range(['#006F39', '#8F0000']);
const y = d3.scaleLinear()
.domain(d3.extent(Atentados, dy => dy.iyear))
.rangeRound([h - margin.bottom, margin.top]);
const r = d3.scaleLinear()
.domain(d3.extent(Atentados, dr => dr.nkill))
.range([1, 10]);
return {x:x, c:c, y:y, r:r}
}
style = html`<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;1,100;1,300&display=swap");
body {
font-family: 'Montserrat Alternates', sans-serif;
font-weight:400;
font-size:16px;
background-color:#e6ebe0;
}
svg {
background-color:#e6ebe0;
}
/*Defining test stylings*/
h1 {
margin-top: 0;
font-size: 2.5rem;
color:#f20666;
margin-buttom: 0;
font-weight:600;
}
h2 {
margin-top: 50;
font-size: 2rem;
margin-buttom: 50;
color:#f20666;
font-weight:600;
}
h3 {
margin-top: 30;
font-size: 1.2rem;
margin-buttom: 30;
color:#f20666;
font-weight:600;
}
h4 {
font-size: 0.5rem;
}
h5 {
font-size: 0.2rem;
}
h6 {
font-size: 0.1rem;
}
a, a:visited {
text-decoration: underline;
color:#f20666;
font-size: 1rem;
}
/*Defining chart stylings*/
circle {
fill-opacity:0.5;
}
/*Defining axis stylings*/
.y-axis text, .x-axis text {
font-family:'Montserrat Alternates', sans-serif;
font-weight:400;
font-size:10px;
opacity:1;
fill:#495867;
}
.x-axis path {
fill:none;
stroke-width:0;
stroke-opacity:1;
stroke:#495867;
}
.y-axis path {
fill:none;
stroke-width:0;
stroke-opacity:1;
stroke:#495867;
}
.y-axis line {
fill:none;
stroke-width:1;
stroke-opacity:1;
stroke:#495867;
stroke-dasharray:2;
}
.x-axis line {
fill:none;
stroke-width:0;
stroke-opacity:1;
stroke:#495867;
stroke-dasharray:2;
}
</style>`
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.
