Software Engineer
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// svg.append("g")
// .call(xAxis)
// .selectAll("text")
// .attr("color", "gray")
// .attr("font-size", 12);
// svg.append("g")
// .call(yAxis)
// .selectAll("text")
// .attr("color", "gray")
// .attr("font-size", 12);
svg.append("g")
.attr("stroke", "#ffc709")
.attr("stroke-width", 1.5)
.attr("fill", "none")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 3);
// svg.append("g")
// .attr("font-family", "sans-serif")
// .attr("font-size", 10)
// .selectAll("text")
// .data(data)
// .join("text")
// .attr("dy", "0.35em")
// .attr("x", d => x(d.date) + 7)
// .attr("y", d => y(d.value))
// .text(d => d.value);
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#ffc709")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
svg.append("path")
.attr("fill", "#ffc709")
//.attr("fill-opacity", 0.5)
.attr("d", area(data));
svg.append("g")
.call(xAxis)
.selectAll("text")
.attr("color", "black")
.attr("font-size", 16)
//.attr("text-anchor", "start")
.attr("transform", `translate(15,35)rotate(90)`)
svg.append("g")
.call(yAxis)
.selectAll("text")
.attr("color", "black")
.attr("font-size", 16)
svg.append("g")
.call(grid);
return svg.node();
}
area = d3.area()
.x(d => x(d.date))
.y0(d => y(d.value))
.y1(d => y(0))
data_raw = ([
{date: '2007-05-14', value: 177301346.935},
{date: '2008-05-15', value: 70033260.64},
{date: '2009-05-17', value: 69005199.321},
{date: '2010-05-20', value: 58950223.5}
])
data = data_raw.map(({date, value}) => ({date: dateParser(date), value: value}))
//d3.autoType({date: "2007-04-23", close: "93.24"})
dateParser = d3.utcParse("%Y-%m-%d")
//data.map(d => d.date = dateParser(d.date))
line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.date))
.y(d => y(d.value))
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(d => brazil_time_format(d)).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(d => brazil_number_format(d)))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
grid = g => g
//.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.3)
.attr("stroke-width", 2)
.attr("stroke", "#ccc")
.call(g => g.append("g")
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom))
.call(g => g.append("g")
.selectAll("line")
.data(y.ticks())
.join("line")
.attr("y1", d => 0.5 + y(d))
.attr("y2", d => 0.5 + y(d))
.attr("x1", margin.left)
.attr("x2", width - margin.right));
margin = ({top: 30, right: 30, bottom: 60, left: 120})
height = 500
locale = (
{
"decimal": ",",
"thousands": ".",
"grouping": [3],
"currency": ["R$", ""],
"dateTime": "%d/%m/%Y %H:%M:%S",
"date": "%d/%m/%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
"shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
"months": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
"shortMonths": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]
}
)
brazil_locale = d3.formatDefaultLocale(locale);
brazil_time_locale = d3.timeFormatDefaultLocale(locale)
brazil_time_format = brazil_time_locale.utcFormat("%m/%y")
brazil_number_format = brazil_locale.format(",.2f")
d3 = require("d3@5")
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.
