Memes have become a global phenomenon over the years and it's become a way to express ourselves in our daily lives. MemeStats is an app that gives users a simple visualization of the popular memes that are used today as well as their origin and when they were created.
MemeStats utilizes D3 to create an interactive bubble chart. Additional libraries used from D3 were D3-drag and D3-force. Axios and Cheerio were also employed to scrape for additional information and data. The app also makes use of the memegenerator API which was very unstable, so response data was saved to a Rails backend. The size of each bubble is related to the usage count for each meme.
You can drag the different meme bubbles around and watch them interact with one another.
defs.selectAll(".meme-pattern")
.data(nodes)
.enter().append("pattern")
.attr("class", "meme-pattern")
.attr("id", (d) => d.url_name)
.attr("height", "100%")
.attr("width", "100%")
.attr("patternContentUnits", "objectBoundingBox")
.append("image")
.attr("xmlns:xlink", "https://www.w3.org/1999/xlink")
.attr("xlink:href", (d) => d.img_url)
.attr("height", 1)
.attr("width", 1)
.attr("preserveAspectRatio", "none");
bubbles = svg.selectAll(".meme")
.data(nodes)
.enter().append("circle")
.attr("class","meme")
.attr("r", (d) => radiusScale(d.value))
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("fill", (d) => `url(#${d.url_name})`)The bubbles were created by attaching svg images to each circle within the chart using patterns to make it reusable.
You can double click on a meme bubble and it will generate a list of popular memes that were created using it.
- Optimization for the image bubbles
- Allow users to create Memes
- Store data about meme usage information to generate a better real time visualization
- Different charts for a more full experience