Published
Edited
May 3, 2020
md`# Percentage change in MTA usage based on income`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var most_recent = ''
svg.append("g")
.attr("transform", "translate(-20, 565)" )
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", "translate(20, 0)")
.call(d3.axisLeft(y));
svg.append("g")
.selectAll('legendcircle')
.data(keys)
.enter()
.append("circle")
.attr("class", function(d){
return d})
.attr("cx", 700)
.attr("cy", function(d,i){ return 300 + i*25})
.attr("r", 3)
.style("fill", function(d){ return setColor(d)});
svg.append("g")
.selectAll('legendtext')
.attr('class', function(d){ return d})
.data(keys)
.enter()
.append("text")
.attr("x", 720)
.attr("y", function(d,i){ return 300 + i*25})
.style("fill", function(d){ return setColor(d)})
.text(function(d){ return d})
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
.on('click', function(d){
console.log(d)
if (most_recent == d || d == "All") {
d3.selectAll('circle').style("opacity",1);
d3.selectAll('text').on('mouseout', function(d){
filterOut(d);
console.log(d)});
d3.selectAll('text').on('mouseover', function(d){
filterOver(d)
d3.select(this).style("cursor", "pointer"); })
most_recent = ""
}
else{
d3.selectAll('circle').style("opacity", 0)
d3.selectAll('.' + d).style("opacity", 1)
d3.selectAll('text').on('mouseout', null)
d3.selectAll('text').on('mouseover', null)
most_recent = d
}
;})
.on('mouseover', function(d){
filterOver(d)
d3.select(this).style("cursor", "pointer");})
.on('mouseout', function(d) { filterOut(d)});
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("class", function(d){
if (d.line_name == "123"){ return "Red-123"}
if (d.line_name == "456"){ return "Green-456"}
if (d.line_name == "7") {return "Seven"}
return d.line_name})
.attr("cx", d => x(d.agi_avg))
.attr("cy", d => y(d.ent_percent))
.attr("r", 3)
.attr("stroke", function(d){ return setColor(d.line_name)})
.attr("stroke-width", 1.5)
.attr('fill', 'none')
.on('click', function(d){
console.log(this)});
return svg.node();
}
width = 800
height = 600
margin = ({top: 25, right: 20, bottom: 35, left: 40})
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.
