The avatar for @credmond
Charles Redmond
Published
Data Viz (Grad)
Edited
Feb 11, 2020
Fork of Starter Template Data Viz
•
1 fork
Data Viz (Grad)
Data Visualization (Grad) 2020Starter Template Data VizSVG IntroTransformsBarbellHouseD3 IntroSlidersTransitionsAnimationFor LoopsIntro to GraphingGraphing from ScratchTracing a FunctionFiltering
More with Filtering
More 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 21 (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
Insert cell
Insert cell
{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black")
var xAxis = svg.append("g").attr("transform",`translate(0,150)`)
d3.axisBottom(xScale)(xAxis)
var yAxis = svg.append("g").attr("transform",`translate(300,0)`)
d3.axisLeft(yScale)(yAxis)
var data2 = data.filter(d => d.x < 0)
for(var i = 0;i < data2.length; i++){
svg.append("circle")
.attr("r",5)
.attr("cx",xScale(data2[i].x))
.attr("cy",yScale(data2[i].y))
}
yield svg.node()
}
Insert cell
xScale = d3.scaleLinear().domain([-10,10]).range([30,570])
Insert cell
yScale = d3.scaleLinear().domain([-10,10]).range([270,30])
Insert cell
Insert cell
data = [{x:2,y:4},{x:-6,y:8},{x:-8,y:3},{x:-5,y:-5}]
Insert cell
Insert cell
// For Loop
{
for(var i = 0;i < 10; i++){
}
}
Insert cell
// While Loop
{
var i = 0
while(i < 10){
i++
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more