` tags to keep things orderly. We'll also add a headline and short introduction to the section.
```html
A South L.A. neighborhood stands apart
Harvard Park's 2016 homicide total was its highest in at least 15 years
despite a downward trend in killings across L.A. County.
```
Next, we’ll want to create a container to hold the graphics. We will give this `div` a class of `graphics-container`. Inside it, we'll add two other `divs` with the class `graphic` to hold each graphic.
```html
A South L.A. neighborhood stands apart
Harvard Park's 2016 homicide total was its highest in at least 15 years
despite a downward trend in killings across L.A. County.
```
Now that we have containers for the iframes, let’s go back and get those iframe embed codes and paste them within the `div`s with the class `graphic`.
The iframe embed codes are located in the “Publish & Embed” step of each map in Datawrapper. Click on the clipboard to the right of the embed code field to copy the responsive iframe code.
```{image} _static/charts/chart-embed-code.png
:width: 100%
```
Paste it in place of the html notes in the previous code block example. Your html should look something like this at the end:
```html
A South L.A. neighborhood stands apart
Harvard Park's 2016 homicide total was its highest in at least 15 years
despite a downward trend in killings across L.A. County.
```
At this point, you should see something like this on your page:
```{image} _static/charts/chart-preview-1.png
:width: 100%
```
We want the charts to be positioned side-by-side, so we will need to add some CSS.
## Style the charts section with CSS
Navigate to your app.scss file.
We can get both charts on the same line by using [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox). Using CSS, we will target the `div` that contains both graphics (`div.graphics-container`) and make each graphic 48% of the width, with some space in between them.
```css
div.graphics-container {
display: flex;
justify-content: space-between;
div.graphic {
flex: 0 1 48%;
}
}
```
Now that the charts are next to each other, we can see that despite our resizing in Datawrapper, they are not the same height. We’ll add a few more lines to our CSS to make both iframes the same height (`350px`) and we will also specify with media queries that on screens smaller than `500px` wide, we want the charts to be positioned one after another instead of side-by-side. This will help so that on mobile, they are not super tiny.
```css
div.graphics-container {
display: flex;
justify-content: space-between;
@media (max-width: 500px) {
display: block;
}
div.graphic {
flex: 0 1 48%;
@media (max-width: 500px) {
display: block;
margin-bottom: 15px;
}
iframe {
min-height: 350px;
}
}
}
```
Congratulations, you’ve made your charts!
```{image} _static/charts/chart-preview-2.png
:width: 100%
```
Let's commit our changes and move on to our next challenge.
```bash
git add .
git commit -m "Made my first charts."
git push origin main
```
```{note}
We used Datawrapper in this class, but there are many other ways to create charts.
There are other tools similar to Datawrapper that allow you to use a visual editor, creating charts and other visualizations that you can download and/or embed in your project.
- [Observable](https://beta.observablehq.com) is a relatively new site that allows you to take a more exploratory approach to building your visualizations. Charts and maps update automatically as you update data or settings.
- [Chartbuilder](https://quartz.github.io/Chartbuilder/) from [Quartz](https://qz.com/), is very good for basic, fast charts with light customization.
There are also JavaScript charting libraries, each one slightly different. If you want to explore these on your own, here are some options:
- [D3](https://d3js.org/)
- [Vega-lite](https://vega.github.io/vega-lite/)
- [Charts.js](http://www.chartjs.org/) Looks really awesome and abstracts a lot of the pain points of D3 away, but as it only draws to `