3f:null 40:["$","title",null,{"children":"Hello, Interactive Bar Chart! | Yuan Fang | Observable"}] 46:Tcb8,barChart_1 = { // 3. Draw canvas 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)`) // init static elements bounds.append("g") .attr("class", "bins") bounds.append("line") .attr("class", "mean") bounds.append("g") .attr("class", "x-axis") .style("transform", `translateY(${dimensions.boundedHeight}px)`) .append("text") .attr("class", "x-axis-label") const metricAccessor = d => d[DataType] const yAccessor = d => d.length // 4. Create scales const xScale = d3.scaleLinear() .domain(d3.extent(dataset, metricAccessor)) .range([0, dimensions.boundedWidth]) .nice() const binsGenerator = d3.histogram() .domain(xScale.domain()) .value(metricAccessor) .thresholds(12) const bins = binsGenerator(dataset) const yScale = d3.scaleLinear() .domain([0, d3.max(bins, yAccessor)]) .range([dimensions.boundedHeight, 0]) .nice() // 5. Draw data //const barPadding = 1 let binGroups = bounds.select(".bins") .selectAll(".bin") .data(bins) //binGroups.exit() //.remove() const newBinGroups = binGroups.enter().append("g") .attr("class", "bin") newBinGroups.append("rect") newBinGroups.append("text") // update binGroups to include new points binGroups = newBinGroups.merge(binGroups) const barRects = binGroups.select("rect") .attr("x", d => xScale(d.x0) + barPadding) .attr("y", d => yScale(yAccessor(d))) .attr("height", d => dimensions.boundedHeight - yScale(yAccessor(d))) .attr("width", d => d3.max([ 0, xScale(d.x1) - xScale(d.x0) - barPadding ])) const mean = d3.mean(dataset, metricAccessor) const meanLine = bounds.selectAll(".mean") .attr("x1", xScale(mean)) .attr("x2", xScale(mean)) .attr("y1", -20) .attr("y2", dimensions.boundedHeight) // draw axes const xAxisGenerator = d3.axisBottom() .scale(xScale) const xAxis = bounds.select(".x-axis") .call(xAxisGenerator) const xAxisLabel = xAxis.select(".x-axis-label") .attr("x", dimensions.boundedWidth / 2) .attr("y", dimensions.margin.bottom - 10) .text(`${DataType}`) // 7. Set up interactions binGroups.select("rect") .on("mouseenter", onMouseEnter) .on("mouseleave", onMouseLeave) const tooltip = d3.select("#tooltip") function onMouseEnter(datum){ //f const formatHumidity = d3.format(".2f") tooltip.select("#count") .text(yAccessor(datum)) tooltip.select("#range") .text([formatHumidity(datum.x0), formatHumidity(datum.x1)].join(" - ")) const x = xScale(datum.x0) + (xScale(datum.x1) - xScale(datum.x0)) / 2 + dimensions.margin.left const y = yScale(yAccessor(datum)) + dimensions.margin.top tooltip.style("transform", `translate(` +`calc( -50% + ${x}px),` +`calc( -100% + ${y}px)` +`)`) tooltip.style("opacity", 0.7) } function onMouseLeave(datum){ tooltip.style("opacity", 0) } return `Renders the chart`; }47:T43f,html` `48:[{"id":"f4e4879fa262dec44a3359e177bc1721fe0daa4facc723e42d1a70d8df643b5905ace47ee2c57d73f29a237d8615d79b5b9636227ead49e577851127326d766d","href":"https://static.observableusercontent.com/files/f4e4879fa262dec44a3359e177bc1721fe0daa4facc723e42d1a70d8df643b5905ace47ee2c57d73f29a237d8615d79b5b9636227ead49e577851127326d766d","name":"my_weather_data.json","type":"application/json","lastModified":1637520287034.232,"size":385143}] 44:{"id":"9c778460fb321e5a","slug":"hello-d3-bar-chart","title":"Hello, Interactive Bar Chart!","thumbnail":"8d2932bb37bea2e332eef296b75aceee966c6d10213aaedcc059ea9851ccee96","access_level":"public","create_time":"$D2021-11-21T18:33:42.484Z","update_time":"$D2021-11-23T03:13:09.462Z","view_time":null,"first_public_time":"$D2021-11-22T10:16:51.155Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"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":405,"publish_version":405,"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":1,"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, Interactive Bar Chart!","cells":[{"id":0,"value":"# Hello, Interactive Bar Chart!\n\nThis is my notebook for the book, [*Fullstack D3 and Data Visualization*](https://www.newline.co/fullstack-d3).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`\n## Histogram\nA histogram is a bar chart that shows **the distribution of one metric**, with the metric values on the x axis and the **frequency of values** on the y axis.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"html`\n

Humidity:

days

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"viewof DataType = Inputs.select(metrics, {value: \"humidity\", label: \"Data Type\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof barColor = Inputs.select(x11colors, {value: \"steelblue\", label: \"Bar Color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"viewof barColor_h = Inputs.select(x11colors, {value: \"sienna\", label: \"Bar hovered Color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"viewof barPadding = Inputs.select([1, 5, 10, 15], {value: \"1\", label: \"Bar Padding\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`\n# Appendix\n- Using d3.js\n- Accessing data\n- Setting dimension\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"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"},{"id":102,"value":"dataset = 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":340,"value":"import { x11colors } from \"@observablehq/input-select\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"metrics = [\n\"windSpeed\",\n\"moonPhase\",\n\"dewPoint\",\n\"humidity\",\n\"uvIndex\",\n\"windBearing\",\n\"temperatureMin\",\n\"temperatureMax\",]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// 2.Create chart dimensions\ndimensions = ({\n width: chartWidth,\n height: chartWidth * 0.6,\n margin: {\n top: 10,\n right: 10,\n bottom: 50,\n left: 50\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"chartWidth = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$47","pinned":true,"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"