31:T990,async function horizontalBarChart() { // Data - can change to sampleData for alluma-esque data // const dataset = await d3.json( // "https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json" // ); const dataset = sampleData; // Chart dimensions let dimensions = { width: 685, height: 450, margin: { top: 25, right: 25, bottom: 50, left: 75 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; // Canvas const wrapper = d3 .select("#wrapper-horizontalBarChart") .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)` ); // Accessors + Scales const xAccessor = d => d.value; const xScale = d3 .scaleLinear() .domain([0, d3.max(dataset, xAccessor)]) .range([dimensions.margin.left, dimensions.boundedWidth]) .nice(); const xAxis = d3 .axisTop(xScale) .ticks(width / 80) .tickFormat(d3.format(".2s")); const yAccessor = d => d.county; const yScale = d3 .scaleBand() .domain(d3.range(dataset.length)) .rangeRound([dimensions.margin.top, dimensions.boundedHeight]) .padding(0.1); const yAxis = d3 .axisLeft(yScale) .tickFormat(i => `${dataset[i].county} - ${dataset[i].gender}`) .tickSizeOuter(0); const colorAccessor = d => d.gender; const colorScale = d3 .scaleOrdinal() .domain(["Male", "Female"]) .range([allumaGreen, allumaSlate]); /// details const barHeight = 25; // Draw data bounds .append("g") .selectAll("rect") .data(dataset) .join("rect") .attr("x", xScale(0)) .attr("y", (d, i) => yScale(i)) .attr("width", d => xScale(xAccessor(d) - xScale(0))) .attr("height", yScale.bandwidth()) .style("fill", d => colorScale(colorAccessor(d))); // Peripherals bounds .append("g") .style("transform", `translate(0,${dimensions.margin.top}px)`) .call(xAxis); bounds .append("g") .style("transform", `translate(${dimensions.margin.left}px, 0px)`) .call(yAxis); // Interactions }32:Ta9e,async function scatterPlot() { // Data - can change to sampleData for alluma-esque data const dataset = await d3.json("https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json") // Chart dimensions let dimensions = { width: 685, height: 450, margin: { top: 25, right: 10, bottom: 50, left: 50, }, } dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom // Canvas const wrapper = d3.select("#wrapper-scatterPlot") .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)`) // Accessors + Scales const xAccessor = d => d.dewPoint const yAccessor = d => d.humidity const colorAccessor = d => d.cloudCover const xScale = d3.scaleLinear() .domain(d3.extent(dataset, xAccessor)) .range([0, dimensions.boundedWidth]) .nice() const yScale = d3.scaleLinear() .domain(d3.extent(dataset, yAccessor)) .range([dimensions.boundedHeight, 0]) .nice() const colorScale = d3.scaleLinear() .domain(d3.extent(dataset, colorAccessor)) .range([allumaGreen, allumaSlate]) // Draw data function drawDots(dataset) { const dots = bounds.selectAll("circle").data(dataset) dots .join("circle") .attr("cx", d => xScale(xAccessor(d))) .attr("cy", d => yScale(yAccessor(d))) .attr("r", 5) .attr("fill", d => colorScale(colorAccessor(d))) } drawDots(dataset) // Peripherals const xAxisGenerator = d3.axisBottom() .scale(xScale) const xAxis = bounds.append("g") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`) const xAxisLabel = xAxis.append("text") .attr("x", dimensions.boundedWidth / 2) .attr("y", dimensions.margin.bottom - 10) .attr("fill", allumaSlate) .style("font-size", "1.4em") .html("X axis title") .attr("class", "axis-title") const yAxisGenerator = d3.axisLeft() .scale(yScale) .ticks(4, "%") const yAxis = bounds.append("g") .call(yAxisGenerator) const yAxisLabel = yAxis.append("text") .attr("x", -dimensions.margin.left) .attr("y", -dimensions.margin.top / 2) .attr("fill", allumaSlate) .style("font-size", "1.4em") .text("Y axis title") .style("text-anchor", "start") .attr("class", "axis-title") // Interactions }33:Ta1e,async function lineChart() { // Data - can change to sampleData for alluma-esque data const dataset = await d3.json("https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json") // Chart dimensions let dimensions = { width: 685, height: 450, margin: { top: 25, right: 10, bottom: 50, left: 50, }, } dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom // Canvas const wrapper = d3.select("#wrapper-lineChart") .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)`) // Accessors + Scales const dateParser = d3.timeParse("%Y-%m-%d") const xAccessor = d => dateParser(d.date) const yAccessor = d => (d.temperatureMax - 32) * 5/9 const xScale = d3.scaleTime() .domain(d3.extent(dataset, xAccessor)) .range([0, dimensions.boundedWidth]) .nice() const yScale = d3.scaleLinear() .domain(d3.extent(dataset, yAccessor)) .range([dimensions.boundedHeight, 0]) .nice() // Draw data const lineGenerator = d3.line() .x(d => xScale(xAccessor(d))) .y(d => yScale(yAccessor(d))) bounds.append("path") .attr("d", lineGenerator(dataset)) .attr("fill", "none") .attr("stroke", colorsPossibleMain[4]) .attr("stroke-width", 1.4) // Peripherals const xAxisGenerator = d3.axisBottom() .scale(xScale) const xAxis = bounds.append("g") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`) const xAxisLabel = xAxis.append("text") .attr("x", dimensions.boundedWidth / 2) .attr("y", dimensions.margin.bottom - 10) .attr("fill", allumaSlate) .style("font-size", "1.4em") .html("X axis title") .attr("class", "axis-title") const yAxisGenerator = d3.axisLeft() .scale(yScale) .ticks(dimensions.boundedHeight / 50) const yAxis = bounds.append("g") .call(yAxisGenerator) const yAxisLabel = yAxis.append("text") .attr("x", -dimensions.margin.left) .attr("y", -dimensions.margin.top / 2) .attr("fill", allumaSlate) .style("font-size", "1.4em") .text("Y axis title") .style("text-anchor", "start") .attr("class", "axis-title") // Interactions }34:[] 2f:{"title":"Examples: Scatterplot","cells":[{"id":0,"value":"md`# Examples: Scatterplot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"{\n yield html`\n

Title of Chart

`;\n scatterPlot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"line_chart = {\n yield html`\n

Title of Chart

`;\n lineChart();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"{\n yield html`\n

Title of Chart

`;\n horizontalBarChart();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"vl.markBar()\n .data(sampleData)\n .encode(\n vl.x().fieldQ('value').axis({title: \"Number of Apps\"}),\n vl.y().fieldN('county'),\n vl.color().fieldN('gender')\n .scale({range: colorsPossibleMain}),\n vl.row().fieldN('gender')\n)\n.title(\"Example\")\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"vl.markBar()\n .data(sampleData)\n .encode(\n vl.x().fieldQ('value').axis({title: \"Number of Apps\"}),\n vl.y().fieldN('county'),\n vl.color().fieldN('county')\n .scale({range: colorsPossibleMain}),\n vl.row().fieldN('gender')\n)\n.title(\"Example\")\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"vl.markBar({color: colorsPossibleMain[index]})\n .data(sampleData)\n .encode(\n vl.x().fieldQ('value').axis({title: \"Number of Apps\"}),\n vl.y().fieldN('county'),\n vl.row().fieldN('gender')\n)\n.title(\"Example Chart\")\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`### d3 charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"colorsPossibleMain = [\n \"#00C389\",\n \"#18BEF5\",\n \"#F51852\",\n \"#F2B705\",\n \"#C93D32\",\n \"#f26514\",\n \"#254E5C\",\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"allumaSlate = \"#425563\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"allumaGreen = \"#00C65E\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"index = _index % colorsPossibleMain.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"_index = {\n let i = 0;\n while (true) {\n await Promises.delay(1000);\n yield ++i;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"sampleData = [\n {\"county\":\"Alameda\",\"gender\":\"Female\",\"value\":1219900},\n {\"county\":\"Alameda\",\"gender\":\"Male\",\"value\":914301},\n {\"county\":\"Los Angeles\",\"gender\":\"Female\",\"value\":1388536},\n {\"county\":\"Los Angeles\",\"gender\":\"Male\",\"value\":622894},\n {\"county\":\"Orange County\",\"gender\":\"Female\",\"value\":523747},\n {\"county\":\"Orange County\",\"gender\":\"Male\",\"value\":553368},\n {\"county\":\"San Francisco\",\"gender\":\"Female\",\"value\":429355},\n {\"county\":\"San Francisco\",\"gender\":\"Male\",\"value\":850145},\n {\"county\":\"San Mateo\",\"gender\":\"Female\",\"value\":867492},\n {\"county\":\"San Mateo\",\"gender\":\"Male\",\"value\":582689}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"import {range} from '@observablehq/introduction-to-generators'","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`#### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}