Skip to content

Instantly share code, notes, and snippets.

@harrisoncramer

harrisoncramer/.block

Last active December 12, 2017 17:46
Show Gist options
  • Save harrisoncramer/f019d2b34a3e8f8da307958b0d9e30cf to your computer and use it in GitHub Desktop.
Save harrisoncramer/f019d2b34a3e8f8da307958b0d9e30cf to your computer and use it in GitHub Desktop.
Download ZIP
Violin Chart
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<script>
function violinChart() {
var colorScale = d3.scaleOrdinal().range(["blue","red","yellow"])
var normal = d3.randomNormal()
var sampleData1 = d3.range(100).map(d => normal())
var sampleData2 = d3.range(100).map(d => normal())
var sampleData3 = d3.range(100).map(d => normal())
var histoChart = d3.histogram();
histoChart
.domain([-3,3])
.thresholds([-3,-2.5,-2,-1.5,-1,-0.5,0,0.5,1,1.5,2,2.5,3])
.value(d => d)
d3.select("body").append("svg").attr("width",500).attr("height",500);
var yScale = d3.scaleLinear().domain([-3,3]).range([400,0])
var yAxis = d3.axisRight().scale(yScale)
.tickSize(300)
d3.select("svg").append("g").call(yAxis)
.attr("class","yAxis")
.attr("transform","translate(0,10)")
var area = d3.area()
.x0(d => -d.length)
.x1(d => d.length)
.y(d => yScale(d.x0))
.curve(d3.curveCatmullRom)
d3.select("svg").selectAll("g.violin")
.data([sampleData1,sampleData2,sampleData3]).enter()
.append("g")
.attr("transform",(d,i) => `translate(${50 + i * 100}, 10)`) .append("path")
.style("stroke","black")
.style("stroke-width", 2)
.style("fill",(d,i) => colorScale(i))
.attr("d", d => area(histoChart(d)))
}
violinChart();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment