41:null 42:["$","title",null,{"children":"A two-point log-scale line chart | Joe Murphy | Observable"}] 48:T8ee,chartNoAxis = { // HARD CODE THE EXAMPLE DATA //const valOne = 45; //const valTwo = 10; // Uncomment these two lines for prod -- they don't work in the observable environment //if (valOne === 0) valOne = .01; //if (percentChangeBallotCast === 0) percentChangeBallotCast = .01; const percentChange = valTwo; // HARD-CODED FOR TESTING var data = [1, percentChange]; // Get the maximum of both values. // We need this to set the scale of the chart in a way that honors both values. const max = Math.max(Math.abs(valOne), Math.abs(valTwo)); const color = '#0F7000'; const width = 88; const height = 40; const margin = { top: 5, right: 5, bottom: 5, left: 5 }; var yDomain = { min: .01, max: max }; // If we're charting negative values, we set the yDomain to negative if (percentChange < 0) { yDomain = { min: max * -1, max: -.01 }; data[0] = -1; } const x = d3 .scaleLinear() .domain([0, 1]) .rangeRound([margin.left, width - margin.right]); const y = d3 .scaleLog() .domain([yDomain.min, yDomain.max]) .range([height - margin.bottom, margin.top]); document.getElementById("gfx").innerHTML = ''; // Clear out the existing svg -- only for the purposes of this Observable notebook, can remove in prod const svg = d3.select("svg#gfx").attr('viewBox', [0, 0, width, height]); const line = d3 .line() .x((d, i) => { console.log("X" + i, d, x(d), x(i)); const r = x(i); console.log("RETURNING X" + i, r); return r; }) .y((d, i) => { console.log("Y" + i, d, y(d), y(i)); const r = y(d); console.log("RETURNING Y" + i, r); return y(d); }); svg .append('path') .datum(data) .attr('fill', 'none') .attr('stroke', color) .attr('stroke-width', 2) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr('d', line); const circleStart = svg .append('circle') .attr('cx', x(0)) .attr('cy', y(data[0])) .attr('r', 4) .attr('fill', color); const circleEnd = svg .append('circle') .attr('cx', x(1)) .attr('cy', y(data[1])) .attr('r', 4) .attr('fill', color); // The lines below are observable-specific. return svg.node(); }49:[] 46:{"id":"23066a425f1e016c","slug":"a-two-point-log-scale-line-chart","title":"A two-point log-scale line chart","thumbnail":"2b49c867bdff452662110c163cfa1407b591788f457b71fc8463b80711d70c91","access_level":"public","create_time":"$D2020-09-18T21:03:18.792Z","update_time":"$D2020-09-23T00:53:53.016Z","view_time":null,"first_public_time":"$D2020-09-19T19:31:28.932Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a6af4dee8234e6ec","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":"starter_2024","bio":"Data editor @ NBC News.","following":false},"version":569,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c2537b21a76a81f1","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":null,"bio":"Data editor @ NBC News.","following":false}],"members":[{"type":"individual","id":"c2537b21a76a81f1","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A two-point log-scale line chart","cells":[{"id":0,"value":"html`

A two-point log-scale line chart

This works with d3 versions 5 and 6. There are two variables to set because in the environment this was created for there were two charts to create.

Line chart, no axis

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`Adjust the value of the valOne var (this affects the scale): ${viewof valOne.bind(\n html``\n)}.\n\nAdjust the value of the percentChangeBallotCast var (this is the one that is charted): ${viewof valTwo.bind(\n html``\n)}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"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":456,"value":"viewof valOne = new View(45)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"viewof valTwo = new View(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 47:"$46:body"