<section id="timeline-4">
<h1>Timeline concept</h1>
<div id="scrollbox">
<div id="svgOutput"></div>
</div>
<div class="data">
<script>
const dataset = [{
"id": 1,
"author": "Laverna",
"details": [{
"month": "2021-01-11",
"work": "Suddenly (Tan de Repente)",
"quote": "at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero non mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit ac nulla sed vel enim sit amet nunc viverra dapibus nulla suscipit ligula in lacus curabitur at ipsum ac tellus semper interdum mauris ullamcorper purus sit amet nulla",
"url": "https://ft.com/tortor/duis/mattis.png"
}, {
"month": "2020-12-29",
"work": "Unlikely Weapon, An",
"quote": "ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet",
"url": "http://webmd.com/magna/bibendum.xml"
}, {
"month": "2021-05-26",
"work": "Hannibal",
"quote": "sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra magna ac consequat metus sapien ut nunc vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia",
"url": "http://tuttocitta.it/curabitur/in/libero.aspx"
}, {
"month": "2021-07-06",
"work": "Noam Chomsky: Distorted Morality",
"quote": "non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla tempus vivamus in felis eu sapien cursus vestibulum proin eu mi nulla ac enim in",
"url": "http://telegraph.co.uk/nulla/ut/erat/id.js"
}]
},
{
"id": 2,
"author": "Viviene",
"details": [{
"month": "2021-02-04",
"work": "Sleeping with the Enemy",
"quote": "leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque",
"url": "http://netvibes.com/dictumst.xml"
}, {
"month": "2020-12-17",
"work": "After You (Après vous...)",
"quote": "aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus",
"url": "http://printfriendly.com/diam/neque/vestibulum/eget/vulputate.js"
}, {
"month": "2021-02-07",
"work": "Kiss, The",
"quote": "tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst",
"url": "https://state.tx.us/fringilla/rhoncus.aspx"
}, {
"month": "2021-02-26",
"work": "Scarecrow, The",
"quote": "tellus in sagittis dui vel nisl duis ac nibh fusce lacus purus aliquet at feugiat non pretium quis lectus suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas ut massa quis augue luctus tincidunt nulla mollis molestie lorem quisque ut erat curabitur gravida nisi at nibh in",
"url": "https://furl.net/in.png"
}, {
"month": "2021-05-20",
"work": "Daddy Long Legs",
"quote": "vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis",
"url": "https://blogspot.com/sociis/natoque/penatibus.aspx"
}, {
"month": "2020-12-22",
"work": "Army of Shadows (L'armée des ombres)",
"quote": "praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit",
"url": "https://forbes.com/eleifend/pede/libero/quis/orci/nullam.js"
}]
},
{
"id": 3,
"author": "Shel",
"details": [{
"month": "2021-04-22",
"work": "Five Wives, Three Secretaries and Me",
"quote": "lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis",
"url": "http://sohu.com/pede/ac/diam/cras/pellentesque/volutpat.aspx"
}, {
"month": "2021-01-11",
"work": "One Step Ahead of My Shadow",
"quote": "at velit vivamus vel nulla eget eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero",
"url": "http://scribd.com/nisi/nam/ultrices.xml"
}, {
"month": "2021-02-19",
"work": "Time (Shi gan)",
"quote": "consequat metus sapien ut nunc vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae mauris viverra diam vitae quam suspendisse potenti nullam porttitor lacus at turpis donec posuere metus vitae ipsum aliquam non mauris morbi non lectus",
"url": "https://deliciousdays.com/pellentesque/eget/nunc/donec/quis/orci/eget.js"
}, {
"month": "2021-03-28",
"work": "Dancers",
"quote": "mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros suspendisse accumsan tortor quis turpis sed ante",
"url": "http://slate.com/tristique/fusce/congue/diam/id/ornare.aspx"
}, {
"month": "2021-04-12",
"work": "Crank: High Voltage",
"quote": "at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum",
"url": "https://foxnews.com/aenean.jsp"
}, {
"month": "2020-12-30",
"work": "Teacher, A",
"quote": "dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros suspendisse accumsan tortor quis turpis sed ante vivamus tortor duis mattis egestas",
"url": "https://devhub.com/cras/pellentesque/volutpat.jsp"
}]
},
{
"id": 4,
"author": "Tad",
"details": [{
"month": "2021-09-08",
"work": "You Are God (Jestes Bogiem)",
"quote": "non interdum in ante vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae duis faucibus accumsan odio curabitur convallis duis consequat dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue",
"url": "http://nsw.gov.au/at/diam/nam/tristique/tortor/eu.jpg"
}, {
"month": "2021-03-21",
"work": "The Hunting Ground",
"quote": "justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros",
"url": "https://shareasale.com/vestibulum/velit/id/pretium/iaculis.js"
}, {
"month": "2021-05-05",
"work": "Illustrated Man, The",
"quote": "amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris",
"url": "http://mapquest.com/accumsan/tortor/quis.jpg"
}, {
"month": "2021-06-27",
"work": "Watercolors",
"quote": "curabitur gravida nisi at nibh in hac habitasse platea dictumst aliquam augue quam sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum sed magna at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis",
"url": "http://godaddy.com/duis/mattis/egestas/metus/aenean/fermentum.png"
}, {
"month": "2020-09-22",
"work": "Virtual JFK: Vietnam If Kennedy Had Lived",
"quote": "cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices enim lorem ipsum dolor sit amet consectetuer adipiscing elit proin interdum mauris non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget",
"url": "http://hexun.com/leo/rhoncus/sed.jpg"
}]
},
{
"id": 5,
"author": "Lauryn",
"details": [{
"month": "2021-08-13",
"work": "Game of Death",
"quote": "id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique",
"url": "https://vk.com/praesent/id/massa/id/nisl/venenatis/lacinia.png"
}, {
"month": "2021-02-28",
"work": "Yuki & Nina",
"quote": "justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros suspendisse accumsan tortor quis turpis sed ante vivamus tortor duis mattis egestas metus aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend luctus ultricies eu nibh quisque id justo sit amet sapien dignissim vestibulum vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla dapibus dolor vel est donec odio justo sollicitudin ut",
"url": "http://typepad.com/mi/integer/ac/neque/duis/bibendum.xml"
}, {
"month": "2020-11-14",
"work": "American Raspberry (Prime Time) (Funny America)",
"quote": "quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra",
"url": "http://canalblog.com/dictumst/aliquam/augue/quam.jpg"
}, {
"month": "2021-09-01",
"work": "Simone (S1m0ne)",
"quote": "adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla",
"url": "http://symantec.com/sociis/natoque/penatibus/et.aspx"
}]
},
{
"id": 6,
"author": "Graeme",
"details": [{
"month": "2021-04-24",
"work": "Remember the Night",
"quote": "vitae quam suspendisse potenti nullam porttitor lacus at turpis donec posuere metus vitae ipsum aliquam non mauris morbi non lectus aliquam sit amet diam in magna bibendum imperdiet nullam orci pede venenatis non sodales sed tincidunt eu felis fusce posuere felis sed lacus morbi sem mauris laoreet ut rhoncus aliquet pulvinar sed",
"url": "https://dagondesign.com/tortor/eu/pede.json"
}, {
"month": "2021-03-24",
"work": "Coco Chanel & Igor Stravinsky",
"quote": "molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla tempus vivamus in felis eu sapien cursus vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam",
"url": "http://ox.ac.uk/non/velit/nec/nisi/vulputate/nonummy.js"
}, {
"month": "2020-11-18",
"work": "Take Me Home",
"quote": "quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra magna ac consequat metus sapien ut nunc vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae mauris viverra diam",
"url": "https://ifeng.com/vivamus/in/felis/eu/sapien/cursus.xml"
}, {
"month": "2021-09-11",
"work": "Get Shorty",
"quote": "sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum sed magna at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl",
"url": "http://si.edu/id/ornare/imperdiet/sapien.xml"
}]
},
{
"id": 7,
"author": "Grantley",
"details": [{
"month": "2021-02-04",
"work": "Full Moon High",
"quote": "sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget",
"url": "http://hhs.gov/quis.jsp"
}, {
"month": "2020-11-13",
"work": "Inside",
"quote": "cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi cras non velit nec nisi vulputate nonummy maecenas tincidunt lacus at velit vivamus vel nulla eget eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor",
"url": "https://ocn.ne.jp/posuere/felis/sed/lacus.jpg"
}, {
"month": "2021-07-03",
"work": "St. Vincent",
"quote": "vel est donec odio justo sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique fusce congue diam id ornare imperdiet sapien urna pretium nisl ut volutpat sapien arcu sed augue aliquam erat volutpat in congue etiam justo etiam pretium iaculis justo in hac habitasse platea dictumst etiam faucibus cursus urna ut tellus nulla ut erat",
"url": "http://chron.com/gravida.js"
}, {
"month": "2021-05-31",
"work": "Agent Cody Banks",
"quote": "mattis nibh ligula nec sem duis aliquam convallis nunc proin at turpis a pede posuere nonummy integer non velit donec diam neque vestibulum eget vulputate ut ultrices vel augue vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae donec pharetra magna vestibulum aliquet ultrices erat tortor sollicitudin mi sit amet lobortis",
"url": "https://omniture.com/magnis.png"
}, {
"month": "2021-07-16",
"work": "Criminal Code, The",
"quote": "et magnis dis parturient montes nascetur ridiculus mus vivamus vestibulum sagittis sapien cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus etiam vel augue vestibulum rutrum rutrum neque aenean auctor gravida sem praesent id massa id nisl venenatis lacinia aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit",
"url": "https://rakuten.co.jp/nunc/proin.jsp"
}, {
"month": "2021-04-03",
"work": "Burrowers, The",
"quote": "nisi at nibh in hac habitasse platea dictumst aliquam augue quam sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum sed magna at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia",
"url": "https://topsy.com/magnis/dis/parturient.js"
}, {
"month": "2021-03-23",
"work": "Tattooed Life (Irezumi ichidai)",
"quote": "erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices",
"url": "http://ask.com/turpis.jsp"
}]
},
{
"id": 8,
"author": "Pearl",
"details": [{
"month": "2020-10-20",
"work": "Pigsty (Porcile)",
"quote": "dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero non mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit ac nulla sed vel enim sit amet nunc viverra dapibus nulla suscipit ligula in lacus curabitur at ipsum ac tellus semper interdum mauris ullamcorper purus sit amet nulla quisque",
"url": "https://weather.com/placerat/ante/nulla.json"
}, {
"month": "2021-07-09",
"work": "Girl, The",
"quote": "convallis eget eleifend luctus ultricies eu nibh quisque id justo sit amet sapien dignissim vestibulum vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla dapibus dolor vel est donec odio justo sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique fusce congue diam id ornare imperdiet sapien urna pretium nisl ut volutpat sapien arcu sed augue aliquam erat volutpat in congue etiam justo etiam pretium iaculis",
"url": "http://google.co.uk/mauris/ullamcorper/purus/sit/amet/nulla/quisque.js"
}, {
"month": "2021-08-07",
"work": "Aamir",
"quote": "cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque",
"url": "https://creativecommons.org/volutpat.html"
}]
},
{
"id": 9,
"author": "Chanda",
"details": [{
"month": "2021-03-11",
"work": "Weird Science",
"quote": "vivamus vestibulum sagittis sapien cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus etiam vel augue vestibulum rutrum rutrum neque aenean auctor gravida sem praesent id massa id nisl venenatis lacinia aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices enim lorem ipsum dolor sit amet consectetuer adipiscing elit proin",
"url": "http://miibeian.gov.cn/nisl/duis/bibendum/felis/sed/interdum/venenatis.xml"
}, {
"month": "2020-12-26",
"work": "Ganes",
"quote": "faucibus orci luctus et ultrices posuere cubilia curae donec pharetra magna vestibulum aliquet ultrices erat tortor sollicitudin mi sit amet lobortis sapien sapien non mi integer ac neque duis bibendum morbi non quam nec dui luctus rutrum nulla tellus in sagittis dui vel nisl duis ac nibh fusce lacus purus aliquet at feugiat non pretium quis lectus suspendisse potenti in eleifend quam a odio in hac habitasse platea",
"url": "https://biglobe.ne.jp/in.jsp"
}, {
"month": "2020-11-27",
"work": "Ultraviolet",
"quote": "venenatis lacinia aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices enim lorem ipsum dolor sit amet consectetuer adipiscing elit proin interdum mauris non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat",
"url": "https://telegraph.co.uk/platea/dictumst/etiam.aspx"
}, {
"month": "2021-08-15",
"work": "Kickboxer 3: The Art of War (Kickboxer III: The Art of War)",
"quote": "id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras",
"url": "https://tumblr.com/in/leo/maecenas/pulvinar/lobortis/est/phasellus.js"
}, {
"month": "2021-03-14",
"work": "Meet Me at the Fair",
"quote": "sed lacus morbi sem mauris laoreet ut rhoncus aliquet pulvinar sed nisl nunc rhoncus dui vel sem sed sagittis nam congue risus semper porta volutpat quam pede lobortis ligula sit amet eleifend pede libero quis orci nullam molestie nibh in lectus",
"url": "https://yelp.com/rhoncus/dui/vel.html"
}, {
"month": "2020-12-14",
"work": "Cabeza de Vaca",
"quote": "augue aliquam erat volutpat in congue etiam justo etiam pretium iaculis justo in hac habitasse platea dictumst etiam faucibus cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi cras non velit nec nisi vulputate nonummy maecenas tincidunt lacus at velit vivamus vel nulla",
"url": "https://163.com/diam/vitae/quam.png"
}]
},
{
"id": 10,
"author": "Germayne",
"details": [{
"month": "2021-08-06",
"work": "Blood and Roses (Et mourir de plaisir) (To Die with Pleasure)",
"quote": "eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero non mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit",
"url": "http://mayoclinic.com/consectetuer/eget/rutrum/at.xml"
}, {
"month": "2020-10-25",
"work": "Wuthering Heights",
"quote": "orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla tempus vivamus in felis eu sapien cursus vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing lorem vitae mattis nibh ligula nec sem duis aliquam convallis nunc proin at turpis",
"url": "http://tripod.com/id/sapien/in/sapien/iaculis/congue.png"
}, {
"month": "2021-03-10",
"work": "Mishima: A Life in Four Chapters",
"quote": "facilisi cras non velit nec nisi vulputate nonummy maecenas tincidunt lacus at velit vivamus vel nulla eget eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec",
"url": "http://google.es/vestibulum/sagittis/sapien.html"
}, {
"month": "2021-04-06",
"work": "Girl in the Red Velvet Swing, The",
"quote": "amet diam in magna bibendum imperdiet nullam orci pede venenatis non sodales sed tincidunt eu felis fusce posuere felis sed lacus morbi sem mauris laoreet ut rhoncus aliquet pulvinar sed nisl nunc rhoncus dui vel sem sed sagittis nam congue risus semper",
"url": "https://ihg.com/molestie/sed/justo/pellentesque.aspx"
}, {
"month": "2021-07-23",
"work": "Exploding Girl, The",
"quote": "nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus",
"url": "https://wufoo.com/arcu/libero/rutrum/ac/lobortis/vel/dapibus.xml"
}]
}
];
</script>
</div>
</section>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="../../js/components/timeline-4.js"></script>
<section id="timeline-4">
<h1>Timeline concept</h1>
<div id="scrollbox">
<div id="svgOutput"></div>
</div>
<div class="data">
<script>
const dataset = [{
"id": 1,
"author": "Laverna",
"details": [{
"month": "2021-01-11",
"work": "Suddenly (Tan de Repente)",
"quote": "at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero non mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit ac nulla sed vel enim sit amet nunc viverra dapibus nulla suscipit ligula in lacus curabitur at ipsum ac tellus semper interdum mauris ullamcorper purus sit amet nulla",
"url": "https://ft.com/tortor/duis/mattis.png"
}, {
"month": "2020-12-29",
"work": "Unlikely Weapon, An",
"quote": "ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet",
"url": "http://webmd.com/magna/bibendum.xml"
}, {
"month": "2021-05-26",
"work": "Hannibal",
"quote": "sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra magna ac consequat metus sapien ut nunc vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia",
"url": "http://tuttocitta.it/curabitur/in/libero.aspx"
}, {
"month": "2021-07-06",
"work": "Noam Chomsky: Distorted Morality",
"quote": "non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla tempus vivamus in felis eu sapien cursus vestibulum proin eu mi nulla ac enim in",
"url": "http://telegraph.co.uk/nulla/ut/erat/id.js"
}]
},
{
"id": 2,
"author": "Viviene",
"details": [{
"month": "2021-02-04",
"work": "Sleeping with the Enemy",
"quote": "leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque",
"url": "http://netvibes.com/dictumst.xml"
}, {
"month": "2020-12-17",
"work": "After You (Après vous...)",
"quote": "aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus",
"url": "http://printfriendly.com/diam/neque/vestibulum/eget/vulputate.js"
}, {
"month": "2021-02-07",
"work": "Kiss, The",
"quote": "tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst",
"url": "https://state.tx.us/fringilla/rhoncus.aspx"
}, {
"month": "2021-02-26",
"work": "Scarecrow, The",
"quote": "tellus in sagittis dui vel nisl duis ac nibh fusce lacus purus aliquet at feugiat non pretium quis lectus suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas ut massa quis augue luctus tincidunt nulla mollis molestie lorem quisque ut erat curabitur gravida nisi at nibh in",
"url": "https://furl.net/in.png"
}, {
"month": "2021-05-20",
"work": "Daddy Long Legs",
"quote": "vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis",
"url": "https://blogspot.com/sociis/natoque/penatibus.aspx"
}, {
"month": "2020-12-22",
"work": "Army of Shadows (L'armée des ombres)",
"quote": "praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit",
"url": "https://forbes.com/eleifend/pede/libero/quis/orci/nullam.js"
}]
},
{
"id": 3,
"author": "Shel",
"details": [{
"month": "2021-04-22",
"work": "Five Wives, Three Secretaries and Me",
"quote": "lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis",
"url": "http://sohu.com/pede/ac/diam/cras/pellentesque/volutpat.aspx"
}, {
"month": "2021-01-11",
"work": "One Step Ahead of My Shadow",
"quote": "at velit vivamus vel nulla eget eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero",
"url": "http://scribd.com/nisi/nam/ultrices.xml"
}, {
"month": "2021-02-19",
"work": "Time (Shi gan)",
"quote": "consequat metus sapien ut nunc vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae mauris viverra diam vitae quam suspendisse potenti nullam porttitor lacus at turpis donec posuere metus vitae ipsum aliquam non mauris morbi non lectus",
"url": "https://deliciousdays.com/pellentesque/eget/nunc/donec/quis/orci/eget.js"
}, {
"month": "2021-03-28",
"work": "Dancers",
"quote": "mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros suspendisse accumsan tortor quis turpis sed ante",
"url": "http://slate.com/tristique/fusce/congue/diam/id/ornare.aspx"
}, {
"month": "2021-04-12",
"work": "Crank: High Voltage",
"quote": "at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum",
"url": "https://foxnews.com/aenean.jsp"
}, {
"month": "2020-12-30",
"work": "Teacher, A",
"quote": "dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros suspendisse accumsan tortor quis turpis sed ante vivamus tortor duis mattis egestas",
"url": "https://devhub.com/cras/pellentesque/volutpat.jsp"
}]
},
{
"id": 4,
"author": "Tad",
"details": [{
"month": "2021-09-08",
"work": "You Are God (Jestes Bogiem)",
"quote": "non interdum in ante vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae duis faucibus accumsan odio curabitur convallis duis consequat dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue",
"url": "http://nsw.gov.au/at/diam/nam/tristique/tortor/eu.jpg"
}, {
"month": "2021-03-21",
"work": "The Hunting Ground",
"quote": "justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros",
"url": "https://shareasale.com/vestibulum/velit/id/pretium/iaculis.js"
}, {
"month": "2021-05-05",
"work": "Illustrated Man, The",
"quote": "amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget elit sodales scelerisque mauris",
"url": "http://mapquest.com/accumsan/tortor/quis.jpg"
}, {
"month": "2021-06-27",
"work": "Watercolors",
"quote": "curabitur gravida nisi at nibh in hac habitasse platea dictumst aliquam augue quam sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum sed magna at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis",
"url": "http://godaddy.com/duis/mattis/egestas/metus/aenean/fermentum.png"
}, {
"month": "2020-09-22",
"work": "Virtual JFK: Vietnam If Kennedy Had Lived",
"quote": "cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices enim lorem ipsum dolor sit amet consectetuer adipiscing elit proin interdum mauris non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget",
"url": "http://hexun.com/leo/rhoncus/sed.jpg"
}]
},
{
"id": 5,
"author": "Lauryn",
"details": [{
"month": "2021-08-13",
"work": "Game of Death",
"quote": "id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique",
"url": "https://vk.com/praesent/id/massa/id/nisl/venenatis/lacinia.png"
}, {
"month": "2021-02-28",
"work": "Yuki & Nina",
"quote": "justo aliquam quis turpis eget elit sodales scelerisque mauris sit amet eros suspendisse accumsan tortor quis turpis sed ante vivamus tortor duis mattis egestas metus aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend luctus ultricies eu nibh quisque id justo sit amet sapien dignissim vestibulum vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla dapibus dolor vel est donec odio justo sollicitudin ut",
"url": "http://typepad.com/mi/integer/ac/neque/duis/bibendum.xml"
}, {
"month": "2020-11-14",
"work": "American Raspberry (Prime Time) (Funny America)",
"quote": "quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra",
"url": "http://canalblog.com/dictumst/aliquam/augue/quam.jpg"
}, {
"month": "2021-09-01",
"work": "Simone (S1m0ne)",
"quote": "adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla",
"url": "http://symantec.com/sociis/natoque/penatibus/et.aspx"
}]
},
{
"id": 6,
"author": "Graeme",
"details": [{
"month": "2021-04-24",
"work": "Remember the Night",
"quote": "vitae quam suspendisse potenti nullam porttitor lacus at turpis donec posuere metus vitae ipsum aliquam non mauris morbi non lectus aliquam sit amet diam in magna bibendum imperdiet nullam orci pede venenatis non sodales sed tincidunt eu felis fusce posuere felis sed lacus morbi sem mauris laoreet ut rhoncus aliquet pulvinar sed",
"url": "https://dagondesign.com/tortor/eu/pede.json"
}, {
"month": "2021-03-24",
"work": "Coco Chanel & Igor Stravinsky",
"quote": "molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla tempus vivamus in felis eu sapien cursus vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam",
"url": "http://ox.ac.uk/non/velit/nec/nisi/vulputate/nonummy.js"
}, {
"month": "2020-11-18",
"work": "Take Me Home",
"quote": "quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra magna ac consequat metus sapien ut nunc vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae mauris viverra diam",
"url": "https://ifeng.com/vivamus/in/felis/eu/sapien/cursus.xml"
}, {
"month": "2021-09-11",
"work": "Get Shorty",
"quote": "sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum sed magna at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus auctor sed tristique in tempus sit amet sem fusce consequat nulla nisl",
"url": "http://si.edu/id/ornare/imperdiet/sapien.xml"
}]
},
{
"id": 7,
"author": "Grantley",
"details": [{
"month": "2021-02-04",
"work": "Full Moon High",
"quote": "sed tristique in tempus sit amet sem fusce consequat nulla nisl nunc nisl duis bibendum felis sed interdum venenatis turpis enim blandit mi in porttitor pede justo eu massa donec dapibus duis at velit eu est congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis turpis eget",
"url": "http://hhs.gov/quis.jsp"
}, {
"month": "2020-11-13",
"work": "Inside",
"quote": "cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi cras non velit nec nisi vulputate nonummy maecenas tincidunt lacus at velit vivamus vel nulla eget eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor",
"url": "https://ocn.ne.jp/posuere/felis/sed/lacus.jpg"
}, {
"month": "2021-07-03",
"work": "St. Vincent",
"quote": "vel est donec odio justo sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique fusce congue diam id ornare imperdiet sapien urna pretium nisl ut volutpat sapien arcu sed augue aliquam erat volutpat in congue etiam justo etiam pretium iaculis justo in hac habitasse platea dictumst etiam faucibus cursus urna ut tellus nulla ut erat",
"url": "http://chron.com/gravida.js"
}, {
"month": "2021-05-31",
"work": "Agent Cody Banks",
"quote": "mattis nibh ligula nec sem duis aliquam convallis nunc proin at turpis a pede posuere nonummy integer non velit donec diam neque vestibulum eget vulputate ut ultrices vel augue vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae donec pharetra magna vestibulum aliquet ultrices erat tortor sollicitudin mi sit amet lobortis",
"url": "https://omniture.com/magnis.png"
}, {
"month": "2021-07-16",
"work": "Criminal Code, The",
"quote": "et magnis dis parturient montes nascetur ridiculus mus vivamus vestibulum sagittis sapien cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus etiam vel augue vestibulum rutrum rutrum neque aenean auctor gravida sem praesent id massa id nisl venenatis lacinia aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit",
"url": "https://rakuten.co.jp/nunc/proin.jsp"
}, {
"month": "2021-04-03",
"work": "Burrowers, The",
"quote": "nisi at nibh in hac habitasse platea dictumst aliquam augue quam sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum sed magna at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia",
"url": "https://topsy.com/magnis/dis/parturient.js"
}, {
"month": "2021-03-23",
"work": "Tattooed Life (Irezumi ichidai)",
"quote": "erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices",
"url": "http://ask.com/turpis.jsp"
}]
},
{
"id": 8,
"author": "Pearl",
"details": [{
"month": "2020-10-20",
"work": "Pigsty (Porcile)",
"quote": "dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero non mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit ac nulla sed vel enim sit amet nunc viverra dapibus nulla suscipit ligula in lacus curabitur at ipsum ac tellus semper interdum mauris ullamcorper purus sit amet nulla quisque",
"url": "https://weather.com/placerat/ante/nulla.json"
}, {
"month": "2021-07-09",
"work": "Girl, The",
"quote": "convallis eget eleifend luctus ultricies eu nibh quisque id justo sit amet sapien dignissim vestibulum vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla dapibus dolor vel est donec odio justo sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique fusce congue diam id ornare imperdiet sapien urna pretium nisl ut volutpat sapien arcu sed augue aliquam erat volutpat in congue etiam justo etiam pretium iaculis",
"url": "http://google.co.uk/mauris/ullamcorper/purus/sit/amet/nulla/quisque.js"
}, {
"month": "2021-08-07",
"work": "Aamir",
"quote": "cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque",
"url": "https://creativecommons.org/volutpat.html"
}]
},
{
"id": 9,
"author": "Chanda",
"details": [{
"month": "2021-03-11",
"work": "Weird Science",
"quote": "vivamus vestibulum sagittis sapien cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus etiam vel augue vestibulum rutrum rutrum neque aenean auctor gravida sem praesent id massa id nisl venenatis lacinia aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices enim lorem ipsum dolor sit amet consectetuer adipiscing elit proin",
"url": "http://miibeian.gov.cn/nisl/duis/bibendum/felis/sed/interdum/venenatis.xml"
}, {
"month": "2020-12-26",
"work": "Ganes",
"quote": "faucibus orci luctus et ultrices posuere cubilia curae donec pharetra magna vestibulum aliquet ultrices erat tortor sollicitudin mi sit amet lobortis sapien sapien non mi integer ac neque duis bibendum morbi non quam nec dui luctus rutrum nulla tellus in sagittis dui vel nisl duis ac nibh fusce lacus purus aliquet at feugiat non pretium quis lectus suspendisse potenti in eleifend quam a odio in hac habitasse platea",
"url": "https://biglobe.ne.jp/in.jsp"
}, {
"month": "2020-11-27",
"work": "Ultraviolet",
"quote": "venenatis lacinia aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices enim lorem ipsum dolor sit amet consectetuer adipiscing elit proin interdum mauris non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat",
"url": "https://telegraph.co.uk/platea/dictumst/etiam.aspx"
}, {
"month": "2021-08-15",
"work": "Kickboxer 3: The Art of War (Kickboxer III: The Art of War)",
"quote": "id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras",
"url": "https://tumblr.com/in/leo/maecenas/pulvinar/lobortis/est/phasellus.js"
}, {
"month": "2021-03-14",
"work": "Meet Me at the Fair",
"quote": "sed lacus morbi sem mauris laoreet ut rhoncus aliquet pulvinar sed nisl nunc rhoncus dui vel sem sed sagittis nam congue risus semper porta volutpat quam pede lobortis ligula sit amet eleifend pede libero quis orci nullam molestie nibh in lectus",
"url": "https://yelp.com/rhoncus/dui/vel.html"
}, {
"month": "2020-12-14",
"work": "Cabeza de Vaca",
"quote": "augue aliquam erat volutpat in congue etiam justo etiam pretium iaculis justo in hac habitasse platea dictumst etiam faucibus cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi cras non velit nec nisi vulputate nonummy maecenas tincidunt lacus at velit vivamus vel nulla",
"url": "https://163.com/diam/vitae/quam.png"
}]
},
{
"id": 10,
"author": "Germayne",
"details": [{
"month": "2021-08-06",
"work": "Blood and Roses (Et mourir de plaisir) (To Die with Pleasure)",
"quote": "eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec vitae nisi nam ultrices libero non mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit",
"url": "http://mayoclinic.com/consectetuer/eget/rutrum/at.xml"
}, {
"month": "2020-10-25",
"work": "Wuthering Heights",
"quote": "orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus sit amet erat nulla tempus vivamus in felis eu sapien cursus vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing lorem vitae mattis nibh ligula nec sem duis aliquam convallis nunc proin at turpis",
"url": "http://tripod.com/id/sapien/in/sapien/iaculis/congue.png"
}, {
"month": "2021-03-10",
"work": "Mishima: A Life in Four Chapters",
"quote": "facilisi cras non velit nec nisi vulputate nonummy maecenas tincidunt lacus at velit vivamus vel nulla eget eros elementum pellentesque quisque porta volutpat erat quisque erat eros viverra eget congue eget semper rutrum nulla nunc purus phasellus in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer ac leo pellentesque ultrices mattis odio donec",
"url": "http://google.es/vestibulum/sagittis/sapien.html"
}, {
"month": "2021-04-06",
"work": "Girl in the Red Velvet Swing, The",
"quote": "amet diam in magna bibendum imperdiet nullam orci pede venenatis non sodales sed tincidunt eu felis fusce posuere felis sed lacus morbi sem mauris laoreet ut rhoncus aliquet pulvinar sed nisl nunc rhoncus dui vel sem sed sagittis nam congue risus semper",
"url": "https://ihg.com/molestie/sed/justo/pellentesque.aspx"
}, {
"month": "2021-07-23",
"work": "Exploding Girl, The",
"quote": "nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus",
"url": "https://wufoo.com/arcu/libero/rutrum/ac/lobortis/vel/dapibus.xml"
}]
}];
</script>
</div>
</section>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="{{ path '/js/components/timeline-4.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("timeline-4 active");
// Debug mode?
const debug = false;
// Config
const width = 600;
const height = 400;
const margin = {
"top": 20,
"bottom": 60,
"left": 60,
"right": 40
}
const dotRadius = 4;
// Create the svg container
function zoom(svg) {
const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];
svg.call(d3.zoom()
.scaleExtent([1, 8])
.translateExtent(extent)
.extent(extent)
.on("zoom", zoomed));
function zoomed(event) {
xScale.range([margin.left, width - margin.right].map(d => event.transform.applyX(d)));
svg.selectAll("circle.dot")
.attr("cx", d => xScale(d.month));
svg.selectAll("line.authorLine")
.attr('x1', (d) => xScale(d.x1))
.attr('y1', (d) => yScale(d.y1) + yScale.bandwidth() / 2)
.attr('x2', (d) => xScale(d.x2))
.attr('y2', (d) => yScale(d.y2) + yScale.bandwidth() / 2);
svg.selectAll(".xAxis").call(xAxis);
}
}
const svg = d3.select("#svgOutput")
.append("svg")
.attr("viewBox", [0, 0, width, height])
.attr("preserveAspectRatio", "xMidYMid meet")
.call(zoom);
// Date parser
const parseTime = d3.timeParse("%Y-%m-%d");
//
// Do stuff
//
// Data initialization
function Datapoint(author, month, work, quote, url) {
this.author = author;
this.month = month;
this.work = work;
this.quote = quote;
this.url = url;
}
let datasetArray = [];
let authorsList = [];
for (let i = 0; i < dataset.length; i++) {
const author = dataset[i].author;
authorsList.push(author);
dataset[i].details.forEach((item) => {
const month = parseTime(item.month);
const work = item.work;
const quote = item.quote;
const url = item.url
datasetArray.push(new Datapoint(author, month, work, quote, url));
})
}
// Set up scales
const xScale = d3.scaleTime()
.domain(d3.extent(datasetArray, d => d.month))
.range([margin.left, width - margin.right]);
const yScale = d3.scaleBand()
.domain(datasetArray.map(d => d.author))
.range([margin.top, height - margin.bottom])
.paddingInner(0.15)
.paddingOuter(0.1);
// Create and draw the axes
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale).ticks(5);
const gx = svg.append("g")
.attr('class', 'xAxis')
.attr("transform", `translate(0, ${(height - margin.bottom)})`)
.call(xAxis);
gx.call(g => g.selectAll(".tick text")
.attr('class', 'x-axis-label')
.attr("transform", `translate(12, 0) rotate(45)`)
.attr('dy', '12'));
const gy = svg.append("g")
.attr('class', 'yAxis')
.attr("transform", "translate(" + margin.left + ", 0)")
.call(yAxis);
gy.call(g => g.select('.tick:nth-child(2) line').remove());
// Create and draw the dots
const clip = svg.append("clipPath")
.attr("id", "dotsWindow")
.append("rect")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom);
const dotsPanel = svg.append("g")
.attr('id', 'dotsPanel')
.attr("clip-path", "url(#dotsWindow)");
const dots = dotsPanel.selectAll("circle.dot")
.data(datasetArray)
.join('circle');
dots.append('title')
.text((d) => `Work: ${d.work}`)
dots.attr('class', 'dot')
.attr('cx', (d) => xScale(d.month))
.attr("cy", (d) => yScale(d.author) + yScale.bandwidth() / 2)
.attr('r', dotRadius)
.attr('fill-opacity', 1);
dots.on("click", dotClickHandler);
// Create author lines
const linesData = [];
authorsList.forEach((author) => {
console.group(author);
const thisAuthor = d3.selectAll("circle.dot").filter((d) => d.author === author);
const data = thisAuthor.data();
const minIndex = d3.minIndex(data, d => d.month);
const maxIndex = d3.maxIndex(data, d => d.month);
const lineDatapoint = {
'author': author,
'x1': thisAuthor.filter((d, i) => i === minIndex).datum().month,
'y1': thisAuthor.filter((d, i) => i === minIndex).datum().author,
'x2': thisAuthor.filter((d, i) => i === maxIndex).datum().month,
'y2': thisAuthor.filter((d, i) => i === maxIndex).datum().author,
}
linesData.push(lineDatapoint)
console.groupEnd();
})
const lines = dotsPanel.selectAll("line.authorLine")
.data(linesData)
.join('line');
lines
.attr('x1', (d) => xScale(d.x1))
.attr('y1', (d) => yScale(d.y1) + yScale.bandwidth() / 2)
.attr('x2', (d) => xScale(d.x2))
.attr('y2', (d) => yScale(d.y2) + yScale.bandwidth() / 2)
.attr('class', 'authorLine');
// Get those dots up on top of the lines
dots.raise();
// Dots click handler
function dotClickHandler(e, d) {
if (d3.select('#textContainer')) {
d3.select('#textContainer').remove();
}
const pointer = d3.pointer(e);
const x1 = Math.floor(pointer[0]);
const y1 = Math.floor(pointer[1]);
const textGroup = svg.append('g')
.attr('id', 'textContainer')
.attr('transform', `translate(${x1}, ${y1})`);
textGroup.append('rect')
.attr('width', '300')
.attr('height', '100')
.attr('class', 'textBox');
const fo = textGroup.append('foreignObject')
.attr('x', '10')
.attr('y', '5')
.attr('width', '280')
.attr('height', '90')
.attr('id', 'coolText');
const foDiv = fo.append('xhtml:div')
.attr('xmlns', 'http://www.w3.org/1999/xhtml')
.attr('id', 'funTextBox');
foDiv
.append('xhtml:p')
.append('xhtml:a')
.attr('class', 'funText')
.attr('href', d.url)
.text(d.url);
foDiv
.append('xhtml:p')
.attr('class', 'funText')
.text(d.quote);
textGroup.on("click", (e, d) => textGroup.remove());
}
});
})();
#timeline-4 {
margin: 2rem;
font-family: var(--system-stack);
#scrollbox {
max-width: 100%;
overflow-x: auto;
#svgOutput {
min-width: 700px;
}
}
svg {
background-color: var(--white);
border: 1px solid var(--lightred);
* {
font-family: var(--system-stack);
}
.dot {
fill: var(--darkerblue);
}
.x-axis-label {
text-anchor: start;
font-weight: bold;
color: var(--mediumgray)
}
.authorLine {
stroke-width: 2px;
stroke: var(--lighterblue);
}
.textBox {
fill: var(--almostwhite);
stroke: var(--almostblack);
stroke-width: 4px;
}
.quoteText {
inline-size: 100px;
}
.funText {
font-size: 0.5rem;
color: var(--black);
}
#funTextBox {
p {
margin: 0 0 0.5rem 0;
line-height: 1;
}
}
}
}
No notes defined.