Data visualization and hacktivism from Buenos Aires, Argentina.
(A Graph designer trying to code)
colorScale = d3.scaleOrdinal(d3.schemeDark2);
lineChart = function (data, style) {
const dimension = { width: width+200, height: style.height, margin: style.margin }
let xDomain = ["0", "1", "2", "3", "4", "5"];
let xScale = d3.scalePoint()
.domain(xDomain)
.range([dimension.margin, width - dimension.margin]);
let yScale = d3.scalePow()
.exponent(1)
.domain([25, 100]).nice()
.range([dimension.height - dimension.margin, dimension.margin])
let xAxis = d3.axisBottom()
.scale(xScale)
let yAxis = d3.axisLeft()
.scale(yScale)
let line = d3.line()
.curve(d3.curveNatural)
.x(d => xScale(d.x))
.y(d => yScale(d.y));
let mouseover = function(d) {
d3.select("#tooltip")
.text(d.rubro);
d3.selectAll(".chart-lines path")
.attr("stroke", "#CCC");
d3.select(this)
.attr("stroke", "#000")
.attr("stroke-width", 5);
var points = d3.select(".chart-points")
.selectAll("circle")
.data(d.data)
.enter();
points.append("line")
.attr("x1", d => xScale(d.x))
.attr("x2", d => xScale(d.x))
.attr("y1", d => yScale(d.y))
.attr("y2", d => yScale(20))
.attr("stroke", "#DDD")
.attr("stroke-dasharray", "5 5");
points.append("line")
.attr("x1", d => xScale("0"))
.attr("x2", d => xScale(d.x))
.attr("y1", d => yScale(d.y))
.attr("y2", d => yScale(d.y))
.attr("stroke", "#DDD")
.attr("stroke-dasharray", "5 5");
points.append("circle")
.attr("fill", "black")
.attr("cx", d => xScale(d.x))
.attr("cy", d => yScale(d.y))
.attr("r", 5);
points.append("text")
.attr("x", d => xScale(d.x) - 5)
.attr("y", d => yScale(d.y) + 15)
.attr("dy", "0.35em")
.attr("text-anchor", "end")
.attr("font-size", "0.75em")
.text(d => d.y.toFixed(1));
}
let mouseout = function(d) {
d3.select("#tooltip").text("");
d3.selectAll(".chart-lines path")
.attr("stroke", style.stroke)
.attr("stroke-width", style.stroke_width);
d3.select(".chart-points").selectAll("*").remove();
}
const svg_plot = d3.create("svg")
.attr("viewBox", [0, 0, dimension.width, dimension.height])
svg_plot.append("text")
.attr("id", "tooltip")
.attr("text-anchor", "middle")
.attr("font-size", "1rem")
.attr("x", 3 * dimension.width / 4)
.attr("y", dimension.height / 4)
.attr("fill", style.fill);
svg_plot.append('g')
.attr('transform', `translate(0, ${dimension.height - dimension.margin})`)
.call(xAxis);
svg_plot.append('g')
.attr('transform', `translate(${dimension.margin}, 0)`)
.call(yAxis);
const points = svg_plot.append("g")
.attr("class", "chart-points");
const paths = svg_plot.append("g")
.attr("class", "chart-lines")
.selectAll("path")
.data(data)
.enter();
paths.append("path")
.attr("fill", "none")
.attr("d", d => line(d.data))
.attr("stroke", d=>colorScale(d.data[5].y))
.attr("stroke-width", style.stroke_width)
.attr("fill-opacity", 0)
.style("mix-blend-mode", "multiply")
//.on("mouseenter", mouseover)
//.on("mouseleave", mouseout)
;
paths.append("text")
.attr("text-anchor", "start")
.attr("font-size", "11px")
.attr("x", d=>xScale(d.data[5].x)+5)
.attr("dy", 4)
.attr("y", d=>{
return yScale(d.data[5].y)})
.attr("fill", d=>colorScale(d.data[5].y))
.text(d=>d.rubro+" (" + d3.format(".3s")(d.data[5].y)+"%)")
;
return svg_plot.node();
}
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.
