The bite-sized daily graphics starter.
This template repository is designed to help The Michigan Daily data team quickly start up and produce data visualizations to embed on michigandaily.com.
It has several useful features:
- MicroCMS with ArchieML
- Bundling with Vite
- D3v7 as a dependency by default
- Templating with Nunjucks
- Easy deploy to GitHub Pages
- Easy deploy to S3 bucket
- Preview screen with embed URL
- Data ingest from Google Sheets
- Easy include of ai2html output
- Ability to develop several common graphics in one repository
Click the green "Use this template" button to create a new instance of the cookie
template. Then, clone the new instance and run yarn install
to initialize the project.
You can use yarn dev
to start a development server and yarn build
to build production-ready files into dist/
.
Edit the files in src/
. To create graphics, you should only be editing files within the src/graphic/
directory. You can write any markup in src/graphic/index.html
, and JavaScript in src/graphic/js/graphic.js
, and any styles in src/graphic/css/graphic.scss
.
There are some CSS variables available to you:
--serif
for serif font (Lora)--sans
for sans serif font (Open Sans)--blue
,--maize
,--gray
,--black
,--white
, and--blue-{1..5}
for colors
If you are embedding the graphic on the homepage, add the homepage
class to the body
tag. This will set the headline font to Lora, and will set the body font to Open Sans.
If you want to develop another graphic in the same instance, create a new HTML file in src/graphic
that uses the base.html
template. Refer to src/graphic/index.html
for how to extend the template. You'll also need to create a new entry in config.json
.
Refer to the Google Drive fetch section in the sink
README for instructions on how to set up config.json
for fetching files from Google Drive.
You can import a JSON file in JS like this:
import copy from "../data/data.json";
You can import a CSV file in JS like this:
import csvfile from "../data/data.csv";
We use the @michigandaily/rollup-plugin-dsv
plugin (which relies on d3-dsv
) to parse CSV files (or other DSV files) into usable arrays. You can prevent automatic typing by adding a autoType=false
query parameter to the end of the import path. You can also specify which columns you want imported with a columns
query parameter. Refer to the transformer README for examples.
- Use our Adobe Illustrator template to create a graphic.
- Save the instance to the root of this repository.
- Set the red and bold
filename
value under theai2html-text
section to the name of the instance file name. - Generate the ai2html output. It should be in
src/graphic/ai2html-output
. - In
config.json
, setillustrator_output_filename
to the HTML output file.
Refer to the AWS S3 deployment with cache invalidation section in the sink
README for instructions on how to set up config.json
for deploying to AWS S3.
- Ensure sure that
base
invite.config.js
is routed correctly (it should probably beconfig.key
prepended and appended by a/
). - Run
yarn sink deploy aws
.
Refer to the GitHub Pages deployment section in the sink
README for instructions on how to set up config.json
for deploying to GitHub Pages.
- Ensure sure that
base
invite.config.js
is routed correctly (it should probably beconfig.key
prepended and appended by a/
). - Run
yarn sink deploy github
. - Go to
Settings > Pages
and check the Enforce HTTPS option. All of our sites should enforce HTTPS, so please make sure to double check this! - Your raw graphic will be accessible at
https://michigandaily.github.io/<repository-name>/graphic/index.html
.
Running yarn build
will 1) build production files and 2) trigger a process where Playwright spawns a headless Chrome browser and downloads screenshots of the graphics. If the script is unable to find a cached version of Chrome or is unable to use your default Chrome installation, it will install Chrome in a cache folder.
If you don't want yarn build
to trigger the Playwright process, set COOKIE_SCREENSHOT=false
in a .env
file.
You can also prevent the screenshot process by setting the environment variable inline prior to a command: COOKIE_SCREENSHOT=false yarn build
or COOKIE_SCREENSHOT=false yarn sink deploy github
.