3f:null 40:["$","title",null,{"children":"Hello, Static Bar Chart! | Yuan Fang | Observable"}] 46:T693,simpleBarchart = { //1. draw canvas const data = data_simpleBarchart const wrapper = d3.select('#wrapper') .append('svg') .attr('width', dimensions.width) .attr('height', dimensions.height) const bounds = wrapper.append('g') .style('transform', `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`) //2. create scale & axis const xScale = d3.scaleLinear() .domain([0, 0.2]) .range([0, boundedWidth]) const formatter = d3.format('.0%') const xAxis = bounds.append('g') .attr("class", "x-axis") .style("transform", `translateY(${boundedHeight}px)`) .call(d3.axisBottom(xScale).tickFormat(formatter)) const yScale = d3.scaleBand() .domain(data.map(yAccessor)) .range([0, boundedHeight]) .padding(0.3) const yAxis = bounds.append('g') .call(d3.axisLeft(yScale)) .attr('class', 'y-axis') .style('transform', `translateX(${-10}px)`) //3. draw data const barPadding = 5 const barGroup = bounds.append('g') const barGroups = barGroup.selectAll('g') .data(data) .enter().append('g') const barRects = barGroups.append('rect') .attr('y', (d) => yScale(yAccessor(d))) .attr('x', 0) .attr('height', yScale.bandwidth()) .attr('width', (d) => xScale(xAccessor(d))) .attr('class', 'bar') //4. add barLabels const formatPercent = d3.format(".1%"); const barLabels = barGroups .append("text") .attr("x", (d) => xScale(xAccessor(d)) + 3) .attr("y", (d) => yScale(yAccessor(d)) + yScale.bandwidth()/1.8) .text((d) => formatPercent(xAccessor(d))) .attr('class', 'barLabel') return `Rander Simple Bar Chart` }47:T7c2,lollipop = { //1. draw canvas const data = data_simpleBarchart const wrapper = d3.select('#wrapper_lo') .append('svg') .attr('width', dimensions.width) .attr('height', dimensions.height) const bounds = wrapper.append('g') .style('transform', `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`) //2. create scale & axis const xScale = d3.scaleLinear() .domain([0, 0.2]) .range([0, boundedWidth]) const formatter = d3.format('.0%') const xAxis = bounds.append('g') .attr("class", "x-axis") .style("transform", `translateY(${boundedHeight}px)`) .call(d3.axisBottom(xScale).tickFormat(formatter)) const yScale = d3.scaleBand() .domain(data.map(yAccessor)) .range([0, boundedHeight]) .padding(1) const yAxis = bounds.append('g') .call(d3.axisLeft(yScale)) .attr('class', 'y-axis') .style('transform', `translateX(${-10}px)`) //3. draw data const barPadding = 5 const barGroup = bounds.append('g') const barGroups = barGroup.selectAll('g') .data(data) .enter() .append('g') .attr('class', 'bar') const sticks = barGroups .append('line') .attr('x1', (d) => xScale(xAccessor(d))) .attr('x2', 0) .attr('y1', (d) => yScale(yAccessor(d))) .attr('y2', (d) => yScale(yAccessor(d))) .attr('stroke', 'grey') const circles = barGroups .append('circle') .attr('cx', (d) => xScale(xAccessor(d))) .attr('cy', (d) => yScale(yAccessor(d))) .attr('r', '6') .style("fill", "#69b3a2") .attr("stroke", "black") //4. add barLabels const formatPercent = d3.format(".1%"); const barLabels = barGroups .append("text") .attr("x", (d) => xScale(xAccessor(d)) + 15) .attr("y", (d) => yScale(yAccessor(d))) .text((d) => formatPercent(xAccessor(d))) .attr('class', 'barLabel') return `Rander Lollipop` }48:[{"id":"f4e4879fa262dec44a3359e177bc1721fe0daa4facc723e42d1a70d8df643b5905ace47ee2c57d73f29a237d8615d79b5b9636227ead49e577851127326d766d","href":"https://static.observableusercontent.com/files/f4e4879fa262dec44a3359e177bc1721fe0daa4facc723e42d1a70d8df643b5905ace47ee2c57d73f29a237d8615d79b5b9636227ead49e577851127326d766d","name":"my_weather_data.json","type":"application/json","lastModified":1637615127053.584,"size":385143},{"id":"fdf49bd1bcafd1b3bad901879dbf9867e3cccffb84b8a784ad5c4028b8c6d3d910cb32133733425bf43fc291ce4e049837965b7b213031317e533df8eb0645a1","href":"https://static.observableusercontent.com/files/fdf49bd1bcafd1b3bad901879dbf9867e3cccffb84b8a784ad5c4028b8c6d3d910cb32133733425bf43fc291ce4e049837965b7b213031317e533df8eb0645a1","name":"data_simplebarchart.json","type":"application/json","lastModified":1637615014624.079,"size":818}] 44:{"id":"68275530406cda34","slug":"hello-static-bar-chart","title":"Hello, Static Bar Chart!","thumbnail":"cb3470c4e768f79a19c2f45672717d3e491362c1e2a156d9e969e5c45efe3ef8","access_level":"public","create_time":"$D2021-11-22T20:46:55.204Z","update_time":"$D2021-11-23T07:58:12.886Z","view_time":null,"first_public_time":"$D2021-11-23T02:53:17.460Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"b8c35c591301716a","login":"fangyuan","name":"Yuan Fang","avatar_url":"https://avatars-next.observableusercontent.com/14c10f15cea7818414505bc10612efb0417d79937b5525764154fd520ef88cfe","tier":"starter_2024","bio":"A data visualization engineer who creates XR app :)","following":false},"version":301,"publish_version":301,"role":null,"authored":false,"authors":[{"type":"individual","id":"2cf3d94a02dd7342","login":"fangyuan","name":"Yuan Fang","avatar_url":"https://avatars-next.observableusercontent.com/14c10f15cea7818414505bc10612efb0417d79937b5525764154fd520ef88cfe","tier":null,"bio":"A data visualization engineer who creates XR app :)","following":false}],"members":[{"type":"individual","id":"2cf3d94a02dd7342","login":"fangyuan","name":"Yuan Fang","avatar_url":"https://avatars-next.observableusercontent.com/14c10f15cea7818414505bc10612efb0417d79937b5525764154fd520ef88cfe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9b6acf3c83248895","slug":"hello-d3-observable-libs-bar-chart","title":"Hello D3 & Observable libs: Bar Chart!","owner":{"id":"b8c35c591301716a","login":"fangyuan","name":"Yuan Fang"}},"type":"notebook","body":{"titling":"auto","title":"Hello, Static Bar Chart!","cells":[{"id":0,"value":"md`\n

\nThe data using in this note is from my project[* A World on the Cover*](https://yuanfang313.github.io/world-on-cover/).\n

\n# Hello, Static Bar Chart!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n## 1. Intro\nThis notebook is all about bar charts: the concept, the features, and the d3 code of each kind.\n\n- Simple bar chart\n- Simple lollipop chart\n- Stacked bar chart\n- Grouped bar chart\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"sBarchart = md`---\n## 2.1 Simple bar chart\nA bar chart shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value.\n\n#### Here are some key points of bar chart\n- Order/ sort your samples, it makes the graph much easier to read and extract insights.\n- A horizontal version allows to read long labels more easily\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"stackedBar = md`---\n## 2.3 Stacked Bar Chart\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`\nTo be continued...\n[sample](https://github.com/yuanfang313/hurix_stackedBarChart)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`\n### - Stacked Bar Chart with negtive values\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"groupedBar = md`---\n## 2.4 Grouped Bar Chart\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`\nTo be continued...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`---\n### - Functions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"xAccessor = d => d.proportion","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"yAccessor = d => d.subCategory","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\n### - Dimensions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"dimensions = ({\n width: window.innerWidth * 0.6,\n height: 300,\n margin: {\n top: 15,\n right: 50,\n bottom: 50,\n left: 200\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"boundedWidth = {\n return dimensions.width - dimensions.margin.left - dimensions.margin.right\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"boundedHeight = {\n return dimensions.height - dimensions.margin.top - dimensions.margin.bottom\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n### - Style\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`\n## 3. Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`\n### - Show Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Inputs.table(data_simpleBarchart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`\n### - Access Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"data = await FileAttachment(\"my_weather_data.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"data_simpleBarchart = FileAttachment(\"data_simplebarchart.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`\n### - Imported Files\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\n### - Access D3\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"