import React, { useState, useCallback, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { csv, scaleLinear, max, format, extent, scaleBand, nest, scaleOrdinal } from 'd3'; import ReactDropdown from 'react-dropdown'; import { useData } from './useData'; import { AxisBottom } from './AxisBottom'; import { AxisLeft } from './AxisLeft'; import { Marks } from './Marks'; import { Dropdown } from './Dropdown'; import { getAttributes} from '/getAttributes'; const width = 960; const menuHeight = 80; const height = 500 - menuHeight; const margin = { top: 20, right: 30, bottom: 65, left: 280}; const xAxisLabelOffset = 50; const yAxisLabelOffset = 45; const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const siFormat = format('.2s'); const xAxisTickFormat = tickValue => tickValue; // siFormat(tickValue).replace('G', 'B'); const attributes = getAttributes(); const getLabel = value => { for (let i = 0; i < attributes.length; i++) { if (attributes[i].value === value) { return attributes[i].label; } } }; const App = () => { const data = useData(); const initialXAttribute = null; const [xAttribute, setXAttribute] = useState(initialXAttribute); const xValue = d => d['IngredientCount']; const yValue = d => d['Ingredient']; const xAxisLabel = getLabel(xAttribute); if (!data) { return

Loading...

; } const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const nonAggFilteredData = data .filter(function(x) { if (xAttribute && xAttribute != "None") {return x.MainAlcohol.toLowerCase().includes(xAttribute.toLowerCase())} else { return x } }); let filteredData = nest() .key(function(d) { return d.Ingredient; }) .rollup(function(ingredients) { return ingredients.length; }) .entries(nonAggFilteredData) filteredData.forEach(function(d) { d.Ingredient = d.key; d.IngredientCount = d.value; }); filteredData = filteredData .sort(function(x, y){return d3.descending(x.IngredientCount, y.IngredientCount)}); filteredData = filteredData.slice(0, 20); console.log(filteredData); const yScale = scaleBand() .domain(filteredData.map(yValue)) .range([0, innerHeight]) .paddingInner(0.15); const xScale = scaleLinear() .domain([0, max(filteredData, xValue)]) .range([0, innerWidth]); console.log("xScale: ", xScale); return ( <>

Main Alcohol setXAttribute(value)} />

); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Filterable Cocktail Ingredient Bar Chart

Jacklyn Turner