Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Mar 9, 2013
Embed
What would you like to do?
Vertical thin line chart
{"description":"Vertical thin line chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
//modified from http://janwillemtulp.com/d3linechart/
var data = [{score: 100, freq: 1},
{score: 92, freq: 13},
{score: 77, freq: 2},
{score: 67, freq: 1}],
w = 60,
h = 198,
totalFreq = d3.sum(data, function(d){ return d.freq}),
mean = d3.sum(data, function(d){return d.freq * d.score})/totalFreq,
y = d3.scale.linear().domain([0, 100]).range([0, h]),
x = d3.scale.linear().domain([0, totalFreq]).range([0, w])
var svg = d3.select("svg")
.attr({
"width": 500,
"height": 500,
x: 0,
y: 0
});
var g = svg.append("g")
.attr("transform", "translate(100, 300)");
var line = d3.svg.line()
.x(function(d) { return x(d.freq); })
.y(function(d) { return -y(d.score);});
g.append("svg:path").attr({
"d": line(data),
"stroke": "black",
fill: "black",
"fill-opacity": 0.2
});
g.append("svg:line").attr({
x1: 0,
y1: -y(mean),
x2: w,
y2: -y(mean),
"stroke": "black",
"fill": "none"
});
g.append("rect").attr({
x:0,
y:-h,
width: w,
height: h-y(mean),
fill: "blue",
"fill-opacity": 0.1
});
g.append("rect").attr({
x:0,
y:-y(mean),
width: w,
height: y(mean),
fill: "orange",
"fill-opacity": 0.1
});
g.append("svg:line").attr({
x1: 0,
y1: -y(mean),
x2: w,
y2: -y(mean),
"stroke": "green",
"fill": "none"
});
g.append("circle").attr({
cx: x(2),
cy: -y(77),
r: 2,
stroke: "black",
fill: "yellow"
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.