30:T112a,chart = { const width = 960; const height = 650; var projection = d3.geoMercator() .center([-98.583333, 39.833333]) .scale(850) .translate([width / 2, height / 2]); const path = d3.geoPath(); const svg = d3.select(DOM.svg(width, height)); const features = us.states.features; // Need Observable-Friendly SVG IDs const blur = DOM.uid(); features.forEach(d => (d.id = DOM.uid())); const defs = svg.append("defs"); defs .append("filter") .attr("id", blur.id) .append("feGaussianBlur") .attr("color-interpolation-filters", "sRGB") // Better Results in Safari .attr("stdDeviation", 5); defs .selectAll("clipPath") .data(us.states.features) .enter() .append("clipPath") .attr("id", d => d.id.id) .append("path") .attr("d", path); const states = svg .selectAll("g") .data(us.states.features) .enter() .append("g"); states .append("path") .attr("d", path) .style("fill", d => d.properties.color) .style("fill-opacity", 0.35) .style("stroke", "none"); states .append("path") .attr("d", path) .attr("clip-path", d => d.id.toString()) .attr("filter", blur.toString()) .style("stroke", d => d.properties.color) .style("opacity", 0.8) .style("stroke-width", 10) .style("fill", "none"); svg .append("path") .datum(us.mesh) .attr("d", path) .style("fill", "none") .style("stroke", "#444") .style("stroke-width", 1); // const svg = d3.select(DOM.svg(width, height)) // .style("width", "100%") // .style("height", "auto"); // // svg.append("g") // // .attr("transform", "translate(600,40)") // svg.append("g") // .selectAll("path") // .data(topojson.feature(us, us.objects.counties).features) // .enter().append("path") // .attr("fill", d => color("black")) // .attr("d", path) // .append("title") // svg.append("path") // .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", "white") // .attr("stroke-linejoin", "round") // .attr("d", path); var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") var elo_tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .text("a simple tooltip") var teamCircles = svg.selectAll("circle") .data(nba2015_data) .enter() .append("svg:circle") .attr('r', d => d.radius) .attr('cx', d => projection([d.long, d.lat])[0]) .attr('cy', d => projection([d.long, d.lat])[1]) .style('fill', d => d.color) .on("mouseover", function(d) { d3.select(this).attr("r", 50).style("fill", "yellow"); tooltip.style("visibility", "visible").text(d.fran_id); elo_tooltip.style("visibility", "visible").text(d.avg_elo); }) .on("mousemove", function(d){ elo_tooltip.style("top", (d3.event.pageY+10) + "px") .style("left", (d3.event.pageX+10) + "px"); tooltip.style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+10)+"px"); }) .on("mouseout", function(d) { d3.select(this).attr("r", d => d.radius).style('fill', d => d.color); tooltip.style("visibility", "hidden"); elo_tooltip.style("visibility", "hidden"); }) svg.append("text") .attr("x", 0.5 * width) .attr("y", height - 20) .attr("text-anchor", "middle") .style("font-size", "18px") .text("ELO Ratings of NBA Teams Over Time"); // svg.select("slider") // .append("slider") // .attr("x", 0.5 * width) // .attr("y", 30); // return projection([-71.05, 42.36]) return svg.node(); };31:Ta3e,// http://content.sportslogos.net/logos/6/213/full/slhg02hbef3j1ov4lsnwyol5o.png icon = { const width1 = 960; const height1 = 600; const svg = d3.select(DOM.svg(width1, height1)); var defs = svg.append('svg:defs'); var IMG_SIZE = 100; // Pull from lat-long data that we have var data = [{ x: 100, y: 100, url: "http://content.sportslogos.net/logos/6/213/full/slhg02hbef3j1ov4lsnwyol5o.png", }, { x: 250, y: 100, url: "http://content.sportslogos.net/logos/6/220/full/9168_atlanta_hawks-primary-2016.png" }, { x: 400, y: 100, url: "http://content.sportslogos.net/logos/6/3786/full/137_brooklyn-nets-primary-2013.png" }] data.forEach(function(d, i) { defs.append("svg:pattern") .attr("id", "url_img" + i) .attr("width", 1) .attr("height", 1) // .attr("patternUnits", "userSpaceOnUse") .attr("viewBox", "0 0 100 100") // .attr("preserveAspectRatio", "none") .append("svg:image") .attr("xlink:href", d.url) .attr("width", IMG_SIZE) .attr("height", IMG_SIZE) .attr("x", 0) .attr("y", 0); var circle = svg.append("circle") .attr("transform", "translate(" + d.x + "," + d.y + ")") .attr("cx", IMG_SIZE / 2) .attr("cy", IMG_SIZE / 2) .attr("r", IMG_SIZE / 2) .style("fill", "#fff") .style("fill", "url(#url_img" + i + ")") .style("stroke", "black") .on("mouseover", function(d) { d3.select(this).attr("r", 25); // tooltip.style("visibility", "visible").text(d.fran_id); // elo_tooltip.style("visibility", "visible").text(d.avg_elo); }) .on("mouseout", function(d) { d3.select(this).attr("r", IMG_SIZE/2); // tooltip.style("visibility", "visible").text(d.fran_id); // elo_tooltip.style("visibility", "visible").text(d.avg_elo); }) }) // var svg = d3.select("body").append("svg").attr("height", "450px").attr("width", "450px"); // var c = svg//.select("body") // // .append("svg:image") // // .attr('x', 100) // // .attr('y', 100) // // .attr('width', 100) // // .attr('height', 100) // // .attr("xlink:href", "http://content.sportslogos.net/logos/6/213/full/slhg02hbef3j1ov4lsnwyol5o.png"); // .append("svg:circle") // .attr("cx", 225) // .attr("cy", 225) // .attr("r", 20) // .style("fill", "url(http://content.sportslogos.net/logos/6/213/full/slhg02hbef3j1ov4lsnwyol5o.png)"); return svg.node(); }32:[] 2e:{"title":"Nba-Elo","cells":[{"id":0,"value":"md `# Nba-Elo\nDataset by FiveThirtyEight\nhttps://github.com/fivethirtyeight/data/tree/master/nba-elo\n
\n
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md `### Require D3 Library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"// Reference: https://beta.observablehq.com/@bryangingechen/hello-nouislider\n\nnoUiSlider = {\n if (!document.getElementById('nouislider-css')) {\n const href = await require.resolve(\"nouislider@12.1.0/distribute/nouislider.min.css\");\n document.head.appendChild(html``);\n }\n return await require('nouislider@12.1.0/distribute/nouislider.min.js');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md `### Load Hosted CSV File`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"dataset = d3.csv(\"https://raw.githubusercontent.com/sharry29/DataViz/master/misc/avg_elos_with_pos_color.csv\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md `### Filter Dataset to Include only Data from 2000 to 2015`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"filtered_dataset = dataset.filter(game => parseInt(game.year_id, 10) >= 2000);","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md `### Collect Years and Teams`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"function create_years() {\n let a = new Array(16);\n let x = 2000;\n for (let i = 0; i < a.length; i++) {\n a[i] = \"\" + x;\n x++;\n }\n return a;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"years = create_years();","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"teams = filtered_dataset\n .map(game => game.team_id)\n .filter((team, index, self) => (self.indexOf(team) === index));","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md `### Number of Playoff Games Played by each Team (2000 - 2015)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"topojson = require(\"topojson-client@3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"us = {\n const us = await d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\");\n const states = topojson.feature(us, us.objects.states);\n const mesh = topojson.mesh(us, us.objects.states);\n const neighbors = topojson.neighbors(us.objects.states.geometries);\n states.features.forEach((d, i) => d.properties.color = \"#d2b48c\");\n return {states, mesh};\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"format = d3.format(\"\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"color = d3.scaleQuantize()\n .domain([1, 10])\n .range(d3.schemePuOr[6]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"viewof slider = {\n const slider = html`

`;\n noUiSlider.create(slider, {\n start: 2015,\n step: 1,\n behaviour: 'drag',\n connect: [true, false],\n tooltips: true,\n range: {\n 'min': 1980,\n 'max': 2015\n },\n animate: true,\n format: {\n to: function (value) {\n return Math.round(value)\n },\n from: Number\n }\n });\n \n // This fires immediately when bound, so we don't need to assign slider.value separately on initialization.\n slider.noUiSlider.on('update', (e) => {\n slider.value = slider.noUiSlider.get();\n slider.dispatchEvent(new CustomEvent('input'));\n })\n \n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"nba_data = d3.csv('https://raw.githubusercontent.com/sharry29/DataViz/master/misc/avg_elos_with_pos_color.csv',\n function(data) { \n return {\n year_id: parseInt(data.year_id),\n team_id: data.team_id,\n fran_id: data.fran_id,\n avg_elo: parseInt(data.elo_n),\n lat: parseFloat(data.lat),\n long: parseFloat(data.lon),\n color: data.color\n }\n }\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"// Temporarily take only year 2015\nnba2015_data = \n{\n let data = nba_data.filter(x => x.year_id === 2015);\n \n // Grab only the elos so we can scale the radius of each circle accordingly\n let elo_list = data.map(x => x.avg_elo);\n let radScale = d3.scaleLinear()\n .domain([d3.min(elo_list), d3.max(elo_list)])\n .range([5, 40]);\n \n data = data.map(function(x) {\n x.radius = radScale(x.avg_elo);\n return x;\n });\n \n // REMOVE: Workaround for not having location data (dummy location data)\n // data = data.map(function(x) {\n // x.long = Math.floor(960 * Math.random());\n // x.lat = Math.floor(600 * Math.random());\n // x.color = 'blue';\n // return x;\n // });\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"html`

I am a highlighted paragraph.

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}