2f:T111f,{ const container = d3 .create("div") .attr("width", width) .attr("height", height) .attr("class", "container"); const imgContainer = container .append("div") .attr("width", width) .attr("height", height) .attr("class", "imgContainer"); const svg = container .append("svg") .attr("width", width) .attr("height", height); const links = Array.from(links_array); // links_array.map((d) => Object.create(d)); const nodes = [...nodes_array]; //nodes_array.map((d) => Object.create(d)); const toolTip = d3.select("body").append("div").attr("class", "toolTip"); // svg.append("svg:image") // .attr("xlink:href", "https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg") // .attr("width", width) // .attr("height", height) // .attr('object-fit', 'cover') // .attr("x", 0) // .attr("y",0); const yScale = d3 .scaleLinear() .domain([1980, 2022]) .range([30, height - 30]); // center — pulls all nodes to the center // charge — nodes repel from each other which prevents overlap // link — specifies that id is the link variable const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id((d) => d.id) .strength(1.5) .distance(22) ) // .force("link", d3.forceLink(links).id(d => d.id).strength(1).distance(10)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody().strength(-172)) // -400 // .force("collide", d3.forceCollide(10)) .force("x", d3.forceX()) .force("y", d3.forceY()); // .force('y', d3.forceY().y(d => yScale(d.year))) // .force('collision', d3.forceCollide().radius(function(d) { // return d.radius; // })) const array = []; const link = svg .append("g") .selectAll("line") .data(links) .join("line") .style("stroke", blue) .attr("stroke-width", 1.2) // .style("stroke", "rgba(255,255,255,1)") // .attr("stroke-width", .75) .on("mousemove", function (event, d, index) { toolTip .style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block").html(`

`); // .html(`Tooltip for ${d.source.id} - ${d.target.id}`); // d3.select(this).attr("stroke-width", 3.8); // console.log(d); link.attr("stroke-width", (d2) => d2.data.name === d.data.name ? 3.8 : 1.2 ); }) .on("mouseout", function () { toolTip.style("display", "none"); link.attr("stroke-width", 1.2); // d3.select(this).attr("stroke-width", 1.1); }); // const link = svg.append("g") // .attr("fill", "none") // .selectAll("path") // .data(links) // .join("path") // .attr("stroke", '#1fd5d5') // .attr("stroke-width", 1) const node = svg .append("g") .attr("fill", "currentColor") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .call(drag(simulation)); node .append("text") .text((d) => (d.type !== "name" ? d.id : "")) // .attr('dx', 6) .attr("text-anchor", "middle") // .style('fill', d => d.type === 'director' ? '#333' : blue) //008fb2 .style("fill", (d) => (d.type === "director" ? "#efefef" : "#a9ecfd")) //008fb2 .attr("class", (d) => (d.type === "director" ? "director" : "star")) .style("opacity", (d) => d.type === "director" ? 1 : d.type === "star" ? 1 : 0 ) .clone(true) .lower() .attr("stroke", "rgba(0,0,0,0.95)") .attr("stroke-width", 2.2) .on("mousemove", function (event, d, index) { d3.select(this).style("opacity", 1); }); simulation.on("tick", () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); // link.attr("d", linkArc); node.attr("transform", (d) => `translate(${d.x},${d.y})`); }); return container.node(); }30:T4c5,html``31:[] 2d:{"title":"Directors and stars constellation","cells":[{"id":0,"value":"# Directors and stars constellation","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"- A selection of notable directors are shown with actors they cast in at least three films during 1986 - 2016\n- Inspiration from [NYT's article form 2013](https://www.nytimes.com/newsgraphics/2013/09/07/director-star-chart/index.html) and recreated it with more recent data","pinned":false,"hidden":false,"mode":"md"},{"id":381,"value":"*need to use function instead of arrow in order to use d3.select(this)","pinned":false,"hidden":false,"mode":"md"},{"id":838,"value":"blue = '#00ccfe'","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"function linkArc(d) {\n const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n return `\n M${d.source.x},${d.source.y}\n A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"drag = simulation => {\n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Node & Link","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"links_array = {\n let array = []\n selected_data.map(d => {\n const link1 = {\n source: d.director,\n target: d.name,\n data: d\n }\n array.push(link1)\n\n const link2 = {\n source: d.name,\n target: d.star,\n data: d\n }\n array.push(link2)\n })\n return array\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"nodes_array = {\n let array = []\n selected_data.map((d, i) => {\n if(i === 0) {\n array.push({id: d.director, type: 'director', year: d.year })\n array.push({id: d.star, type: 'star', year: d.year})\n array.push({id: d.name, type: 'name', year: d.year}) \n }\n else {\n array.filter(item => item.id === d.director).length > 0 ? '' : array.push({id: d.director, type: 'director', year: d.year})\n array.filter(item => item.id === d.star).length > 0 ? '' : array.push({id: d.star, type: 'star', year: d.year})\n array.filter(item => item.id === d.name).length > 0 ? '' : array.push({id: d.name, type: 'name', year: d.year})\n }\n })\n return array\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"selected_data = getRepeatedRel(cleaned_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"Original data from (https://github.com/danielgrijalva/movie-stats, https://www.kaggle.com/datasets/danielgrijalvas/movies)\n- Many Korean movie has missing budget info\n- Song Gangp-Ho in many Korean movies","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"distinct_korea_directors = [... new Set(korea_data.map(d => d.director))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"distinct_korea_actors = [... new Set(korea_data.map(d => d.star))] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"korea_actors = korea_data.map(d => d.star)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"korea_data = data.filter(d => d.country === 'South Korea')","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"data = getRepeated(cleaned_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"## Logic\nHow many times worked together","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"minNumProjects = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"getRepeatedRel = (thisData) => {\n const relArray = thisData.map((d) =>\n d.director !== d.star ? `${d.director}-${d.star}` : \"\"\n );\n const repeatedRelArray = [];\n\n thisData.map((d) => {\n const thisRel = `${d.director}-${d.star}`;\n if (relArray.filter((rel) => rel === thisRel).length >= minNumProjects) {\n repeatedRelArray.push(d);\n }\n });\n\n return repeatedRelArray;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"getRepeated = (thisData) => {\n const allDirectors = thisData.map(d => d.director)\n const allStars = thisData.map(d => d.director)\n\n const dataArray = []\n thisData.map(d => {\n const numDirectors = allDirectors.filter(director => director === d.director).length\n const numStars = allStars.filter(star => star === d.star).length\n\n if(numDirectors > 1 || numStars > 1) {\n dataArray.push(d)\n }\n })\n \n return dataArray\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"## Filtering","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"cleaned_data = raw_data.map((d) => {\n d.year = parseInt(d.year);\n d.score = parseInt(d.score);\n return d;\n})\n// .filter(d => d.score > 6)\n// .filter(d => d.country === 'France')\n// .filter(d => d.country === 'United States')\n// .filter((d) => d.country === \"South Korea\" || d.country === \"United States\")\n// .filter((d) => d.year > 1990 && d.year < 2020)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"raw_data = await d3.csv(\"https://raw.githubusercontent.com/danielgrijalva/movie-stats/master/movies.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}