The avatar for @info474
Spring 2020 Info Vis
UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Jun 15, 2020
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md` ## Length`
Insert cell
Insert cell
Insert cell
md` ## Position`
Insert cell
Insert cell
Insert cell
md` ## Angle`
Insert cell
md`For angle I chose to the same set of data. However, this might not be the best way to plot this because it is difficult to see at a first glance which months has the most and the leaset rainy days in San Jose. Although the labels assist in showing the actual size of each pie segment, but they are too close to each other causes audience hard to see the names of the labels. .`
Insert cell
Insert cell
Insert cell
md` ## Color`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md` ## Limitations`
Insert cell
md`The limitations of a curve difference chart is that it can be difficult to perceive the actual difference between the lines because it requires too much cognitive load for people to process the differences in their mind. Therefore, to graph something that is more accurate, one would graph the differences of the points.`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`## Scale - Curve Difference`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`## Axis - Curve Difference`
Insert cell
Insert cell
Insert cell
yAxis2 = g =>
g
.call(d3.axisLeft(yScale))
.attr("transform", `translate(${measurements.marginLeft},0)`)
Insert cell
Insert cell
Insert cell
import { displayCaution } from "@info474/utilities"
Insert cell
import { legend, swatches } from "@d3/color-legend"
Insert cell
d3 = require('d3@5')
Insert cell
md`## Curve Difference - Data Source`
Insert cell
data2 = d3.csvParse(await FileAttachment("apple.csv").text())
Insert cell
parseTime = d3.timeParse("%Y-%m-%d")
Insert cell
formatTime = d3.timeFormat("%B %d")
Insert cell
Insert cell
Insert cell
Insert cell
md`## Bar Chart - Dimension`
Insert cell
margin = ({ top: 40, right: 80, bottom: 60, left: 80 })
Insert cell
width = 960 - margin.left - margin.right
Insert cell
height = 500 - margin.top - margin.bottom
Insert cell
Insert cell
md`Data: [BestPlaces](https://www.bestplaces.net/climate/city/california/san_jose)`
Insert cell
data = d3.csvParse(
await FileAttachment('san_jose_rain_days.csv').text(),
d3.autoType
)
Insert cell
md`### San Jose bar chart Dimensions`
Insert cell
xScale = d3
.scaleBand()
.padding(0.2)
.domain(data.map(d => d.month))
.range([0, width])
Insert cell
yScale = d3
.scaleLinear()
.domain([0, d3.max(data, d => d.days)])
.nice()
.range([height, 0])
Insert cell
xAxis = label => g =>
g
.attr('transform', `translate(${margin.left},${margin.top + height})`)
.call(d3.axisBottom(xScale))
// Add label
.append('text')
.style('text-anchor', 'middle')
.style('fill', '#000')
.style('font-size', '14px')
.text(label)
.attr('x', width / 2)
.attr('y', 50) // Relative to the x axis.
Insert cell
yAxis = label => g =>
g
.attr('transform', `translate(${margin.left},${margin.top})`)
.call(d3.axisLeft(yScale))
// Add label
.append('text')
.style('text-anchor', 'middle')
.style('fill', '#000')
.style('font-size', '14px')
.text(label)
.attr('transform', 'rotate(-90)')
.attr('x', -height / 2)
.attr('y', -40) // Relative to the y axis.
Insert cell
yGrid = g =>
g
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.attr('class', 'grid-lines')
.selectAll('line')
.data(yScale.ticks())
.join('line')
.attr('x1', 0)
.attr('x2', width)
.attr('y1', d => yScale(d))
.attr('y2', d => yScale(d))
Insert cell
title = label => g =>
g
.append('text')
.style('text-anchor', 'middle')
.style('font-size', '16px')
.text(label)
.attr('x', margin.left + width / 2)
.attr('y', 20)
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more