Public
Edited
May 4, 2023
Ideas
- Add flags for artist points
- Add Olympic Flag as Background
Points I Think Make Sense
- (0.5) for Data Mage, I think 0.5 for implementing the large dataset and working with it, another 0.5 for transforming the data into tidy data which took time to code and learn.
- (0.5) for troll, fixed this poorly displayed visual that makes China look like it is doing much worse than America. I found this on r/dataisugly, a really funny reddit page, I then found tokyo medal data from kaggle.
- (0.5) for hacker: d3 data binding
MedalStackedBarChart = StackedBarChart(tidyData, {
x: d => d.country,
y: d => d.count,
z: d => d.medal,
xDomain: d3.groupSort(tidyData, D => d3.sum(D, d => -d.count), d => d.country),
yLabel: "Medals",
xLabel: "Country",
zDomain: categories,
colors: categories.map(colorScale),
marginBottom: 120,
rotateXlabels: -65,
width,
height: 500
})
// First we select stacked bar chart with d3.select
d3.select(MedalStackedBarChart)
// selects an image which should be empty right now because there are no images in the stacked bar chart
.selectAll("image")
// Bind an array containing a single element valued at 0 to the the medalstackedbarchart data."
.data([0])
// Create a new selection of elements that need to be added to the DOM to match the data containing placeholders for missing DOM elements corresponding to the data.
.enter()
// This code inserts a new dom element "image in this case" before the first element into the array so that it ends up behind the bars. I am assuming that g is the bars or else this would not make sense.
.insert("image", "g")
// Width, height, and transform which moves it to the right are added to make the image work in the code.
.attr("width", 750)
.attr("height", 500)
.attr("transform", "translate(200, 0)")
// Finally we specifcy the image in the dom elements as the olympic logo we set earlier
.attr("href", imageURL)
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.
