UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Jun 10, 2020
Importers
pick_artist = {
var select_artist = filtered_down_artist.filter(
d => d.artist === artist_select_1
);
return select_artist;
}
xScale = d3
.scaleLinear()
.domain(rank_extent)
.range([margin.left, width - margin.right])
yScale = d3
.scaleBand()
.domain(country_list)
.range([margin.top, 10 * pick_artist.length + margin.bottom])
.padding(0.1)
xAxis = d3.axisBottom().scale(xScale)
yAxis = d3.axisLeft().scale(yScale)
margin = ({ top: 50, right: 30, bottom: 20, left: 0 })
height = 600
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
viewof artist_select_1 = select({
placeholder: "Type an artist name...",
description: "Select an artist (You can type to search the dropdown)",
autocomplete: "on",
options: geo_artists.map(d => d.artist)
})
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-50, 0, width, 11 * pick_artist.length + margin.bottom]);
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(pick_artist)
.join(enter => enter.append('rect'))
.attr("x", d => xScale(rank_extent))
.attr("y", d => yScale(d.country))
.attr("width", d => xScale(d.rank) - xScale(0))
.attr("height", yScale.bandwidth());
svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
svg.append("g").call(yAxis);
svg
.append("text")
.attr("class", "text")
.attr("transform", `translate(${width / 2},${height - margin.bottom + 40})`)
.style("text-anchor", "middle")
.style("font-size", "18px")
.text("Ranking");
svg
.append("text")
.attr("class", "text")
.attr(
"transform",
`rotate(-90), translate(${-width / 2},${margin.left - 100})`
)
.style("text-anchor", "middle")
.style("font-size", "18px")
.text("Countries");
svg
.append("text")
.attr("class", "text")
.attr("transform", `translate(${width / 2}, ${margin.top - 30})`)
.style("text-anchor", "middle")
.style("font-size", "30px")
.style("font-weight", "bold")
.text("Artists appears on Countries");
// Add a tooltip
const tip = svg.append("g").style("pointer-events", "none");
const tipRect = tip.append("rect");
const tipText = tip.append("text").style("text-anchor", "middle");
return svg.node();
}
// xScale = d3
// .scaleLinear()
// .domain([
// d3.min(pick_artist.map(d => d.rank)),
// d3.max(pick_artist.map(d => d.rank))
// ])
// .range([margin.left, width - margin.right])
// xScale(d3.min(pick_artist.map(d => d.rank)))
// yScale = d3.scaleBand()
// .domain(pick_artist.map(d => d.country))
// .range([height - margin.bottom, margin.top])
// .paddingInner(5)
// yScale(`Albania`)
// format = xScale.tickFormat(10)
// xAxis = g =>
// g
// .attr("transform", `translate(0,${height - margin.bottom})`)
// .call(d3.axisBottom(xScale).ticks(50))
// yAxis = g =>
// g
// .attr("transform", `translate(${margin.left},0)`)
// .call(d3.axisLeft(yScale).tickSizeOuter(0))
// height = 5000
// margin = ({ top: 100, right: 100, bottom: 60, left: 120 })
md`## Data manupulation`
d3 = require("d3")
_ = require("lodash")
geo_artists
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.
