CODEWITHSUNDEEP
css
charlie
charlie

Reputation: 187

Display images horizontally

I'm following along in the book "Building Data Visualizations with D3.js" and according to the book the following code is supposed to show at least 3 of the images on 1 line. Yet, my code displays everything stacked vertically on top of one another. What am I missing that is not being taught in the book.

var flowers = [{
  "name": "Hydrangia",
  "latin": "Hydrangea",
  "light": "Sun",
  "ease": 3
}, {
  "name": "Chrysanthemum",
  "latin": "Chrysanthemum",
  "light": "Part Sun",
  "ease": 1
}, {
  "name": "Peony",
  "latin": "Paeonia",
  "light": "Part Sun",
  "ease": -1
}, {
  "name": "Orchid",
  "latin": "Paeonia",
  "light": "Shade",
  "ease": -5
}, {
  "name": "Fern",
  "latin": "Dryopteris",
  "light": "Shade",
  "ease": 5
}];

// Part 1
// Creating elements
var div = d3.select("div#content")
  .selectAll("div")
  .data(flowers)
  .enter().append("div").attr("class", "flowers");
body {
  font-size: 16px;
  line-height: 1.5em;
  color: #333333;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

div#content {
  margin: auto;
  width: 800px;
}

div#content > h1 {
  margin: 20px;
  text-align: center;
}

div#content > div.flower > * {
  margin: 0;
}

div#content div.flower {
  display: inline-block;
  padding: 15px 20px;
  margin: 10px;
  vertical-align: top;
}

div#content div.flower > img {
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="content">
  <h1>My Favorite Flowers</h1>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
</div>

Upvotes: 0

Views: 50

Answers (2)

P.S.
P.S.

Reputation: 16384

All you need is to declare this style:

.flowers {
  display: inline-block;
}

And all your blocks will be in one line (if free space will be enough):

var flowers = [
          {
            "name": "Hydrangia",
            "latin": "Hydrangea",
            "light": "Sun",
            "ease": 3
          },
          {
            "name": "Chrysanthemum",
            "latin": "Chrysanthemum",
            "light": "Part Sun",
            "ease": 1
          },
          {
            "name": "Peony",
            "latin": "Paeonia",
            "light": "Part Sun",
            "ease": -1
          },
          {
            "name": "Orchid",
            "latin": "Paeonia",
            "light": "Shade",
            "ease": -5
          },
          {
            "name": "Fern",
            "latin": "Dryopteris",
            "light": "Shade",
            "ease": 5
          }
        ];

        // Part 1
        // Creating elements
        var div = d3.select("div#content")
            .selectAll("div")
            .data(flowers)
            .enter().append("div").attr("class", "flowers");
        body {
            font-size: 16px;
            line-height: 1.5em;
            color: #333333;
            font-family: 'Helvetica Neue',Helvetica,sans-serif;
        }
        div#content {
            margin: auto;
            width: 800px;
        }
        div#content > h1 {
            margin: 20px;
            text-align: center;
        }
        div#content > div.flower > * {
            margin: 0;
        }
        div#content > div.flower {
            display: inline-block;
            padding: 15px 20px;
            margin: 10px;
            vertical-align: top;
        }
        div#content div.flower > img {
            width: 200px;
        }
        
        img {
          width: 100px;
          height: auto;
        }
        
        .flowers {
          display: inline-block;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="content">
      <h1>My Favorite Flowers</h1>
      <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
    </div>

Upvotes: 1

Jonathan
Jonathan

Reputation: 724

Fixed, you named the classes wrong in your css.

Your HTML referenced to class flowers and CSS named it flower. Fixed the CSS for you!

var flowers = [{
  "name": "Hydrangia",
  "latin": "Hydrangea",
  "light": "Sun",
  "ease": 3
}, {
  "name": "Chrysanthemum",
  "latin": "Chrysanthemum",
  "light": "Part Sun",
  "ease": 1
}, {
  "name": "Peony",
  "latin": "Paeonia",
  "light": "Part Sun",
  "ease": -1
}, {
  "name": "Orchid",
  "latin": "Paeonia",
  "light": "Shade",
  "ease": -5
}, {
  "name": "Fern",
  "latin": "Dryopteris",
  "light": "Shade",
  "ease": 5
}];

// Part 1
// Creating elements
var div = d3.select("div#content")
  .selectAll("div")
  .data(flowers)
  .enter().append("div").attr("class", "flowers");
body {
  font-size: 16px;
  line-height: 1.5em;
  color: #333333;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

div#content {
  margin: auto;
  width: 800px;
}

div#content>h1 {
  margin: 20px;
  text-align: center;
}

div#content>div.flowers>* {
  margin: 0;
}

div#content div.flowers {
  display: inline-block;
  padding: 15px 20px;
  margin: 10px;
  vertical-align: top;
}

div#content div.flowers>img {
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="content">
  <h1>My Favorite Flowers</h1>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
</div>

Upvotes: 0

Related Questions