A-Pen-by-Pat-McGee.markdown

Learning D3.js

Bar chart tutorial Mike Bostock - Let's Make a Bar Chart

A Pen by Pat McGee on CodePen.

License.

index.html

<div class="header">
 <h1>Subject - Product Count</h1>
  <h6> 1:2 ratio px / products </h4>
</div>
<div class="chart" id="chart-subjects-products"></div>
<hr/>
<div class="header">
  <h1>Medium - Product Count</h1>
  <h6> 1:2 ratio px / products</h6>
<div class="chart" id="chart-mediums-products"></div>
<script src="http://d3js.org/d3.v3.min.js"  charset="utf-8"></script>

script.js

var subjectsProducts = [{"SUBJECTS":"still life","PRODUCT COUNT":"1243"},
            {"SUBJECTS":"minimal","PRODUCT COUNT":"1417"},
            {"SUBJECTS":"abstract","PRODUCT COUNT":"6808"},
            {"SUBJECTS":"geometric","PRODUCT COUNT":"1800"},
            {"SUBJECTS":"landscape","PRODUCT COUNT":"4592"},
            {"SUBJECTS":"figurative","PRODUCT COUNT":"4002"},
            {"SUBJECTS":"nature","PRODUCT COUNT":"3849"},
            {"SUBJECTS":"surrealist","PRODUCT COUNT":"1546"},
            {"SUBJECTS":"realist","PRODUCT COUNT":"1563"},
            {"SUBJECTS":"pop","PRODUCT COUNT":"1201"},
            {"SUBJECTS":"conceptual","PRODUCT COUNT":"2958"},
            {"SUBJECTS":"portrait","PRODUCT COUNT":"2049"},
            {"SUBJECTS":"urban","PRODUCT COUNT":"1989"},
            {"SUBJECTS":"documentary","PRODUCT COUNT":"379"},
            {"SUBJECTS":"illustration","PRODUCT COUNT":"1295"},
            {"SUBJECTS":"folk","PRODUCT COUNT":"392"},
            {"SUBJECTS":"craftsman","PRODUCT COUNT":"114"},
            {"SUBJECTS":"architecture","PRODUCT COUNT":"122"}]

d3.select("#chart-subjects-products")
    .selectAll("div")
      .data(subjectsProducts)
    .enter().append("div")
      .style("class", "outer")
      .style("width", "100%")
      .text(function(d) { return d["SUBJECTS"] + " - " + d["PRODUCT COUNT"]; })
      .append("div")
        .attr("class", "inner")
        .style("width", function(d) { return Number(d["PRODUCT COUNT"])/2 + "px"; });
      

var mediumsProducts = [{"MEDIUMS":"painting","PRODUCT COUNT":"12026"},
                       {"MEDIUMS":"photography","PRODUCT COUNT":"2521"},
                       {"MEDIUMS":"print","PRODUCT COUNT":"1023"},
                       {"MEDIUMS":"mixed media","PRODUCT COUNT":"2659"},
                       {"MEDIUMS":"sculpture","PRODUCT COUNT":"1719"},
                       {"MEDIUMS":"digital media","PRODUCT COUNT":"727"},
                       {"MEDIUMS":"drawing","PRODUCT COUNT":"1170"},
                       {"MEDIUMS":"textiles","PRODUCT COUNT":"173"},
                       {"MEDIUMS":"jewelry","PRODUCT COUNT":"129"},
                       {"MEDIUMS":"installation","PRODUCT COUNT":"88"},
                       {"MEDIUMS":"furniture","PRODUCT COUNT":"45"},
                       {"MEDIUMS":"video","PRODUCT COUNT":"19"},
                       {"MEDIUMS":"books","PRODUCT COUNT":"6"},
                       {"MEDIUMS":"ceramics","PRODUCT COUNT":"80"},
                       {"MEDIUMS":"performance","PRODUCT COUNT":"5"}]

d3.select("#chart-mediums-products")
    .selectAll("div")
      .data(mediumsProducts)
    .enter().append("div")
      .style("width", "100%")
      .attr("class", "outer")
      .text(function(d) { return d["MEDIUMS"] + " - " + d["PRODUCT COUNT"]; })
      .append("div")
        .attr("class", "inner")
        .style("width", function(d) { return Number(d["PRODUCT COUNT"]) + "px"; });

style.css

.header h1,h6 {
  font-family: sans-serif;
}
.chart div.inner {
  margin: 1px;
  height: 30px;
}
.chart div.outer {
  background-color: transparent;
  font: 16px sans-serif;
  position: relative;
}
#chart-subjects-products div div{
  background-color: #0893cf;
}
#chart-subjects-products {
  margin-bottom: 20px;
}
#chart-mediums-products {
  margin-bottom: 20px;
}
#chart-mediums-products div div {
  background-color: #39cccc;
}