29:null 2a:["$","title",null,{"children":"UVM Salaries | Eli Standard | Observable"}] 2f:Teb1,{ // Make a canvas with width 1100px and height 1100px const width = 1100; const height = 1100; // Create a vector object with the same width and height const svg = d3.create("svg").attr("width", width).attr("height", height); // Create a data object that stores the basepay data from the csv const data = basePay; // Import a color palette const color = d3.scaleOrdinal().range(d3.schemeSet1); // Create a size scale // d3.scaleLinear() creates a new linear scale. // .domain([1, 10000]) sets the input domain of the scale. It means that any input values falling within the range [1, 10000] will be mapped. //.range([.1, 9]) sets the output range of the scale. It specifies the range of values to which the input domain will be mapped. In this case, input values within the domain [1, 10000] will be linearly mapped to the output range of [.1, 9]. For example, an input value of 1 will be mapped to .1, and an input value of 10000 will be mapped to 9. const size = d3.scaleLinear().domain([1, 100000]).range([.1, 9]); // Create the employee nodes // append a group, make it a circle, use the data const nodes = svg .append("g") .selectAll("circle") .data(data) .join("circle") // This is where the size of the circle corresponds to the salary of the employee .attr("r", (d) => size(d["Salary"])) .attr("cx", width / 2) .attr("cy", height / 2) .attr("stroke", "black") .style("stroke-width", 1) .style("fill", (d) => color(d["Title"])) .style("fill-opacity", 0.8); // When the mouse hovers over the circles, make increase the stroke width to 5pt, when it moves away, go back to 1pt. nodes .on("mouseover", (event) => { d3.select(event.target).style("stroke-width", 5);}) .on("mouseout", (event) => { d3.select(event.target).style("stroke-width", 1);}); // Create the tooltip, an html div on the body that's moused over const tooltip = d3 .select("body") .append("div") .style("position", "absolute") // css attributes .style("visibility", "hidden") // css attributes .style("background", "white") .style("padding", "1em") // Customize the info that the tooltip displays nodes .on("mouseover", (event, d) => { tooltip.style("visibility", "visible"); // Display the employee's name, title, and salary, with line breaks between them tooltip.html(`${d["Name"]}
${d["Title"]}
${"$" + d["Salary"]}`); d3.select(event.target).style("stroke-width", 5);}) // Keep the tooltip aligned with the mouse as we move it. .on("mousemove", (event, d) => { tooltip .style("top", event.clientY - 10 + "px") .style("left", event.clientX + 10 + "px");}) .on("mouseout", (event, d) => { // As the mouse leaves, we want to remove the tooltip tooltip.style("visibility", "hidden"); d3.select(event.target).style("stroke-width", 1);}); // Customize the forces involved between the circles const simulation = d3 .forceSimulation() // forceCenter adjusts attraction to the center of the svg area .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // forceManyBody adjusts the attraction of the circles to each other. If the strength is >0, they are attracted to each other .force("charge", d3.forceManyBody().strength(.5)) // forceCollide adjusts how fast the circles collide, and 'iterations()' is the force that prevents the circles from overlapping .force("collide", d3.forceCollide().strength(1).radius(function (d){return size(d["Salary"]);}).iterations(7)) .nodes(data).on("tick", () => {nodes.attr("cx", (d) => d.x).attr("cy", (d) => d.y);}); return svg.node(); }30:T9ed,{ const width = 800; const height = 800; const svg = d3.create("svg").attr("width", width).attr("height", height); //const data = basePay; const data = basePay.filter((d) => d["Title"] == title); // Color palette const color = d3 .scaleOrdinal() .range(d3.schemeSet1); // Size scale const size = d3.scaleLinear().domain([1, 100000]).range([.1, 9]); const nodes = svg .append("g") .selectAll("circle") .data(data) .join("circle") .attr("r", (d) => size(d["Salary"])) .attr("cx", width / 2) .attr("cy", height / 2) .attr("stroke", "black") .style("stroke-width", 1) .style("fill", (d) => color(d["Title"])) .style("fill-opacity", 0.8); nodes .on("mouseover", (event) => { d3.select(event.target).style("stroke-width", 5); }) .on("mouseout", (event) => { d3.select(event.target).style("stroke-width", 1); }); // creates an html div on the body we're looking at const tooltip = d3 .select("body") .append("div") .style("position", "absolute") // css attributes .style("visibility", "hidden") // css attributes .style("background", "white") .style("padding", "1em") nodes .on("mouseover", (event, d) => { tooltip.style("visibility", "visible"); tooltip.html(`${d["Name"]}
${d["Title"]}
${"$" + d["Salary"]}`); d3.select(event.target).style("stroke-width", 5); }) .on("mousemove", (event, d) => { // Keep the tooltip aligned with the mouse as we move it. tooltip .style("top", event.clientY - 10 + "px") .style("left", event.clientX + 10 + "px"); }) .on("mouseout", (event, d) => { // As the mouse leaves, we want to remove the tooltip tooltip.style("visibility", "hidden"); d3.select(event.target).style("stroke-width", 1); }); const simulation = d3 .forceSimulation() .force( "center", d3 .forceCenter() .x(width / 2) .y(height / 2) ) // Attraction to the center of the svg area .force("charge", d3.forceManyBody().strength(20)) // Nodes are attracted one each other of value is > 0 .force( "collide", d3 .forceCollide() .strength(.5) .radius(function (d){return size(d["Salary"]); }) .iterations(5) // Force that avoids circle overlapping ) .nodes(data) .on("tick", () => { nodes.attr("cx", (d) => d.x).attr("cy", (d) => d.y); }); return svg.node(); }31:T83a,barChart1 = { // Specify the chart’s dimensions, based on a bar’s height. const barHeight = 10; const marginTop = 30; const marginRight = 0; const marginBottom = 10; const marginLeft = 220; const width = 928; const height = Math.ceil((titleCountArray.length + 0.1) * barHeight) + marginTop + marginBottom; // Create the scales. const x = d3.scaleLinear() .domain([0, d3.max(titleCountArray, d => d[1])]) .range([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain(d3.sort(titleCountArray, d => -d[1]).map(d => d[0])) .rangeRound([marginTop, height - marginBottom]) .padding(0.1); // Create a value format. const format = x.tickFormat(1); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Append a rect for each letter. svg.append("g") .attr("fill", "rgb(183, 84, 99)") .selectAll() .data(titleCountArray) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d[0])) .attr("width", (d) => x(d[1]) - x(0)) .attr("height", y.bandwidth()); // Append a label for each letter. svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .selectAll() .data(titleCountArray) .join("text") .attr("x", (d) => x(d[1])) .attr("y", (d) => y(d[0]) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text((d) => format(d[1])) .call((text) => text.filter(d => x(d[1]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")); // Create the axes. svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(width / 80)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)); return svg.node(); }32:T83b,chart = { // Declare the chart dimensions and margins. const width = 960; const height = 500; const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 40; // Bin the data. const bins = d3.bin() .thresholds(bars) .value((d) => d.Salary) (basePay); // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a rect for each bin. svg.append("g") .attr("fill", "steelblue") .selectAll() .data(bins) .join("rect") .attr("x", (d) => x(d.x0) + 1) .attr("width", (d) => x(d.x1) - x(d.x0) - 1) .attr("y", (d) => y(d.length)) .attr("height", (d) => y(0) - y(d.length)); // Add the x-axis and label. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .call((g) => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Salary ($)")); // Add the y-axis and label, and remove the domain line. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call((g) => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Frequency (no. of employees)")); // Return the SVG element. return svg.node(); }33:T840,barChart = { // Specify the chart’s dimensions, based on a bar’s height. const barHeight = 10; const marginTop = 30; const marginRight = 0; const marginBottom = 10; const marginLeft = 220; const width = 928; const height = Math.ceil((meanSalaryArray.length + 0.1) * barHeight) + marginTop + marginBottom; // Create the scales. const x = d3.scaleLinear() .domain([0, d3.max(meanSalaryArray, d => d[1])]) .range([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain(d3.sort(meanSalaryArray, d => -d[1]).map(d => d[0])) .rangeRound([marginTop, height - marginBottom]) .padding(0.1); // Create a value format. const format = x.tickFormat(20); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Append a rect for each letter. svg.append("g") .attr("fill", "rgb(35, 159, 138)") .selectAll() .data(meanSalaryArray) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d[0])) .attr("width", (d) => x(d[1]) - x(0)) .attr("height", y.bandwidth()); // Append a label for each letter. svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .selectAll() .data(meanSalaryArray) .join("text") .attr("x", (d) => x(d[1])) .attr("y", (d) => y(d[0]) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text((d) => format(d[1])) .call((text) => text.filter(d => x(d[1]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")); // Create the axes. svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(width / 80, "$")) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)); return svg.node(); }34:[{"id":"198cd553fd9c3c3cbae6a1846b39f34b5a5ab4d07012352e43f19e3c5d2b9e19bb65da0316ae76359ace6e4ecc35e8eea69c02f0ee865044f1d9bca80896e4a3","href":"https://static.observableusercontent.com/files/198cd553fd9c3c3cbae6a1846b39f34b5a5ab4d07012352e43f19e3c5d2b9e19bb65da0316ae76359ace6e4ecc35e8eea69c02f0ee865044f1d9bca80896e4a3","name":"UVMBasePay_ToExport.csv","type":"text/csv","lastModified":1703360095875.923,"size":203321}] 2d:{"id":"ef9dd15412e09704","slug":null,"title":"UVM Salaries","thumbnail":"b137ad5651538825677e813567726c1dfea9ad37730834c9d8c9280f3ac24174","access_level":"public","create_time":"$D2023-12-23T19:32:50.953Z","update_time":"$D2024-08-05T03:19:58.205Z","view_time":null,"first_public_time":"$D2023-12-23T19:32:50.953Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fc4efa9ca05c06e","login":"elistandard","name":"Eli Standard","avatar_url":"https://avatars-next.observableusercontent.com/4c1b8090cff6c12c6bf97e8cdb4931f3e0e6321dbef5c66c031ce98e49bf9c75","tier":"starter_2024"},"version":290,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b21f049d995eb1d5","login":"elistandard","name":"Eli Standard","avatar_url":"https://avatars-next.observableusercontent.com/4c1b8090cff6c12c6bf97e8cdb4931f3e0e6321dbef5c66c031ce98e49bf9c75","tier":null}],"members":[{"type":"individual","id":"b21f049d995eb1d5","login":"elistandard","name":"Eli Standard","avatar_url":"https://avatars-next.observableusercontent.com/4c1b8090cff6c12c6bf97e8cdb4931f3e0e6321dbef5c66c031ce98e49bf9c75","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"UVM Salaries","cells":[{"id":0,"value":"# UVM Salaries\nWhich UVM employee makes the most money?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"basePay = FileAttachment(\"UVMBasePay_ToExport.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"## The Big Names","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":101,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"## Filter By Job Title","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":95,"value":"viewof title = Inputs.select([...new Set(basePay.map(d => {return d[\"Title\"]}))])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"## Search by Name","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":137,"value":"viewof search = Inputs.search(basePay)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"Inputs.table(search, {\n format: {Salary: sparkbar(d3.max(search, d => d.Salary))}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"## The Most Common Jobs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":262,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"## Salary Distribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":182,"value":"viewof bars = slider({\n min: 0, \n max: 250, \n step: 1, \n value: 60, \n title: \"Integers\", \n description: \"Control the number of bins in the histogram below\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"## Average Salary Per Title","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":221,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"function sparkbar(max) {\n return x => htl.html`

${x.toLocaleString(\"en\")}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"titleCountMap = d3.rollup(basePay, v => v.length, d => d.Title)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"titleCountArray = Array.from(titleCountMap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"meanSalaryMap = d3.rollup(basePay, v => d3.mean(v, d => d.Salary), d => d.Title)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"meanSalaryArray = Array.from(meanSalaryMap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"