25:["$","title",null,{"children":"Visualization Project - Part 2 (final project)- Draft | Gabriela Gamez | Observable"}] 49:T6c2,viewof selections = { const rowHeight = 20; const fontSize = 15; const carColor = d3.scaleOrdinal() .domain(origins) .range(d3.schemeCategory10); const svg = d3.create('svg') .attr('width', 100) // origins is an array containing the strings USA, Europe, and Japan .attr('height', rowHeight * origins.length + 5); const rows = svg.selectAll('g') .data(origins) .join('g') // position the group for each row of the legend .attr('transform', (d, i) => `translate(5, ${i * rowHeight + 5})`); // add colored square to each row rows.append('rect') .attr('width', fontSize) .attr('height', fontSize) .attr('stroke-width', 2) .attr('stroke', d => carColor(d)) .attr('fill', d => carColor(d)) .on('click', onclick); // add label to each row rows.append('text') .attr('font-size', fontSize) .attr('x', rowHeight) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(d => d); // Track which origins are selected in the legend. // This is a map from car origin to a boolean for // whether or not it the origin is selected. // To start, all origins are selected. const selected = new Map(origins.map(d => [d, true])); function onclick(event, d) { const isSelected = selected.get(d); // this refers to the square that was clicked const square = d3.select(this); // toggle the square square.attr('fill', d => isSelected ? 'white' : carColor(d)); selected.set(d, !isSelected); svg.property('value', selected).dispatch('input'); } svg.property('value', selected).dispatch('input'); return svg.node(); }4a:Tdaa, // set up function barchart_max() { const visWidth = 400 const visHeight = 400 const hoverColor = '#eec42d'; const carColor = d3.scaleOrdinal() .domain(origins) .range(d3.schemeCategory10); const x = d3.scaleLinear() .domain([0, d3.max(carData, d => d[xFeatures])]).nice() .range([0, visWidth]); const y = d3.scaleBand() .domain(carData.map(d => d.origin)) //.domain(d3.extent(carData, d => d[yFeatures])) .range([0, visHeight]) .padding(0.2); const margin = {top: 10, right: 100, bottom: 50, left: 105}; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); //-----------------------------------------------------------------------------Start axes const xAxisGroup = g.append("g") .attr('transform', `translate(0,${visHeight})`) .call(d3.axisBottom(x).tickFormat(format)) .call(g => g.select('.domain').remove()) // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight) .attr('y2', 0))//; // add label .call(g => g.append('text') .attr('x', visWidth / 2) .attr('y', 40) .attr('fill', 'black') .attr('text-anchor', 'middle') .text(xFeatures)); //.text('horsepower')); const yAxisGroup = g.append("g") .call(d3.axisLeft(y)); //-----------------------------------------------------------------------------END axes ///-------------------------------------------------------------------------------------------Start tooltip SVG text element const tooltip = d3 .select('body') .append('div') .attr('class', 'd3-tooltip') .style('position', 'absolute') .style('visibility', 'hidden') .style('background', 'rgba(0,0,0,0.6)') .style('padding', '10px') .style('border-radius', '4px') .style('color', '#fff') .text('a simple tooltip'); ///-------------------------------------------------------------------------------------------END tooltip SVG text element //---------------------------------------------------------------------------- draw mark for each element in data g.selectAll('rect') // .data(data) .data(carData.filter(d => selections.get(d.origin))) .join('rect') .attr('x', 0) .attr('y', d => y(d.origin)) .attr('width', d => x(d[xFeatures])) .attr('height', y.bandwidth()) .attr('fill', d => carColor(d.origin)) //Change the contents and position of the tooltip .on('mouseover', function (event,d, i) { tooltip .html( `

Name: ${d.origin}

${xFeatures}: ${d[xFeatures]}

Name: ${d.origin}

${xFeatures}: ${d[xFeatures]}

${yFeatures}: ${d[yFeatures]}

` ) .style('visibility', 'visible'); d3.select(this).transition().attr('fill',hoverColor); }) .on('mousemove', function (event) { tooltip .style('top', event.pageY - 10 + 'px') .style('left', event.pageX + 10 + 'px'); }) .on('mouseout', function (event) { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition().attr('fill', 'steelblue'); }); //-----------------------------------------------------------------------------------------Start-Zoom in const zoom = d3.zoom() .extent([ [margin.left, margin.top], [visWidth + margin.left, visHeight + margin.top] ]) // determine how much you can zoom out and in .scaleExtent([1, Infinity]) .on('zoom', onZoom); svg.call(zoom); function onZoom(event) { // get updated scales const xNew = event.transform.rescaleX(x); const yNew = event.transform.rescaleY(y); // update the position of the dots //.attr('cx', d => xScale(d[xFeatures])) dots.attr('cx', d => xNew(d[xFeatures])) .attr('cy', d => yNew(d[yFeatures])); // update the axes xAxisGroup.call(d3.axisBottom(xNew)) .call(g => g.selectAll('.domain').remove()); yAxisGroup.call(d3.axisLeft(yNew)) .call(g => g.selectAll('.domain').remove()); // update the grid yGrid.selectAll('line') .data(yNew.ticks()) .join('line') .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth) .attr('y1', d => 0.5 + yNew(d)) .attr('y2', d => 0.5 + yNew(d)); xGrid.selectAll('line') .data(xNew.ticks()) .join('line') .attr('stroke', '#d3d3d3') .attr('y1', 0) .attr('y2', visHeight) .attr('x1', d => 0.5 + xNew(d)) .attr('x2', d => 0.5 + xNew(d)); } //-----------------------------------------------------------------------------------------END-Zoom in return svg.node(); }4c:T740,* [CS725, Interaction in Vega-Lite](https://observablehq.com/@weiglemc/cs725-interaction-in-vega-lite) * [CS725, D3 Intro - Bar Chart](https://observablehq.com/@weiglemc/cs725-d3-intro-bar-chart) * [CS725, D3 Intro - Scatterplot](https://observablehq.com/@weiglemc/cs725-d3-intro-scatterplot) * [CS725, D3 Intro - Line and Area Charts](https://observablehq.com/@weiglemc/cs725-d3-intro-line-and-area-charts) * [CS725, D3 Intro - Layered Line and Area Charts](https://observablehq.com/@weiglemc/cs725-d3-intro-layered-line-and-area-charts) * [CS725, Multi-Line Chart Arquero Data Setup](https://observablehq.com/@weiglemc/cs725-multi-line-chart-arquero-data-setup) * [CS725, Vega-Lite Dashboard with Brushing and Linking](https://observablehq.com/@weiglemc/cs725-vega-lite-dashboard-with-brushing-and-linking?collection=@weiglemc/cs-725-825-spring-2023) * [Dashboard with Brushing and Linking Example in Vega-Lite](https://observablehq.com/@weiglemc/brushing-and-linking-example-with-vega-lite) * [Learn D3: Interaction](https://observablehq.com/@d3/learn-d3-interaction) * [Multi-Line Chart Focus + Context w/ Mouseover Tooltip](https://observablehq.com/@brianjlee11/multi-line-chart-focus-context-w-mouseover-tooltip) * [Animated Bar Chart with Tooltip D3 6.0](https://observablehq.com/@mbrownshoes/animated-bar-chart-with-tooltip-d3-6-0) * [Interaction](https://observablehq.com/@nyuvis/interaction) * [d3 v6 pointer function not adjusting for scale and translate](https://stackoverflow.com/questions/64189608/d3-v6-pointer-function-not-adjusting-for-scale-and-translate) * [U.S. BUREAU OF LABOR STATISTICS](https://data.bls.gov/timeseries/CUUR0000SA0L1E?output_view=pct_12mths) * [Yahoo! finance](https://finance.yahoo.com) * [HW1 - Vega-Lite](https://observablehq.com/d/1a8c01149a686720) * [HW3 - D3 Intro](https://observablehq.com/d/5e55e7e98ccf1200)4d:[{"id":"2e57dfaa240022f23a07a31b5b9d3b380d3eaaaa7d37f394d18bb0b4382f21434c7b82d184183c1ce18bfdcbc9342903d73d0ef8abaacbb100f827c14d3bd8be","href":"https://static.observableusercontent.com/files/2e57dfaa240022f23a07a31b5b9d3b380d3eaaaa7d37f394d18bb0b4382f21434c7b82d184183c1ce18bfdcbc9342903d73d0ef8abaacbb100f827c14d3bd8be","name":"Stocks-historical-data-more-info-season.csv","type":"text/csv","lastModified":1681170594476.017,"size":361333}] 29:{"id":"71217c3843fd0799","slug":null,"title":"Visualization Project - Part 2 (final project)- Draft","thumbnail":"65285c387f5ed9d321d24f47b239f8ebaed26632da1adadc87324019ba6e1355","access_level":"public","create_time":"$D2023-04-10T18:21:16.045Z","update_time":"$D2023-04-11T18:44:23.187Z","view_time":null,"first_public_time":"$D2023-04-10T18:21:16.045Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8a4b0b01f276585e","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":"starter_2024","bio":"","following":false},"version":329,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"435839829bcad1f9","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"435839829bcad1f9","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization Project - Part 2 (final project)- Draft","cells":[{"id":0,"value":"# Visualization Project - Part 2 (final project)- Draft\n\nGabriela Gamez\nCS 725/825, Spring 2023 \nDue: April 10, 2023","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"## Table of Contents\n\n- [_Data_](#data_section)\n- [_Dashboard_](#vegalite)\n- [_Reference_](#reference)\n- [_Appendix_](#appendix)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"Yahoo_Stockdata = FileAttachment(\"Stocks-historical-data-more-info-season.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof yahoo_data = aq.from(Yahoo_Stockdata).view({height:150})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"datasets = require('vega-datasets@1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"carData = (await datasets['cars.json']()).map(d => ({\n horsepower: d['Horsepower'],\n weight: d['Weight_in_lbs'],\n origin: d['Origin'],\n displacement: d['Displacement'],\n acceleration: d['Acceleration'],\n mpg: d['Miles_per_Gallon'],\n name: d['Name']\n})).filter(d => d.horsepower !== null && d.weight !== null && d.origin !== null && d.name !== null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"origins = Array.from(new Set(carData.map(d => d.origin)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"columns = ['horsepower', 'weight', 'displacement', 'acceleration', 'mpg']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof xFeatures = Inputs.select(columns, {value: 'horsepower', label: 'x axis'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"viewof yFeatures = Inputs.select(columns, {value: 'weight', label: 'y axis'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"\n\n\n \n \n \n \n \n \n \n \n

${viewof selections}	${viewof xFeatures} ${viewof yFeatures}
Correlation of ${xFeatures} and ${yFeatures} ${viewof scattertrend}	Max Values of ${xFeatures} ${viewof bartMax}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"viewof scattertrend = Scatterplot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof bartMax = barchart_max()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"reference = md`\n

\n## Reference\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"appendix = md`\n

\n## Appendix \nThis section contains all the essential libraries need to complete this assignment.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"import {Range, Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"//import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import {uniqueValid} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"import {printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"format = d3.format('~s')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"formatClose = d3.format(\"$.2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null

Correlation of ${xFeatures} and ${yFeatures}

Max Values of ${xFeatures}