Part 2: Exploratory Data Analysis / Spring 2020 Info Vis

Spring 2020 Info Vis

UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.

Workspace

Published

Edited

May 26, 2020

md`### Graphical Representations of Relationship Between Variables`

md`#### Graph 1: Rating / Vote Count`

x = d3

.scaleLinear()

.domain(d3.extent(disney, d => +d.imdb_rating))

.range([margin.left, width - margin.right])

y = d3

.scaleLinear()

.domain(d3.extent(disney, d => +d.imdb_votes))

.range([height - margin.bottom, margin.top])

chart3 = {

const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);

const margin = { top: 50, right: 50, bottom: 50, left: 60 };

const xAxis = g =>

.call(d3.axisBottom(x).ticks(50))

.attr('transform', `translate(0, ${height - margin.bottom - 7})`);

svg.append('g').call(xAxis);

const yAxis = g =>

g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

svg.append('g').call(yAxis);

svg

.append('g')

.attr('transform', `translate(0, ${height - margin.bottom})`)

.call(xAxis);

svg

.append('g')

.attr('transform', `translate(${margin.left}, 0)`)

.call(yAxis);

svg

.append("g")

.attr("stroke", "#000")

.attr("stroke-opacity", 0.2)

.selectAll("circle")

.data(disney)

.enter()

.append("circle")

.attr("cx", d => x(d.imdb_rating))

.attr("cy", d => y(d.imdb_votes))

.attr('fill', "purple")

.attr("r", 1.5);

svg

.append("g")

.attr("stroke", "#000")

.attr("stroke-opacity", 0.2)

.selectAll("circle")

.data(netflix)

.enter()

.append("circle")

.attr("cx", d => x(d.us_voters_rating))

.attr("cy", d => y(d.us_voters_votes))

.attr('fill', "pink")

.attr("r", 1.5);

svg

.append("text")

.attr("class", "text")

.attr("transform", `translate(500, ${height - margin.bottom + 45})`)

.style("text-anchor", "middle")

.style("font-size", "14px")

.text("Rating");

svg

.append("text")

.attr("class", "text")

.attr("transform", `translate(10, ${height / 2})rotate(-90)`)

.style("text-anchor", "middle")

.style("font-size", "14px")

.text("Vote");

svg

.append("text")

.attr("class", "text")

.attr("transform", "translate(500,50)")

.style("text-anchor", "middle")

.style("font-size", "25px")

.style("font-weight", "bold")

.text("Rating VS Vote: Disney+ & Netflix");

svg

.append("circle")

.attr("transform", "translate(600,-25)")

.attr("cx", 200)

.attr("cy", 130)

.attr("r", 6)

.style("fill", "pink");

svg

.append("circle")

.attr("transform", "translate(600,-30)")

.attr("cx", 200)

.attr("cy", 160)

.attr("r", 6)

.style("fill", "purple");

svg

.append("text")

.attr("transform", "translate(600,-25)")

.attr("x", 220)

.attr("y", 130)

.text("Netflix")

.style("font-size", "15px")

.attr("alignment-baseline", "middle");

svg

.append("text")

.attr("transform", "translate(600,-30)")

.attr("x", 220)

.attr("y", 160)

.text("Disney")

.style("font-size", "15px")

.attr("alignment-baseline", "middle");

return svg.node();

}

md`#### Graph 2:`

chart4 = {

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 50]);

const x2 = d3

.scaleBand()

.domain(genre_count.map(d => d.genre))

.range([margin.left, width - margin.right]);

const xAxis2 = g =>

.call(d3.axisBottom(x2))

.attr('transform', `translate(0, ${height - margin.bottom + 10})`);

const y2 = d3

.scaleLinear()

.domain([d3.max(genre_count, d => d.rating), 0])

.range([margin.bottom, height - margin.top]);

const yAxis2 = g =>

g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y2));

x2.padding(0.2);

svg

.append('g')

.call(xAxis2)

.selectAll("text")

.style("text-anchor", "end")

.attr("dx", "-.8em")

.attr("dy", ".15em")

.attr("transform", "rotate(-65)");

svg.append('g').call(yAxis2);

svg

.selectAll('.bar')

.data(genre_count)

.join(enter => enter.append("rect"))

.attr('x', d => x2(d.genre))

.attr('y', d => y2(d.rating))

.attr('width', x2.bandwidth())

.attr('height', d => y2(0) - y2(d.rating))

.attr('fill', "pink")

.attr('opacity', 0.7);

svg

.append("text")

.attr("class", "text")

.attr("transform", `translate(460, ${height - margin.bottom + 80})`)

.style("text-anchor", "middle")

.style("font-size", "14px")

.text("Genre");

svg

.append("text")

.attr("class", "text")

.attr("transform", `translate(10, ${height / 2})rotate(-90)`)

.style("text-anchor", "middle")

.style("font-size", "14px")

.text("Average Rating");

svg

.append("text")

.attr("class", "text")

.attr("transform", "translate(450,30)")

.style("text-anchor", "middle")

.style("font-size", "25px")

.style("font-weight", "bold")

.text("Rating VS Genre of Disney Movies");

return svg.node();

}

boxPlot1 = {

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 50]);

const x2 = d3

.scaleBand()

.domain(genre_count_new.map(d => d.genre))

.range([margin.left, width - margin.right]);

const xAxis2 = g =>

.call(d3.axisBottom(x2))

.attr('transform', `translate(0, ${height - margin.bottom + 10})`);

const y2 = d3

.scaleLinear()

.domain([9, 0])

.range([margin.bottom, height - margin.top]);

const yAxis2 = g =>

g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y2));

x2.padding(0.2);

svg

.append('g')

.call(xAxis2)

.selectAll("text")

.style("text-anchor", "end")

.attr("dx", "-.8em")

.attr("dy", ".15em")

.attr("transform", "rotate(-65)");

svg.append('g').call(yAxis2);

svg

.selectAll("line.vert")

.data(genre_count_new)

.join("line")

.attr("class", "vert")

.attr("x1", d => x2(d.genre) + x2.bandwidth() / 2)

.attr("x2", d => x2(d.genre) + x2.bandwidth() / 2)

.attr("y1", d => y2(d.ratings_q.max))

.attr("y2", d => y2(d.ratings_q.min))

.attr("stroke", "black");

svg

.selectAll("rect")

.data(genre_count_new)

.join("rect")

.attr("x", d => x2(d.genre))

.attr("y", d => y2(d.ratings_q.q3))

.attr("height", d => y2(d.ratings_q.q1) - y2(d.ratings_q.q3))

.attr("width", x2.bandwidth())

.attr("stroke", "black")

.style("fill", "pink")

.attr("opacity", 0.7);

svg

.selectAll("line.median")

.data(genre_count_new)

.join("line")

.attr("class", "median")

.attr("x1", d => x2(d.genre))

.attr("x2", d => x2(d.genre) + x2.bandwidth())

.attr("y1", d => y2(d.ratings_q.median))

.attr("y2", d => y2(d.ratings_q.median))

.attr("stroke", "black");

svg

.append("text")

.attr("class", "text")

.attr("transform", `translate(460, ${height - margin.bottom + 80})`)

.style("text-anchor", "middle")

.style("font-size", "14px")

.text("Genre");

svg

.append("text")

.attr("class", "text")

.attr("transform", `translate(10, ${height / 2})rotate(-90)`)

.style("text-anchor", "middle")

.style("font-size", "14px")

.text("Rating min, max, q1, q3, and median");

svg

.append("text")

.attr("class", "text")

.attr("transform", "translate(450,30)")

.style("text-anchor", "middle")

.style("font-size", "25px")

.style("font-weight", "bold")

.text("Rating VS Genre of Disney Movies");

return svg.node();

}

import { select } from "@jashkenas/inputs"

height = 500

margin = ({ top: 50, right: 10, bottom: 60, left: 60 })

d3 = require("d3")

Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")

chroma = require('d3-scale-chromatic')

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