Skip to content

Instantly share code, notes, and snippets.

@pathouse
Forked from anonymous/A-Pen-by-Pat-McGee.markdown
Last active January 3, 2016 17:19
Show Gist options
  • Save pathouse/8494990 to your computer and use it in GitHub Desktop.
Save pathouse/8494990 to your computer and use it in GitHub Desktop.
<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>
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"; });
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment