2c:null 2d:["$","title",null,{"children":"Alternative Scales | Essex | Observable"}] 32:T5e9,{ const height = 400 const svg = d3.select(DOM.svg(width + 40, height + 30)) const data = bugCount const xMin = d3.min(data, d=> d.day) const xMax = d3.max(data, d=> d.day) const x = d3.scaleLinear().domain([xMin, xMax]).range([20, width ]).nice() const xaxis = d3.axisBottom(x) const yMin = d3.min(data, d=> d.bugCount) const yMax = d3.max(data, d=> d.bugCount) const y = d3.scalePow().domain([0, yMax]).range([height- 20 , 0]).exponent(exponentSlider) const yLinear = d3.scaleLinear().domain([0, yMax]).range([height- 20 , 0]) const yaxis = d3.axisLeft(y) .tickSize(-width) const line = d3.line() .defined(d => !isNaN(d.bugCount)) .x(d => x(d.day)) .y(d => y(d.bugCount)) .curve(d3.curveNatural) svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", " #ed1d48") .attr("stroke-width", 1.5) .attr("d", line) const linearLine = d3.line() .defined(d => !isNaN(d.bugCount)) .x(d => x(d.day)) .y(d => yLinear(d.bugCount)) .curve(d3.curveNatural) svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", " #8cc63f") .attr("stroke-width", 1.5) .attr("d", linearLine) svg.append("g") .attr("class", "xaxis") .attr("transform", `translate(0, ${height - 10})`) .call(xaxis) svg.append("g") .attr("transform", `translate(20, 10)`) .call(yaxis) return svg.node() }33:[] 30:{"id":"ab8097ec7a90c71b","slug":"alternative-scales","title":"Alternative Scales","thumbnail":"f2b8d629af35a602a1eade75b2a518b0409ddb208b85ec64cfcd4ccd61c93fc3","access_level":"public","create_time":"$D2019-07-24T20:28:40.252Z","update_time":"$D2019-07-24T20:39:12.811Z","view_time":null,"first_public_time":"$D2019-08-01T16:25:39.337Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5fb45d1c729a889c","login":"project-essex","name":"Essex","avatar_url":"https://avatars-next.observableusercontent.com/817f49c8ef03d54fc6c3a359b06abc206442d5d25380d08f3517e05ae4a376bb","tier":"starter_2024"},"version":75,"publish_version":75,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"team","id":"5fb45d1c729a889c","login":"project-essex","name":"Essex","avatar_url":"https://avatars-next.observableusercontent.com/817f49c8ef03d54fc6c3a359b06abc206442d5d25380d08f3517e05ae4a376bb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Alternative Scales","cells":[{"id":0,"value":"md`# Alternative Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`Why are choosing scales important? It alters the way your visualization is perceived.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`**Example: When to use nonlinear Scale**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`Looking at our data most tweet values are pretty close grouped except one outlier #16. It has 295 tweets!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"tweeted311","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`Lets look how we can change our interpretation of this data by using exponential scale. We are going to use a log scale to transform the data. Then that data is going to be used in our color scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## **# of Tweets in Boston Area**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof tweetScale = radio({\n title: 'Scale Type',\n options: [\n { label: 'log', value: true },\n { label: 'linear', value: false }\n ],\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof tweetFilter = number({placeholder: 300, value:300, title: \"filter data\", step : 30, min: 30, max: 300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"tweeted311Chart(tweetScale === \"true\" ? true : false, tweetFilter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`**Example: When not to use a nonlinear scale**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`For this we are going to use the **Pow Scale**. Using Log Scale will emphasis lower end of domain. *Be care when using Log Scale because 0 values are not allowed.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`Changes in upper range very clear when exponent increased`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`Changes in lower range emphasised as exponent < 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"{\n return html`

${swatches([\"#8cc63f\"])}

Linear Scale

${swatches([\"#ed1d48\"])}

Pow Scale

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"bugCount = [ \n {day: 1, bugCount: 0}, \n {day: 2, bugCount: 3}, \n {day: 3, bugCount: 5}, \n {day: 4, bugCount: 8},\n {day: 5, bugCount: 10},\n {day: 6, bugCount: 8},\n {day: 7, bugCount: 9}, \n {day: 8, bugCount: 13}, \n {day: 9, bugCount: 11}, \n {day: 10, bugCount: 10},\n {day: 11, bugCount: 14},\n {day: 12, bugCount: 12}\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof exponentSlider = slider({\n min: 0,\n max: 5,\n step: .2,\n value: 1.2,\n title: 'exponent',\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import { tweeted311Chart, tweeted311 } from '@ahoak/pset-7'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import { radio, number, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"function swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"