Skip to content

Commit

Permalink
Cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@hadro
hadro committed Nov 29, 2023
1 parent 71940ad commit a7687af
Showing 1 changed file with 9 additions and 188 deletions.
197 changes: 9 additions & 188 deletions moma/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ let svg;
let xScale;
let yScale;
let colorScale;
let lifespan;
let xAxis;
let yAxis;
let yAxis2;
let tooltip;
Expand All @@ -35,54 +33,23 @@ let xAxis2;
let xAxis3;

Promise.all([
d3.csv("met_data.csv", d => {
// use custom initializer to reformat the data the way we want it
// ref: https://github.com/d3/d3-fetch#dsv
return {
Year: +d.DateAcquired_yr,
Count: +d.Count,
Gender: d.Gender
}}),
d3.csv("unique_artists_moma_data_shaped.csv", d => {
// use custom initializer to reformat the data the way we want it
// ref: https://github.com/d3/d3-fetch#dsv
return {
Year: +d.DateAcquired_yr,
female: +d.female,
male: +d.male
}}),
d3.csv("shaped_with_classification.csv", d => {
return {
Year: +d.year,
Classification: d.classification,
female: +d.female,
male: +d.male
}})
]).then(([data, data1, data2]) => {
state.data = data;
state.data1 = data1;
]).then(([data2]) => {
state.data2 = data2;
// console.log(data2)

init();
});

function init() {


// + FILTER DATA BASED ON STATE
filteredData = state.data2
// .filter(d => state.selectedGender === "All" || d.male >=0)
// .filter(d => state.selectedYear === "All" || state.selectedYear == d.Year)
// .filter(d => d.Classification === "all")


y = d3.scaleBand()
.domain(state.data2.map(d => d.Year))
.rangeRound([height - margin.bottom, margin.top])
.padding(0.1)

// + UI ELEMENT SETUP

const selectElementClassification = d3.select("#dropdown-classification")

selectElementClassification
Expand All @@ -99,43 +66,21 @@ const selectElementClassification = d3.select("#dropdown-classification")
state.selectedClassification = event.target.value;
draw();
})

// xAxis = g => g
// .attr("transform", `translate(0,${height - margin.bottom})`)
// .attr("class", "xAxis")
// .call(g => g.append("g").call(d3.axisBottom(xM).ticks(width / 80, "s")))
// .call(g => g.append("g").call(d3.axisBottom(xF).ticks(width / 80, "s")))
// .call(g => g.selectAll(".domain").remove())
// .call(g => g.selectAll(".tick:first-of-type").remove())

// yAxis = g => g
// .attr("transform", `translate(${xM(0)+15},0)`)
// //.call(d3.axisRight(y).tickSizeOuter(0))
// .call(d3.axisRight(y).tickValues([]))
// // .call(g => g.selectAll(".tick text").attr("fill", "green"))

y = d3.scaleBand()
.domain(state.data2.map(d => d.Year))
.rangeRound([height - margin.bottom, margin.top])
.padding(0.1)

yAxis2 = g => g
.attr("transform", `translate(${ width/2 -28},0)`)
.attr("class", "yAxis")
.call(d3.axisRight(y)
// .tickSizeOuter(0)
// .tickValues([1, 2, 3, 5, 8, 13, 21])
.tickValues(d3.range(1930, 2023, 10))
)
// // .call(d3.axisRight(y).tickValues([]))
// .call(g => g.selectAll(".tick text").attr("fill", "magenta"))
// // .call(d3.axisRight(y)).selectAll(".tick line").remove()
.call(g => g.selectAll(".tick line").attr("stroke", "none").attr("fill", "none"))
.call(g => g.select(".domain").remove())
// .call(d3.axisRight(y).tickValues([1, 2, 3, 5, 8, 13, 21]))

// yAxis2 = g => g
// .call(g => g.selectAll(".tick text")
// .filter(d => d.Year % 10 === 0).attr("fill", "black"))

// state.data.forEach(d => d.Year % 10 === 0 ? console.log(d.Year) : console.log('No'))
// state.data.forEach(d => console.log(d.Year % 10 === 0))


svg = d3.select("#container")
.append("svg")
.attr("width", width - margin.left)
Expand All @@ -144,10 +89,6 @@ const selectElementClassification = d3.select("#dropdown-classification")
.attr("font-family", "sans-serif")
.attr("font-size", 12);


// svg.append("g")
// .call(xAxis);

svg.append("g")
.style("font-size", "1.5em")
.call(yAxis2);
Expand Down Expand Up @@ -191,16 +132,6 @@ option2 = `<h3>${d.Year}</h3><b><span style="color:#fc8d62;">Male</span></b>: ${
.duration(200)
.style("opacity", 0)
}

// toggle = function(d) {
// toggled = state.data2.filter( d =>
// d.Classification === "All" &
// d.female > d.male
// )
// console.log(filteredData1)
// }

// toggle()

d3.selectAll("[name=greaterToggle]").on("change", function() {
selectedToggle = this.value;
Expand Down Expand Up @@ -236,20 +167,6 @@ filteredData = state.data2
// // .filter(d => state.selectedYear === "All" || state.selectedYear == d.Year)
.filter(d => d.Classification === state.selectedClassification)

// console.log(filteredData, state.selectedClassification)


// xM
// .domain([0, d3.max(filteredData, d => Math.max(d.female,d.male))])
// .rangeRound([(width / 2)-15, margin.left]);

// xF
// .domain(xM.domain())
// .rangeRound([(width / 2)+15, width - margin.right]);

// console.log(xM.domain(), xF.domain())

// console.log(d3.max(filteredData, d => Math.max(d.female,d.male)))
xM = d3.scaleLinear()
.domain([0, d3.max(filteredData, d => Math.max(d.female,d.male))])
.rangeRound([(width / 2)-25, margin.left])
Expand All @@ -268,7 +185,6 @@ filteredData = state.data2
svg.selectAll('.x-axis-left')
.attr("transform", `translate(0,${height - margin.bottom})`)
.style("font-size", "1.6em")
// .attr("transform", `translate(${margin.left}, ${height / 2})`)
.transition()
.duration(1500)
.ease(d3.easeLinear)
Expand All @@ -281,10 +197,7 @@ filteredData = state.data2
.transition().duration(1500)
.call(xAxis3);

// console.log(svg.selectAll('g'))

// state.data1.forEach((x, i) => console.log(x, i));
filteredData.forEach((x, i) => x)
svg // male
.selectAll("rect.year-male")
.data(filteredData, d => d.male + d.Year + d.Classification + state.selectedToggle)
Expand All @@ -308,9 +221,6 @@ svg // male
),
update => update
.call(sel => sel
// .transition()
// .duration(1000)
// .delay(150)
.attr("x", d => xM(d.male))
.attr("width", d => xM(0) - xM(d.male))),
exit => exit
Expand Down Expand Up @@ -348,9 +258,6 @@ svg // female
),
update => update
.call(sel => sel
// .transition()
// .duration(1000)
// .delay(150)
.attr("x", d => xF(0))
.attr("width", d => xF(d.female) - xF(0))),
exit => exit
Expand All @@ -365,91 +272,5 @@ svg // female
.on("mouseleave", mouseleave )
.on("mouseover", mouseHover )

// svg.append("g") // male
// .attr("fill", "blue")
// .selectAll("text")
// .data(filteredData)
// .join("text")
// .attr("text-anchor", "start")
// .attr("x", d => xM(d.male) - 100)
// .attr("y", d => y(d.Year) + y.bandwidth() / 2)
// .attr("dy", "0.35em")
// .text(d => d.male.toLocaleString());
// svg.append("g") // female
// .attr("fill", "blue")
// .selectAll("text")
// .data(filteredData)
// .join("text")
// .attr("text-anchor", "end")
// .attr("x", d => xF(d.female) + 100)
// .attr("y", d => y(d.Year) + y.bandwidth() / 2)
// .attr("dy", "0.35em")
// .text(d => d.female.toLocaleString());


// svg.append("text")
// .attr("text-anchor", "end")
// .attr("fill", "white")
// .attr("dy", "0.35em")
// .attr("x", xM(0) - 4)
// .attr("y", y(filteredData[0].Count) + y.bandwidth() / 2)
// .text("Male");

// svg.append("text")
// .attr("text-anchor", "start")
// .attr("fill", "white")
// .attr("dy", "0.35em")
// .attr("x", xF(0) + 24)
// .attr("y", y(filteredData[0].Count) + y.bandwidth() / 2)
// .text("Female");


// svg.append("g")
// .call(yAxis);



// svg.select("g .xAxis")
// .transition()
// .duration(49)
// // .call(d3.axisBottom(xScale).tickFormat(d3.format(".0%")))
// .call(d3.axisBottom(xM).scale(xM))
// .call(d3.axisBottom(xF).scale(xF))

// // Update X axis
// xM.domain([0, d3.max(filteredData, d => d.male)]);
// xF.domain([0, d3.max(filteredData, d => d.male)]);
// svg.select('.xAxis')
// .transition().duration(150).ease(d3.easeLinear)
// .call(d3.axisBottom(xM))
// // .call(d3.axisBottom(xM).ticks(width / 80, "s"))
// // .call(d3.axisBottom(xF).ticks(width / 80, "s"))

// // Update chart
// svg.selectAll("circle")
// .data(data)
// .transition()
// .duration(1000)
// .attr("cx", function (d) { return x(d.Sepal_Length); } )
// .attr("cy", function (d) { return y(d.Petal_Length); } )

// Add an event listener to the button created in the html part
// d3.select("#buttonXlim").on("input", updatePlot )

//Update xAxis scale




//Call axes
// xAxis = g => g
// .attr("transform", "translate(0," + (height - margin.bottom) + ")")


// .transition().duration(1000)
// .call(xAxis);



}

0 comments on commit a7687af

Please sign in to comment.