Read More of Our Work

d3 = require("d3@5")
import {rssToJSON} from "@pstuffa/rss-to-json"
import { xmlToJSON as xmler } from '@visnup/xml-to-json'

RSS_URL = "https://pubmed.ncbi.nlm.nih.gov/rss/search/1-IhdOtu689FDoZHkJVYPFLkOFo2fW8mZtPNKt-NX2Y9FJTsuQ/?limit=25&utm_campaign=pubmed-2&fc=20220812101501";

xmlString = fetch(RSS_URL).then(res => res.text())

data = xmler(xmlString)

useData = data.rss.channel

renderItem2 = (item) => {
  
  const divWidth = width;
  const imageWidth = width * 2/3;
  const rightWidth = divWidth - imageWidth
  
  const div = d3.select(html`<div></div>`)
      .style("display", "inline-flex")
      .style("width", "100%")
      .style("max-height", `${(imageWidth / 50)  * 50}px`)
      .style("padding", "5px")
      .style("box-shadow", "0px 1px 4px rgb(0,0,0,.2)")
      .on("mouseenter", function() {
        d3.select(this).style("box-shadow", "0px 1px 4px rgb(0,0,0,.8)")
      })
      .on("mouseleave", function() {
        d3.select(this).style("box-shadow", "0px 1px 4px rgb(0,0,0,.2)")
      })
      .on("click", () => { window.open(item.link.content); return false; })
  
  const right = div.append("div")
      .style("padding", "5px")
      .style("max-height", `${(imageWidth / 50)  * 50}px`)
      .style("overflow-y", "auto")
      .style("width", "100%")
  
  right.append("h4").text(item.title[0].content)
      .style("font-size", "12px")
  
  right.append("p").text(item.pubDate.content)
     .style("font", "10px sans-serif")
      
  right.append("p").text(flattenThings(item.creator))
      .style("font", "10px sans-serif")
  right.append("p").text(item.source.content)
      .style("font", "10px sans-serif")

   
  return div.node()
}

function flattenThings(it) {
  var l = it.length
  var strOut = it[0].content;
  for(var i =1; i < l; i++) {
    strOut = strOut + ", " + it[i].content
}
  return strOut;
}

width = 400

height = 200

feeds = rssToJSON(RSS_URL)

html`<div>${useData.item.map(d => renderItem2(d))}</div>`