Data Visualization (Grad) 2020Starter Template Data VizSVG IntroTransformsBarbellHouseD3 IntroSlidersTransitionsAnimationFor LoopsIntro to GraphingGraphing from ScratchTracing a FunctionFilteringMore with FilteringMore Areas Under CurvesNormal Curve ApplicationPractice MidtermData SetsTime Series/Line ChartHistogramsMarch 17 (Grad Data Viz)March 24 (Grad Data Viz)March 26 (Grad Data Viz)March 31 (Grad Data Viz)April 2 (Grad Data Viz)April 7 (Grad Data Viz)April 14 (Grad Data Viz)April 16 (Grad Data Viz)April 23 (Grad Data Viz)April 28 (Grad Data Viz)April 30 (Grad Data Viz)Data Viz Final Problem 1Data Viz Final Problem 2
April 21 (Grad Data Viz)
/*{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`)
var links = [
{source:1,target:2},
{source:2,target:3},
{source:3,target:4},
{source:4,target:1}
]
var nodes = [
{id:1,name:"A",color:"cornflowerblue"},
{id:2,name:"B",color:"tomato"},
{id:3,name:"C",color:"goldenrod"},
{id:4,name:"D",color:"green"}
]
var link = []
for(var i = 0;i < links.length; i++){
var line = svg.append("line")
.attr("stroke","black")
link.push(line)
}
var node = []
for(var i = 0;i < nodes.length; i++){
var circle = svg.append("circle")
.attr("r",20)
.attr("stroke","black")
.attr("fill",nodes[i].color)
node.push(circle)
}
var simulation = d3.forceSimulation()
.on("tick",() => {
for(var i = 0;i < node.length; i++){
node[i].attr("cx",Math.random()*600)
node[i].attr("cy",Math.random()*300)
}
for(var i = 0;i < link.length; i++){
link[i].attr("x1",?)
link[i].attr("y1",?)
link[i].attr("x2",?)
link[i].attr("y2",?)
}
})
return svg.node()
}*/
html`
<iframe width="${560}" height="${315}" src="https://www.youtube.com/embed/jH9gsQ_O4LM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
`
/*{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`)
var links = [
{source:1,target:2},
{source:2,target:3},
{source:3,target:4},
{source:4,target:1}
]
var nodes = [
{id:1,name:"A",color:"cornflowerblue"},
{id:2,name:"B",color:"tomato"},
{id:3,name:"C",color:"goldenrod"},
{id:4,name:"D",color:"green"}
]
var link = []
for(var i = 0;i < links.length; i++){
var line = svg.append("line")
.attr("stroke","black")
link.push(line)
}
var node = []
for(var i = 0;i < nodes.length; i++){
var circle = svg.append("circle")
.attr("r",20)
.attr("stroke","black")
.attr("fill",nodes[i].color)
node.push(circle)
}
var simulation = d3.forceSimulation()
.on("tick",() => {
for(var i = 0;i < node.length; i++){
node[i].attr("cx",Math.random()*600)
node[i].attr("cy",Math.random()*300)
}
for(var i = 0;i < link.length; i++){
link[i].attr("x1",() => {
var index = nodes.findIndex(d => d.id == links[i].source)
node[index].attr("cx")
})
link[i].attr("y1",)
link[i].attr("x2",)
link[i].attr("y2",)
}
})
return svg.node()
}*/
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.