Published
Edited
Mar 12, 2020
md`# Three basic charts`
md`This is written to accompany a [Codementor article](https://www.codementor.io/@milesbryony/d3-js-three-basic-charts-14emhwht58).`
charts = {
//draw svg
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
//set x and y scales
const years = d3.set(my_data, d => d.year).values();
const y_max = d3.max(my_data, d => d.value);
const x_scale = d3.scaleBand().domain(years).range([0,width - (margin*2)]);
const y_scale = d3.scaleLinear().domain([0,y_max]).range([height - (margin*2),0]);
//draw x and y axis
svg.append("g")
.call(d3.axisBottom(x_scale))
.attr("transform","translate(" + margin + "," + (height-margin) + ")");
svg.append("g")
.call(d3.axisLeft(y_scale))
.attr("transform","translate(" + margin + "," + margin + ")");
//define line and area
const line = d3.line()
.x(d => x_scale(d.year))
.y(d => y_scale(d.value));
const area = d3.area()
.x(d => x_scale(d.year))
.y0(d => y_scale(0))
.y1(d => y_scale(d.value));
//append data
//first join data for my_group (one element per row in data)
var my_group = svg.selectAll('.charts_group')
.data(my_data, d => d.id);
//exit and remove
my_group.exit().remove();
//enter new groups
var enter = my_group.enter()
.append("g")
.attr("class","charts_group");
//append elements to new group (elements for all three chart)
enter.append("rect").attr("class","chart_element chart_rect");
enter.append("circle").attr("class","chart_element chart_dot");
//merge
my_group = my_group.merge(enter);
//now join data for line_group - one element per dataset.
var line_group = svg.selectAll('.line_group')
.data([my_data]);
//exit and remove
line_group.exit().remove();
//enter new groups
var line_enter = line_group.enter()
.append("g")
.attr("class","line_group");
//append elements to new group (elements for all three chart)
line_enter.append("path").attr("class","chart_element chart_line");
line_enter.append("path").attr("class","chart_element chart_area");
//merge
line_group = line_group.merge(line_enter);
//now set the animation.
let position = 0;
let chart_type = ["bar","scatter","line"];
new_chart();
var my_interval = setInterval(function(){new_chart();}, 4000);
function new_chart() {
//loop through data,draw a different chart each time
if(position <= chart_type.length){
d3.selectAll(".chart_element").attr("opacity",0);
if(chart_type[position] === "bar"){
draw_bar();
} else if (chart_type[position] === "scatter"){
draw_scatter();
} else if(chart_type[position] === "line"){
draw_line();
};
position += 1;
if(position === chart_type.length){
position = 0;
}
}
}
function draw_bar(){
my_group.select(".chart_rect")
.attr("x",d => x_scale(d.year))
.attr("y", d => y_scale(d.value))
.attr("width",x_scale.bandwidth())
.attr("height",d => y_scale(0) - y_scale(d.value))
.attr("fill","lightblue")
.attr("transform","translate(" + margin + "," + margin + ")")
.attr("opacity",1);
}
function draw_scatter(){
my_group.select(".chart_dot")
.attr("cx",d => x_scale(d.year) + (x_scale.bandwidth()/2))
.attr("cy", d => y_scale(d.value))
.attr("r", 10)
.attr("fill","red")
.attr("transform","translate(" + margin + "," + margin + ")")
.attr("opacity",1);
};
function draw_line(){
line_group.select(".chart_line")
.attr("d", line)
.attr("fill","none")
.attr("stroke","green")
.attr("stroke-width",1)
.attr("transform","translate(" + (margin + (x_scale.bandwidth()/2)) + "," + margin + ")")
.attr("opacity",1);
line_group.select(".chart_area")
.attr("d", area)
.attr("stroke","none")
.attr("fill","green")
.attr("fill-opacity",0.2)
.attr("transform","translate(" + (margin + (x_scale.bandwidth()/2)) + "," + margin + ")")
.attr("opacity",1);
};
return svg.node();
}
height = 600;
width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
margin = 40;
my_data = [
{"year":1999,"value":55},{"year":2000,"value":85},{"year":2001,"value":105},{"year":2002,"value":120},{"year":2003,"value":130},{"year":2004,"value":150},{"year":2005,"value":155},{"year":2006,"value":165},{"year":2007,"value":175},{"year":2008,"value":180}
]
d3 = require("d3@5")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.