https://github.com/benmar2406/meat_consumption_infographic

Interactive web app with scrollytelling elements that uses creative approaches to visualize data beyond typical visualization methods.
https://github.com/benmar2406/meat_consumption_infographic

d3 d3js data-visualization data-visualization-design datavisualization framer-motion framermotion information-visualization react scrollama scrollanimation scrollytelling

Last synced: about 2 months ago
JSON representation

Interactive web app with scrollytelling elements that uses creative approaches to visualize data beyond typical visualization methods.

• Host: GitHub
• URL: https://github.com/benmar2406/meat_consumption_infographic
• Owner: benmar2406
• Created: 2024-08-23T07:51:14.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-12-11T19:45:42.000Z (about 2 months ago)
• Last Synced: 2024-12-11T19:47:09.084Z (about 2 months ago)
• Topics: d3, d3js, data-visualization, data-visualization-design, datavisualization, framer-motion, framermotion, information-visualization, react, scrollama, scrollanimation, scrollytelling
• Language: JavaScript
• Homepage: https://meat-consumption-infographic.onrender.com/
• Size: 12.1 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Interactive website / infographic: 1kg - Costs of consumption

## Overview

an interactive web app with scrollytelling elements which informs about the impact of meat consumption and production in terms of ressource usage and environmental impact.

Creative approaches are used to visualize data beyond typical visualization methods.

Created with React (Vite) and several libraries.

## Visualization & Animation Libraries

* D3.js

* Framer Motion

* Scrollama

## Features

* language support based on browser setting

* german and english (default), can be expanded to further languages

## Installation and setup

### Prerequisites

* Node.js and npm installed

### Start server and client locally

* Navigate to main directory

* "npm run dev" to start local development server

* "npm run build" to create deployable build