Skip to content

santhoshsoundar/data-viz-blog

Repository files navigation

Netlify Status

This is my over-engineered Data Visualization blog built with Gatsby.js, an amazing react.js based site generator that managed to blow me away, coming from Jekyll counterpart.

There has always been a lack of solid blogging engines for the data viz community, eg. Adam Pearce built his own blogging engine to write & visualize.

I saw ways to maintain data viz profile with bl.ocks/BlockBuilder or Observable, but then I like a bit more customization and Gatsby came to my rescue with MDX support that took shape as a powerful stack to publish d3+react.js based contents within blog posts.

Gatsby

At the core of this blog is Gatsby, as described at its home, it enables building blazing fast sites with react and introduces a ton of features like:

  • Progressive image loading ie. lazy loading images with medium.com like blurred up image rendering with the help of GraphQL that is baked in gatsby for content fetching.
  • Typography.js, allows site wide font styling/scaling and layout setting
  • Syntax highlighting with rehype-prism edited to match Observable code theme.

MDX

This was not possible without this amazing project - MDX that lets blogging engine to include react components with-in the post.md files by extending them to post.mdx that could hold have react magic. Special thanks to ChristopherBiscardi who made MDX possible and for responding to my integration issues along with silvenon who was a reference point for MDX+Gatsby over-engineering madness.