Contact
CoCalc Logo Icon
StoreFeaturesDocsShareSupport News AboutSign UpSign In
| Download

Github repo cloud-examples: https://github.com/sagemath/cloud-examples

Views: 7807
License: MIT

D3 Tutorial and Worksheet Mode

Based on http://alignedleft.com/tutorials/d3/ but using CoffeeScript and a Sage Worksheet

by William Stein

July 22, 2013

%auto import uuid def d3(s=None,obj=None,css=None): def f(s): u = 'a'+str(uuid.uuid4()) h = '<div id="%s" style="background-color:#f0f0f0" class="well"></div>'%u if css is not None: h += '<style type="text/css">%s</style>'%css html(h, hide=False) salvus.coffeescript("d=d3.select('#%s')\n%s"%(u,s),obj=obj) if s is None: return f else: f(s)
%auto %default_mode d3
d.append("p") .text("hello there, world")
unknown message type 'obj'
dataset = [ 5, 10, 15, 20, 25 ] d.selectAll('p') .data(dataset) .enter() .append('p') .text((d) -> d) .style('color', (d) -> if d > 15 then 'red' else 'blue')
unknown message type 'obj'
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ] d.selectAll('div') .data(dataset) .enter() .append('div') .attr('style', "display: inline-block;width: 20px;height: 75px; background-color: teal; margin-right: 2px;") .style('height', (d) -> 5*d+'px')
unknown message type 'obj'
%html(hide=0) <svg width="500" height="50"> <rect x="0" y="0" width="500" height="5"/> <circle cx="250" cy="25" r="25"/> <ellipse cx="250" cy="25" rx="100" ry="25" fill="purple"/> <line x1="0" y1="0" x2="500" y2="50" stroke="black"/> <text x="250" y="25">Easy-peasy</text> </svg>
[removed]
%html(hide=0) <svg width=500 height=50> <circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/> </svg>
[removed]
%html(hide=0) <svg width=500 height=50> <rect x="0" y="0" width="30" height="30" fill="purple"/> <rect x="20" y="5" width="30" height="30" fill="blue"/> <rect x="40" y="10" width="30" height="30" fill="green"/> <rect x="60" y="15" width="30" height="30" fill="yellow"/> <rect x="80" y="20" width="30" height="30" fill="red"/> </svg>
[removed]
%html(hide=0) <svg width=500 height=50> <circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/> <circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/> <circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/> <circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/> <circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/> </svg>
[removed]
%html(hide=0) <svg width=500 height=50> <circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/> <circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/> <circle cx="50" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/> <circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/> <circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/> </svg>
[removed]
dataset = [ 5, 10, 15, 20, 25 ] h = 100 svg = d.append("svg").attr(width:500,height:h) circles = svg.selectAll('circle') .data(dataset) .enter() .append("circle") circles.attr cx : (d,i) -> i*50 + 15 cy : h/2 r : (d) -> d fill : 'yellow' stroke : 'orange' 'stroke-width' : (d) -> d/2
unknown message type 'obj'
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ] for i in [0...20] dataset.push(Math.round(Math.random()*20)) w = 500; h = 100 barPadding = 1 svg = d.append("svg").attr(width:w,height:h) svg.selectAll('rect') .data(dataset) .enter() .append('rect') .attr x : (d, i) -> i * (w / dataset.length) y : (d) -> h-d*4 width : w / dataset.length - barPadding height : (d) -> d*4 fill : (d) -> "rgb(0,0,#{d*10})"
unknown message type 'obj'
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ] for i in [0...10] dataset.push(Math.round(Math.random()*20)) w = 700; h = 100 barPadding = 1 svg = d.append("svg").attr(width:w,height:h) svg.selectAll('rect') .data(dataset) .enter() .append('rect') .attr x : (d, i) -> i * (w / dataset.length) y : (d) -> h-d*3 width : w / dataset.length - barPadding height : (d) -> d*3 fill : (d) -> "rgb(0,0,#{d*10})" svg.selectAll('text') .data(dataset) .enter() .append("text") .text( (d) -> d ) .attr x : (d,i) -> i * (w / dataset.length) y : (d) -> h - (d * 3)-5
unknown message type 'obj'
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ] for i in [0...10] dataset.push(Math.round(Math.random()*20)) w = 700; h = 150 barPadding = 1 svg = d.append("svg").attr(width:w,height:h) svg.selectAll('rect') .data(dataset) .enter() .append('rect') .attr x : (d, i) -> i * (w / dataset.length) y : (d) -> h-d*4 width : w / dataset.length - barPadding height : (d) -> d*4 fill : (d) -> "rgb(#{d*10},0,0)" svg.selectAll('text') .data(dataset) .enter() .append("text") .text( (d) -> d ) .attr x : (d,i) -> i * (w / dataset.length) + (w / dataset.length - barPadding) / 2 y : (d) -> h - (d * 4) + 15 "font-family": "sans-serif" "font-size" : "11px" "fill" : "white" "text-anchor": "middle"
unknown message type 'obj'
dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ] w = 700; h = 150 svg = d.append("svg").attr(width:w,height:h) svg.selectAll('circle') .data(dataset) .enter() .append('circle') .attr cx : (d) -> d[0] cy : (d) -> d[1] r : 5 svg.selectAll("text") .data(dataset) .enter() .append("text") .text((d) -> d) .attr x : (d) -> d[0]+5 y : (d) -> d[1]-3 "font-family": "sans-serif" "font-size" : "11px" "fill" : "red"
unknown message type 'obj'
dataset = [ 100, 200, 300, 400, 500 ] scale = d3.scale.linear().domain([100, 500]).range([10, 350]) d.text(scale(300)).attr(x:50, y:50)
unknown message type 'obj'
dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600,150] ] w = 600; h = 300; padding = 20 xScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[0])]).range([padding, w-padding*2]) yScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[1])]).range([h-padding, padding]) rScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[1])]).range([2,5]) svg = d.append("svg").attr(width:w,height:h) svg.selectAll('circle') .data(dataset) .enter() .append('circle') .attr cx : (d) -> xScale(d[0]) cy : (d) -> yScale(d[1]) r : (d) -> rScale(d[1]) svg.selectAll("text") .data(dataset) .enter() .append("text") .text((d) -> d) .attr x : (d) -> xScale(d[0]) y : (d) -> yScale(d[1]) "font-family": "sans-serif" "font-size" : "11px" "fill" : "red"
unknown message type 'obj'
%d3(css=""" .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } """) dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600,150] ] w = 600; h = 300; padding = 40 xScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[0])]).range([padding, w-padding*2]) yScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[1])]).range([h-padding, padding]) rScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[1])]).range([2,5]) xAxis = d3.svg.axis().scale(xScale).orient('bottom') yAxis = d3.svg.axis().scale(yScale).orient('left') svg = d.append("svg").attr(width:w,height:h) svg.append('g') .attr("class", "axis") .attr("transform", "translate(0,#{h - padding})") .call(xAxis) svg.append('g') .attr("class", "axis") .attr("transform", "translate(#{padding},0)") .call(yAxis) svg.selectAll('circle') .data(dataset) .enter() .append('circle') .attr cx : (d) -> xScale(d[0]) cy : (d) -> yScale(d[1]) r : (d) -> rScale(d[1])
unknown message type 'obj'
%d3(css=""" .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } """) numDataPoints = 50 dataset = ( [Math.random()*1000, Math.random()*1000] for i in [0...numDataPoints] ) w = 600; h = 300; padding = 40 xScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[0])]).range([padding, w-padding*2]) yScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[1])]).range([h-padding, padding]) rScale = d3.scale.linear() .domain([0, d3.max(dataset, (d) -> d[1])]).range([2,5]) xAxis = d3.svg.axis().scale(xScale).orient('bottom').ticks(5) yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5) svg = d.append("svg").attr(width:w,height:h) svg.append('g') .attr("class", "axis") .attr("transform", "translate(0,#{h - padding})") .call(xAxis) svg.append('g') .attr("class", "axis") .attr("transform", "translate(#{padding},0)") .call(yAxis) svg.selectAll('circle') .data(dataset) .enter() .append('circle') .attr cx : (d) -> xScale(d[0]) cy : (d) -> yScale(d[1]) r : (d) -> rScale(d[1])
unknown message type 'obj'