Skip to content

How to contribute

Jump to bottom
Holtz Yan edited this page Jul 10, 2024 · 5 revisions

👋 Hi!

If you read this, it is probably because you want to help me grow Dataviz-inspiration.com.

Thank you so much!

🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

A tour of the project

Dataviz inspiration is a list of all the dataviz projects I love.

A bit like a Pinterest wall of graphs.

Two images are available for each chart:

  • the "zoom" image is the one you see on the main wall. It must be vertical and at least 300px wide. The screenshot can target only a selection of the whole graph. Find a portion of the graph that will look good on the wall.

  • the "full" image is the whole graph. It is displayed when someone clicks on a picture of the wall to enlarge it.

Figure 1: a set of "zoom" images displayed on the wall image

Figure 2: a "full" image is used for the detailed project pages image

What project should I add?

You can suggest any project you like! I will review it and merge if I like it too.

You can also browse any item in the issue tab of the GitHub repo. I have a evergreen growing list of projects to add.

How can I add a project to the list?

The file viz-list.ts is the only file you will have to edit. It is a big javascript object that lists all the "projects".

Each item in the array looks like this:

{
    id: 2,
    title: "Covid 19 Dashboard - India",
    date: new Date(2021, 10),
    author: "Group of dedicated volunteers",
    url: "https://www.covid19india.org",
    img: [
        { full: "covid19India.png", zoom: "covid19India-zoom.png", chartId: ["map", "bubbleMap"] },
        { full: "covid19India-bar.png", zoom: "covid19India-bar-zoom.png", chartId: ["barplot"] },
        { full: "covid19India-line.png", zoom: "covid19India-line-zoom.png", chartId: ["line"] }
    ],
    contextDescription: "The covid crisis is a world wide pandemic and India is certainly not spared. Some volunteer decided to create a dashboard to help Indian politics to take information driven decisions.",
    chartDescription: "A dashboard describing the spread of Covid 19 in India. Highly interactive with a pretty slick design. Dark mode support, many different types of viz with smooth transition between dataset.",
    tools: [{ name: "react", link: "https://github.com/covid19india/covid19india-react" }, { name: "d3.js", link: "https://github.com/covid19india/covid19india-react" }],
    luminosity: ["light", "dark"],
    interactive: true
},

Explanation of each property:

  • id: a number that increments with each new project
  • title: will appear at the top of each graph tile
  • date: publication date
  • author: who made the project
  • url: project link
  • img: an array of image objects. Indeed, one project can have several images! Each item contains:
    • full: the filename of the full-size image
    • zoom: the filename of the zoomed-in image
    • chartId: an array of chart IDs associated with the image. Check the top of the file to see the options.
  • contextDescription: a brief overview explaining the relevance and purpose of the project. Does not talk about dataviz, but about the topic.
  • chartDescription: a detailed description of graph. Why is it worth displaying it in this website? Highlight its features such as interactivity, design, and types of visualizations
  • tools: an array of tools used to create the dashboard, each containing:
    • name: the name of the tool
    • link: a URL to the code or tutorial
  • luminosity: an array indicating the supported display modes, such as "light" and "dark"
  • interactive: a boolean indicating whether the dashboard is interactive

So all you have to do is to add 1 item in this array. You also need to provide the 2 images in the public/image/ folder.

Clone this wiki locally