Skip to content

Instantly share code, notes, and snippets.

@bdegley4789

bdegley4789/exampleD3.html

Created November 5, 2018 17:28
Show Gist options
  • Save bdegley4789/e637de5edb811eb43846f3b97dcedddb to your computer and use it in GitHub Desktop.
Save bdegley4789/e637de5edb811eb43846f3b97dcedddb to your computer and use it in GitHub Desktop.
Download ZIP
exampleD3
Raw
exampleD3.html
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script type = "text/javascript">
// Set the dimensions and margins of the graph
let margin = {
top: 30,
right: 225,
bottom: 55,
left: 25
},
width = 675 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Parse the date / time
let parseTime = d3.timeParse("%d-%b-%y");
// Set the X and Y ranges for the bar and line graphs.
let xBar = d3.scaleBand().range([25, width]).paddingInner(0.5).paddingOuter(0.25);
let xLine = d3.scalePoint().range([25, width]).padding(0.5);
let yBar = d3.scaleLinear().range([height, 0]);
let yLine = d3.scaleLinear().range([height, 0]);
let svg = d3.select('body').append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
// Gets the data from a JSON.
d3.json("https://gist.githubusercontent.com/btaase/576552170836dffed088b9c21f6aef1d/raw/a0175fc9abdb132f253058cf341661d1a11d27c4/bar_data.json", function (error, data) {
if (error) throw error;
// Format the data
data.forEach(function (d) {
d.Sprint = +d.Sprint;
d.Committed = +d.Committed;
d.Accepted = +d.Accepted;
});
// Scales the range of the data.
xBar.domain(data.map(function (d) {
return d.Sprint;
}));
xLine.domain(data.map(function (d) {
return d.Sprint;
}));
yBar.domain([0, 100]).nice();
yLine.domain([0, 100]).nice();
let rect = svg.selectAll("rect")
.data(data)
/*
Creates the first bar graph for Commmited values.
- Class: Describes the graphics as bars.
- Stroke: Sets the details of the streak on the outside of the bar.
- Fill: Sets the colors of the bars.
- X: Sets the location of the bars on the X-Axis.
- Width: Sets how wide the bars are.
- Y: Sets the location of the bars on the Y-Axis.
- Height: Sets how tall the bars are.
*/
rect.enter().append("rect")
.merge(rect)
.attr("class", "bar")
.style("stroke", "none")
.style("fill", "#3399FF")
.attr("x", function (d) {
return xBar(d.Sprint) + 150;
})
.attr("width", function (d) {
return xBar.bandwidth() + 10;
})
.attr("y", function (d) {
return yBar(d.Committed);
})
.attr("height", function (d) {
return height - yBar(d.Committed)
});
/**
* Adds the numbers for Accepted points vs Committed points
* on top of each of the bars.
*/
rect.enter().append("text")
.merge(rect)
.attr("class", "rect")
.attr("x", function (d) {
return xLine(d.Sprint) + 133;
})
.attr("y", function (d) {
return yLine(d.Committed) - 15;
})
.attr("font-size", "14")
.attr("font-weight", "bold")
.style("font-family","sans-serif")
.text(function (d) {
return d.Accepted + "/" + d.Committed
});
// Creates the second bar graph for Accepted values.
let accepted = rect.enter().append("rect")
.merge(rect)
.attr("class", "bar")
.attr("x", function (d) {
return xBar(d.Sprint) + 160;
})
.attr("width", function (d) {
return xBar.bandwidth() - 10;
})
.attr("y", function (d) {
return yBar(d.Accepted);
})
.attr("height", function (d) {
return height - yBar(d.Accepted)
});
let acceptedElements = accepted.nodes();
d3.select(acceptedElements[0]).style("fill", "#FF9933")
d3.select(acceptedElements[1]).style("fill", "#FF9933")
d3.select(acceptedElements[2]).style("fill", "#FF9933")
d3.select(acceptedElements[3]).style("fill", "#FF9933")
d3.select(acceptedElements[4]).style("fill", "#FF9933")
d3.select(acceptedElements[5])
.style("fill", "#FFB468")
.style("stroke", "black")
.style("stroke-width", "2")
.style("stroke-dasharray", ("5, 5"));
// Adds the sprint number below each bar.
rect.enter().append("text")
.merge(rect)
.attr("class", "rect")
.attr("x", function (d) {
return xLine(d.Sprint) + 150;
})
.attr("y", function (d) {
return 345;
})
.attr("font-size", "24")
.style("font-family","sans-serif")
.text(function (d) {
return d.Sprint;
});
// Adds the sprint ending date below each bar.
rect.enter().append("text")
.merge(rect)
.attr("class", "rect")
.attr("x", function (d) {
return xLine(d.Sprint) + 135;
})
.attr("y", function (d) {
return 370;
})
.attr("font-size", "16")
.style("font-family","sans-serif")
.text(function (d) {
var endingDate = new Date(d.EndDate);
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
return months[endingDate.getMonth()] + " " + endingDate.getDate();
});
// Creates the points for each of the Velocity values.
let points1 = svg.selectAll("circle.point1")
.data(data)
/*
Stroke: Sets the color of the outline of the circle.
Stroke-Width: Sets the width of the outline of the circle.
Fill: Sets the color of the inside of the circle.
CX & CY: Sets the X and Y dimensions of the point.
R: Sets the radius of the circle.
*/
let circles = points1.enter().append("circle")
.merge(points1)
.attr("class", "point1")
.style("stroke", "#4C0099")
.style("stroke-width", "2")
.style("fill", "white")
.attr("cx", function (d) {
return xLine(d.Sprint) + 155;
})
.attr("cy", function (d) {
return yBar(d.Committed - 25)
})
.attr("r", function (d) {
return 25;
});
let circleElements = circles.nodes();
d3.select(circleElements[5]).style("stroke-dasharray", ("4, 4"))
// Adds the numbers to the inside of each of the points.
points1.enter().append("text")
.merge(points1)
.attr("class", "point1")
.attr("x", function (d) {
return xLine(d.Sprint) + 135;
})
.attr("y", function (d) {
return yBar(d.Committed - 27)
})
.attr("font-size", "15px")
.style("font-family","sans-serif")
.text(function (d) {
let number = d.Accepted/d.Committed;
return number.toFixed(2);
})
.append('tspan')
.text(function (d) {
return d.Committed
})
.style('font-size', '10px')
.attr('dy', '2px');
// Adds the title to the graph.
svg.append("text")
.attr("x", 375)
.attr("y", 35)
.attr("text-anchor", "middle")
.style("font-size", "22px")
.style("font-family","sans-serif")
.text("Commitments");
// Adds the title to the graph.
svg.append("text")
.attr("x", 560)
.attr("y", 40)
.attr("text-anchor", "middle")
.style("font-size", "42px")
.style("font-family","sans-serif")
.text("B+");
// Adds a 'Trend Indicator' arrow to the top right corner of the graph.
svg.append("image")
.attr("xlink:href", "./images/trendIndicators/worse.svg")
.attr("x", 590)
.attr("y", 0)
.attr("width", 60)
.attr("height", 60);
/**
* Adds the 'Score' text on the left side of the graph, including
* the 'EXP' subtext.
*/
svg.append("text")
.attr("x", 35)
.attr("y", 40)
.attr("text-anchor", "left")
.style("font-size", "28px")
.style("font-family","sans-serif")
.text("Score")
.append('tspan')
.text('EXP')
.style('font-size', '14px')
.attr('dy', '2px');
// Adds the 'All-Time Score' numbers.
svg.append("text")
.attr("x", 35)
.attr("y", 90)
.attr("text-anchor", "left")
.style("font-size", "40px")
.style("font-family","sans-serif")
.text("0.93")
.append('tspan')
.text('37')
.style('font-size', '15px')
.attr('dy', '2px');
// Adds the 'All-Time Score' text.
svg.append("text")
.attr("x", 50)
.attr("y", 115)
.attr("text-anchor", "left")
.style("font-size", "15px")
.style("font-family","sans-serif")
.text("(All-Time)");
// Adds the 'Recent Score' numbers.
svg.append("text")
.attr("x", 35)
.attr("y", 160)
.attr("text-anchor", "left")
.style("font-size", "40px")
.style("font-family","sans-serif")
.text("0.96")
.append('tspan')
.text('53')
.style('font-size', '15px')
.attr('dy', '2px');
// Adds the 'Recent Score' text.
svg.append("text")
.attr("x", 50)
.attr("y", 190)
.attr("text-anchor", "left")
.style("font-size", "15px")
.style("font-family","sans-serif")
.text("(Recent)");
// Adds the 'All-Time Score' numbers.
svg.append("text")
.attr("x", 35)
.attr("y", 235)
.attr("text-anchor", "left")
.style("font-size", "40px")
.style("font-family","sans-serif")
.text("0.89")
.append('tspan')
.text('52')
.style('font-size', '15px')
.attr('dy', '2px');
// Adds the 'Recent Score' text.
svg.append("text")
.attr("x", 50)
.attr("y", 260)
.attr("text-anchor", "left")
.style("font-size", "15px")
.style("font-family","sans-serif")
.text("(Current)");
// Adds the 'Sprint' title to the bottom left corner of the graph.
svg.append("text")
.attr("x", 95)
.attr("y", 345)
.attr("text-anchor", "left")
.style("font-size", "25px")
.style("font-family","sans-serif")
.text("Sprint");
// Adds the 'End Date' title to the bottom left corner of the graph.
svg.append("text")
.attr("x", 97)
.attr("y", 370)
.attr("text-anchor", "center")
.style("font-size", "15px")
.style("font-family","sans-serif")
.text("End Date");
// Adds the outside border to the graph.
svg.append("rect")
.attr("x", 25)
.attr("y", 0)
.attr("height", height + 70)
.attr("width", width + 200)
.style("stroke", "black")
.style("fill", "none")
.style("stroke-width", "1px");
})
let margin2 = {
top: 30,
right: 0,
bottom: 55,
left: 0
},
width2 = 335 - margin2.left - margin2.right,
height2 = 400 - margin2.top - margin2.bottom;
let svg2 = d3.select('body').append('svg')
.attr("width", width2 + margin2.left + margin2.right)
.attr("height", height2 + margin2.top + margin2.bottom);
// Adds the title to the graph.
svg2.append("text")
.attr("x", 100)
.attr("y", 35)
.attr("text-anchor", "middle")
.style("font-size", "22px")
.style("font-family", "sans-serif")
.text("Legend");
// Adds the 'Trend Indicators' image to the top right corner of the legend.
svg2.append("image")
.attr("xlink:href", "./images/legend/arrows.svg")
.attr("x", 185)
.attr("y", -40)
.attr("width", 150)
.attr("height", 150);
// Adds a sample score value.
svg2.append("text")
.attr("x", 35)
.attr("y", 110)
.attr("text-anchor", "left")
.style("font-size", "40px")
.style("font-family", "sans-serif")
.text("0.32")
.append('tspan')
.text('46')
.style('font-size', '15px')
.attr('dy', '2px');
// Adds a sample score value.
svg2.append("text")
.attr("x", 135)
.attr("y", 110)
.attr("text-anchor", "left")
.style("font-size", "40px")
.style("font-family", "sans-serif")
.text("= Score")
.append('tspan')
.text('Scale')
.style('font-size', '15px')
.attr('dy', '2px');
svg2.append("text")
.attr("x", 180)
.attr("y", 140)
.attr("text-anchor", "left")
.style("font-size", "15px")
.style("font-family", "sans-serif")
.text("• Max 1.00, Min 0.00")
svg2.append("text")
.attr("x", 180)
.attr("y", 160)
.attr("text-anchor", "left")
.style("font-size", "15px")
.style("font-family", "sans-serif")
.text("• Blends many factors")
svg2.append("text")
.attr("x", 180)
.attr("y", 180)
.attr("text-anchor", "left")
.style("font-size", "15px")
.style("font-family", "sans-serif")
.text("• Scale shows impact")
// Adds the 'Trend Indicators' image to the top right corner of the legend.
svg2.append("image")
.attr("xlink:href", "./images/legend/commitments.svg")
.attr("x", -45)
.attr("y", 130)
.attr("width", 235)
.attr("height", 235);
// Adds the 'Trend Indicators' image to the top right corner of the legend.
svg2.append("image")
.attr("xlink:href", "./images/legend/planning.svg")
.attr("x", 135)
.attr("y", 235)
.attr("width", 100)
.attr("height", 100);
// Adds the 'Trend Indicators' image to the top right corner of the legend.
svg2.append("image")
.attr("xlink:href", "./images/legend/stability.svg")
.attr("x", 210)
.attr("y", 225)
.attr("width", 135)
.attr("height", 135);
// Adds the outside border to the graph.
svg2.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", height2 + 70)
.attr("width", width2)
.style("stroke", "black")
.style("fill", "none")
.style("stroke-width", "1px");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment