2c:null 2d:["$","title",null,{"children":"D3: Introducing | Sumant Pattanaik | Observable"}] 32:T432,{ let svg = d3.select(DOM.svg(Width,Height)); let chart = svg.append("g").attr("transform",`translate(${margin}, ${margin})`); let data = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500]; let xScale = d3.scaleBand().domain(d3.range(10)).range([0, chartWidth]).padding(0.2); let yScale = d3.scaleLinear().domain([0,d3.max(data)]).range([chartHeight, 0]); chart.selectAll("rect") .data(data) .join("rect") .attr("x", (d,i)=>xScale(i)) .attr("y", (d,i)=>yScale(d)) .attr("height", (d,i)=>chartHeight-yScale(d)) .attr("width",xScale.bandwidth()) .style("fill",d3.schemeCategory10[0]) .on("mouseover", function(d,i){ const rect = d3.select(this); rect.style("stroke", "red"); }) .on("mouseout", function(d,i){ d3.select(this).style("stroke","white"); }); let xAxis = d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft().scale(yScale); chart.append('g').attr('transform', `translate(0, ${chartHeight})`).call(xAxis); chart.append('g').call(yAxis) return svg.node(); }33:Ta17,{ let svg = d3.select(DOM.svg(Width,Height)); let chart = svg.append("g").attr("transform",`translate(${margin}, ${margin})`); let data = gapminderData.filter(d=>d.year==gapminderYears[year]); let xDomain = [20, 90]; let yDomain = [100, 100000]; let radDomain = d3.extent(data,d=>d.pop); let colorDomain = Array.from(new Set(data.map(d=>d.continent))); let xScale = d3.scaleLinear().domain(xDomain).range([0, chartWidth]).nice(); let yScale = d3.scaleLog().domain(yDomain).range([chartHeight, 0]).nice(); let radScale = d3.scaleSqrt().domain(radDomain).range([2,50]); let colorScale = d3.scaleOrdinal().domain(colorDomain).range(d3.schemeCategory10); // Bubbles chart.selectAll("circle") .data(data) .join("circle") .attr("cx", (d,i)=>xScale(d.lifeExp)) .attr("cy", (d,i)=>yScale(d.gdpPercap)) .attr("r", (d,i)=>radScale(d.pop)) .style("fill",(d,i)=>colorScale(d.continent)) .style("stroke","black") .style("opacity",0.3) .append("title") .text(d=>d.country); //axes let xAxis = d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft().scale(yScale).ticks(10, ".0s"); chart.append('g').attr('transform', `translate(0, ${chartHeight})`).call(xAxis); chart.append('g').call(yAxis) // text label for the x axis chart.append("text") .attr("transform", `translate(${chartWidth/2},${chartHeight + margin/1.5})`) .style("text-anchor", "middle") .text("Life Expectancy in Years"); // text label for the y axis chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin) .attr("x",0 - (chartHeight / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Percapita GDP in $"); // x Grid lines chart.append("g") .selectAll('line') .data(xScale.ticks()) .join('line') .attr('x1', d => xScale(d)) .attr('x2', d => xScale(d)) .attr('y1', 0) .attr('y2', chartHeight) .style("stroke", "black") .style("opacity",0.05); // y Grid lines chart.append("g") .selectAll('line') .data(yScale.ticks()) .join('line') .attr('x1', 0) .attr('x2', chartWidth) .attr('y1', d => yScale(d)) .attr('y2', d => yScale(d)) .style("stroke", "black") .style("opacity",0.05); //Create Title svg.append("text") .attr("x", Width / 2 ) .attr("y", margin/2) .style("font-size", 32) .style("text-anchor", "middle") .text("Gapminder Plot"); return svg.node(); }34:Tde6,{ let svg = d3.select(DOM.svg(Width,Height)); let chart = svg.append("g").attr("transform",`translate(${margin}, ${margin})`); let data = gapminderData.filter(d=>d.year==gapminderYears[0]); let xDomain = [20, 90]; let yDomain = [100, 100000]; let radDomain = d3.extent(data,d=>d.pop); let colorDomain = Array.from(new Set(data.map(d=>d.continent))); let xScale = d3.scaleLinear().domain(xDomain).range([0, chartWidth]).nice(); let yScale = d3.scaleLog().domain(yDomain).range([chartHeight, 0]).nice(); let radScale = d3.scaleSqrt().domain(radDomain).range([2,50]); let colorScale = d3.scaleOrdinal().domain(colorDomain).range(d3.schemeCategory10); //axes let xAxis = d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft().scale(yScale).ticks(10, ".0s"); chart.append('g').attr('transform', `translate(0, ${chartHeight})`).call(xAxis); chart.append('g').call(yAxis) // text label for the x axis chart.append("text") .attr("transform", `translate(${chartWidth/2},${chartHeight + margin/1.5})`) .style("text-anchor", "middle") .text("Life Expectancy in Years"); // text label for the y axis chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin) .attr("x",0 - (chartHeight / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Percapita GDP in $"); // x Grid lines chart.append("g") .selectAll('line') .data(xScale.ticks()) .join('line') .attr('x1', d => xScale(d)) .attr('x2', d => xScale(d)) .attr('y1', 0) .attr('y2', chartHeight) .style("stroke", "black") .style("opacity",0.05); // y Grid lines chart.append("g") .selectAll('line') .data(yScale.ticks()) .join('line') .attr('x1', 0) .attr('x2', chartWidth) .attr('y1', d => yScale(d)) .attr('y2', d => yScale(d)) .style("stroke", "black") .style("opacity",0.05); //Create Title const title = svg.append("text") .attr("x", Width / 2 ) .attr("y", margin/2) .style("font-size", 32) .style("text-anchor", "middle") .text("Gapminder Plot. Animated."); const t = svg.transition() .duration(750); let yearIndex = 0, yearIncrement = 1; while (true){ chart.selectAll("circle") .data(gapminderData.filter(d=>d.year==gapminderYears[yearIndex])) .join( enter => enter.append("circle") .attr("cx", (d,i)=>xScale(d.lifeExp)) .attr("cy", chartHeight) .attr("r",2) .style("fill",(d,i)=>colorScale(d.continent)) .style("stroke","black") .style("opacity",0.3) .append("title") .text(d=>d.country) .call(enter => enter.transition(t) .attr("cy", (d,i)=>yScale(d.gdpPercap)) .attr("r", (d,i)=>radScale(d.pop)) ), update => update .call(update => update.transition(t) .attr("cx", (d,i)=>xScale(d.lifeExp)) .attr("cy", (d,i)=>yScale(d.gdpPercap)) .attr("r", (d,i)=>radScale(d.pop)) ), exit => exit .call(exit => exit.transition(t) .attr("cy", Height+20) .remove() ) ); title.text(`Gapminder Plot. ${gapminderYears[yearIndex]}`); yield svg.node(); yearIndex+=yearIncrement; if (yearIndex === gapminderYears.length-1 || yearIndex == 0) yearIncrement *= -1; await Promises.tick(2500); } }35:T8ef,{ let svg = d3.select(DOM.svg(Width,Height)); let chart = svg.append("g").attr("transform",`translate(${margin}, ${margin})`); let countries = ["United States", "China", "India", "Nigeria"]; let data = countries.map(country=>gapminderData.filter(d=>d.country==country).map(d=>({country: d.country, year: d.year,gdpPercap: d.gdpPercap}))); //return data let xDomain = [gapminderYears[0], gapminderYears[gapminderYears.length-1]]; let yDomain = [100, 100000]; let colorDomain = countries; let xScale = d3.scaleLinear().domain(xDomain).range([0, chartWidth]).nice(); let yScale = d3.scaleLog().domain(yDomain).range([chartHeight, 0]).nice(); let colorScale = d3.scaleOrdinal().domain(colorDomain).range(d3.schemeCategory10); //axes let xAxis = d3.axisBottom().scale(xScale).ticks(10); let yAxis = d3.axisLeft().scale(yScale).ticks(10, ".0s"); chart.append('g').attr('transform', `translate(0, ${chartHeight})`).call(xAxis); chart.append('g').call(yAxis) // text label for the x axis chart.append("text") .attr("transform", `translate(${chartWidth/2},${chartHeight + margin/1.5})`) .style("text-anchor", "middle") .text("Year"); // text label for the y axis chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin) .attr("x",0 - (chartHeight / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Percapita GDP in $"); //Create Title const title = svg.append("text") .attr("x", Width / 2 ) .attr("y", margin/2) .style("font-size", 32) .style("text-anchor", "middle") .text("GDP vs Year"); const line = d3.line() //.defined(d => !isNaN(d.value)) .x(d => xScale(d.year)) .y(d => yScale(d.gdpPercap)) .curve(d3.curveCardinal); chart.append("g").selectAll("path") .data(data) .join("path") .attr("d",line) .style("fill", "none") .style("stroke", (d,i)=>colorScale(countries[i])) chart.append("g").selectAll("text") .data(data) .join("text") .attr("x",(d,i)=>xScale(d[d.length-1].year)) .attr("y",(d,i)=>yScale(d[d.length-1].gdpPercap)) .text(d=>d[d.length-1].country) .style("font-size", 12); return svg.node(); }36:T83b,{ let svg = d3.select(DOM.svg(Width,Height)); let chart = svg.append("g").attr("transform",`translate(${margin}, ${margin})`); let continents = Array.from(new Set(gapminderData.map(d=>d.continent))); let data = continents.map(continent=>({ continent: continent, population: d3.sum(gapminderData.filter(d=>d.continent==continent), d=>d.pop) })); let colorDomain = continents; let colorScale = d3.scaleOrdinal().domain(continents).range(d3.schemeCategory10); const pieRadius = chartHeight/2; //Create Title const title = svg.append("text") .attr("x", margin + pieRadius ) .attr("y", margin/2) .style("font-size", 32) .style("text-anchor", "middle") .text("Population Piechart"); const pieDataGenerator = d3.pie().padAngle(0.02).value(d => d.population) const pieData = pieDataGenerator(data) //return pieData; const arcGenerator = d3 .arc() .innerRadius(0) .outerRadius(pieRadius) .cornerRadius(5); chart.append("g").attr("transform",`translate(${pieRadius},${pieRadius})`) .selectAll("path") .data(pieData) .join('path') .attr('d', arcGenerator) .attr('fill', d => colorScale(d.data.continent)) .attr('stroke', 'grey') .style('stroke-width', '1px') .append("title") .text(d=>`Population: ${d.data.population}`); const legend = chart .append('g') .attr('transform', `translate(${pieRadius * 2 + 10},0)`); const labelHeight = 20; legend.selectAll('rect') .data(pieData) .join('rect') .attr('y', (d,i) => labelHeight * i * 1.8) .attr('width', labelHeight) .attr('height', labelHeight) .attr('fill', d => colorScale(d.data.continent)) .attr('stroke', 'grey') .style('stroke-width', '1px'); legend.selectAll('text') .data(pieData) .join('text') .text(d => d.data.continent) .attr('x', labelHeight * 1.2) .attr('y', (d,i) => labelHeight * i * 1.8 + labelHeight) .style('font-family', 'sans-serif') .style('font-size', labelHeight); return svg.node(); }37:[] 30:{"id":"8acaeb23a7536668","slug":"d3-introducing","title":"D3: Introducing","thumbnail":"0e8a3e135178268a7b4da25483bbc06a28095c0ab96a4dad0d55360121fc760a","access_level":"public","create_time":"$D2020-11-09T22:58:24.015Z","update_time":"$D2021-01-12T18:50:10.670Z","view_time":null,"first_public_time":"$D2020-11-10T10:22:37.500Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024"},"version":591,"publish_version":591,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"baff35547a2323b5","slug":"cap-5738","title":"Data Visualization Using D3 and Ploty.js","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"titling":"auto","title":"D3: Introducing","cells":[{"id":0,"value":"md`# D3: Introducing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`### Getting Started with SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`#### In HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`#### In D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"{\n // Create a square