<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<div class = "container">
<h1>Visualizing the Flow of Poetry</h1>
<h2> Poems By <a href= "https://en.wikipedia.org/wiki/Hafez" target = “_blank”>Hafiz</a> </h2>
<!-- <div class = "smallVoice"> Press the button to draw the flow of three poems together. </div> -->
<div id="flowMany">
<input name="updateButton"
type="button"
value="PLAY"
onclick="" />
</div>
<div id="linesContainer" class="svg-container">
</div>
body {
background-color: #044686;
font-weight: 400;
color:#C4D4E4;
width: 100vw;
/* padding: 5%; */
font-size: 25px;
font-family: Oswald;
}
#container {
position: relative;
width: 100vw;
height: 80vh;
}
.svg-container {
display: inline-block;
position: relative;
width: 100vw;
vertical-align: top;
overflow: hidden;
}
a{
color: white;
}
#linesContainer {
width: 100vw;
position:absolute;
left:0;
}
path{
fill: none;
}
input{
background-color: #C4D4E4;
color: #FFCB47;
height: 5vh;
width: 54vw;
margin-left:23%;
color:#044686;
font-weight:800;
font-size: 115%;
}
h1{
font-size: 150%;
width: 65%;
font-weight: 500;
margin: auto;
text-align:center;
}
h2{
font-size: 130%;
text-align:center;
width: 65%;
font-weight: 500;
margin: auto;
}
#flowMany{
}
/*Global */
let holdNumbers = [];
let holdWords = [];
let poemData;
let poemsMargin = {top: 0, right: 0, bottom: 50, left: 0}
let poemsWidth = 1060 - poemsMargin.left - poemsMargin.right;
// let poemsWidth = 900
let poemsHeight = 450 - poemsMargin.top - poemsMargin.bottom;
// let chartDiv = document.getElementById("chart");
// let charts = d3.select(chartDiv).append("svg");
var charts = d3.select("div#linesContainer")
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 1060 450")
.classed("svg-content", true)
.classed("svg-content-dark", true);
let xScaleLines = d3.scaleLinear().range([85, poemsWidth-75])
let yScaleLines = d3.scaleLinear().range([poemsHeight,85])
let lineColors = ["#FFCB47","#FF6A00","#AACCFF"]
var colorScale = d3.scaleOrdinal(lineColors);
d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/poems.json", function(poemData) {
// console.log(poemData[0].stanzas)
/* 1) SETUP */
poemData.forEach(function(element, index, arr){
holdNumbers = [];
holdWords = [];
let numbersAndWords = arr[index].stanzas.map(function(o) {
for (j = 0; j < o.length; j++){
let theWords = o[j].split(',').pop()
let theNumbers = o[j].length
// console.log(theWords)
holdNumbers.push(theNumbers)
holdWords.push(theWords)
/* Trying to add spaces for stanza breaks */
// wordspoemData.push(" ")
}
});
/* Set the number of characters in each line and the cooresponding lines as entries in the poemData structure */
arr[index].lines = []
for (var i = 0; i<holdNumbers.length;i++){
let newEntry = {
"words":holdWords[i],
"numbers":holdNumbers[i]
}
arr[index].lines.push(newEntry)
}
}) // end setup forEach
/*2) PLOT
*/
const poemLines = d3.line()
// .curve(d3.curveMonotoneY)
.curve(d3.curveStep)
// .curve(d3.curveStepBefore)
// .curve(d3.curveBasis)
// .curve(d3.curveBasisClosed)
// .curve(d3.curveStepAfter)
// .curve(d3.curveCardinal)
// .curve(d3.curveNatural)
.x(function(d, index) { return xScaleLines(index); })
.y(function(d) { return yScaleLines(d.numbers); });
xScaleLines.domain(d3.extent(poemData[0].lines, function(d, index) { return index; }));
yScaleLines.domain([0, d3.max(poemData[0].lines, function(d, index) { return d.numbers; })]);
poemData.forEach(function(element, index, arr){
let newNumbersAndWords = arr[index].lines.map(function(o, i) {
// console.log(o)
charts.append("circle")
// .data(data[0s])
.datum(o)
.attr("fill", (d,i)=> colorScale(index))
.attr("class", "linesDot")
.attr("r", 3.5)
.attr("cx", function(d) { return xScaleLines(i); })
.attr("cy", function(d){ return yScaleLines(d.numbers);})
/* Text */
charts.append("text")
.datum(o)
.attr("class", "linesText")
.attr("text-anchor", "middle")
// .attr("stroke", "rgba(59, 73, 85, 1)")
.attr("fill", (d,i)=> colorScale(index))
// .attr("textLength", "90")
.attr("dy", function(d, index) { return "-.55em"})
// .attr("dy", function(d, index) { // return i%Math.PI+"em"})
// .attr("dx", "0.45em")
.attr("x", function(d) { return xScaleLines(i); })
.attr("y", function(d,i){ return yScaleLines(d.numbers);})
// .style("font", "10px sans-serif")
.attr("font-family", "Slabo 27px")
.attr("font-size", "10px")
// .attr("transform", "rotate(-3)")
.text(function(d) { return d.words; })
})
}); // end map
d3.select("#flowMany").on("click", function() {
// console.log("working")
poemData.forEach(function(element, index, arr){
var paths = charts.append("path")
.datum(arr[index].lines)
.attr("class", "line")
.attr("d", poemLines)
// .style("stroke", function(d,i){return i})
// .style("stroke", function(d) {return lineColors[index]});
// .stroke("stroke", function(d) {return colorScale});
.attr("stroke", (d,i)=> colorScale(index))
.attr("stroke-width", 2)
// .style("stroke", "rgba(119, 20, 39, .9)")
// Variable to Hold Total Length
let totalLength = paths.node().getTotalLength();
let animTime = 10000
// Set Properties of Dash Array and Dash Offset and initiate Transition
paths
// .attr("d", (d,i) => console.log(d));
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition() // Call Transition Method
.duration(animTime) // Set Duration timing (ms)
.ease(d3.easeLinear) // Set Easing option
.attr("stroke-dashoffset", 0) // Set final value of dash-offset for transition
.on("end", function(){
d3.selectAll('.linesText')
.transition()
.duration(animTime/3) // Set Duration timing (ms)
.attr("font-size", 7)
.duration(animTime/3) // Set Duration timing (ms)
d3.selectAll("linesDot")
.transition()
.duration(animTime/3) // Set Duration timing (ms)
.attr("r", .11)
d3.select(this)
.transition()
.duration(animTime/3) // Set Duration timing (ms)
.delay(animTime)
.attr("stroke-width", 1)
})
})
})
}); // end json
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.