Public
Edited
Feb 21, 2024
19 forks
1 star
makeChart1(data)
makeChart1 = (dataset) => {
const w = 600;
const h = dataset.length * 24;
// We'll return chart1Svg.node() from this function
const chart1Svg = d3.create("svg").attr("width", w).attr("height", h);
// sort the data by downloads
// uses built-in Array.sort() with comparator function
dataset.sort((a, b) => b.downloads - a.downloads);
// our range is limited from 0 to width - 100,
// which is for the 80 pixels on left for axis and
// 20 pixels on right for padding
const xScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.downloads)])
.rangeRound([0, w - 100]);
// using scale band to work with nominal values
// the Array.map() call allows us to get a new array
// by calling a function on each item of the source array
// here it pulls out the app_name
const yScale = d3
.scaleBand()
.domain(dataset.map((d) => d.app_name))
.rangeRound([20, h - 20]);
// d3 allows scaling between colors
// This is here for demonstrating that you *can* do this, though
// in this instance, it's not a particularly good use of color.
// In your assignment, I'd question using a color scale here to
// visualize a third data variable and instead replace this with
// either static values, or change the domain/range to apply to
// a data variable already in use in the chart to reinforce a
// a data variable visually.
const colorScale = d3.scaleLinear().domain([4.5, 5]).range(["#88d", "#ccf"]);
chart1Svg
.selectAll("rect")
.data(dataset)
.join("rect")
.attr("x", 80)
.attr("y", (d) => yScale(d.app_name))
.attr("width", (d) => xScale(d.downloads))
.attr("height", 20)
.attr("fill", (d) => colorScale(d.average_rating));
// AXES
chart1Svg
.append("g")
.attr("class", "axis")
.attr("transform", `translate(80, ${h - 20})`)
.call(d3.axisBottom(xScale));
chart1Svg
.append("g")
.attr("class", "axis")
.attr("transform", `translate(80,0)`)
.call(d3.axisLeft(yScale));
return chart1Svg.node();
}
makeChart2 = (dataset) => {
const w = 600;
const h = dataset.length * 24;
const chart2Svg = d3.create("svg")
.attr('width', w)
.attr('height', h);
// FILL IN HERE, and observe changes below
return chart2Svg.node();
}
makeChart2(data)
makeChart3 = (dataset) => {
const w = 600;
const h = dataset.length * 24;
const chart3Svg = d3.create("svg")
.attr('width', w)
.attr('height', h);
// FILL IN HERE, and observe changes below
return chart3Svg.node();
}
makeChart3(data)
makeChart4 = (dataset) => {
const w = 600;
const h = dataset.length * 24;
const chart4Svg = d3.create("svg")
.attr('width', w)
.attr('height', h);
// FILL IN HERE, and observe changes below
return chart4Svg.node();
}
makeChart4(data)
makeChart5 = (dataset) => {
const w = 600;
const h = dataset.length * 24;
const chart5Svg = d3.create("svg")
.attr('width', w)
.attr('height', h);
// FILL IN HERE, and observe changes below
return chart5Svg.node();
}
makeChart5(data)
theStory = md`
---
## Conclusions
A cool story might go here...
`
data = d3.csvParse(dataCsv)
d3 = require("d3@7")
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.
