-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
1,323 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,11 @@ | ||
| # Madeleine-Radars | ||
|
|
||
| Using [radar-chart-d3](https://github.com/alangrafu/radar-chart-d3) to look at the proportions of Flour, Butter, Sugar, and Egg across 147 recipes of Madeleines (the traditional French sweet sponge cake) scraped from [Marmiton.org](http://marmiton.org). | ||
| Using [radar-chart-d3](https://github.com/alangrafu/radar-chart-d3) to compare the proportions of Flour, Butter, Sugar, and Egg in 147 different recipes of Madeleines (the traditional French sweet sponge cake). | ||
|
|
||
|  | ||
|
|
||
| The data was scraped from [Marmiton.org](http://marmiton.org). | ||
|
|
||
| Open source at [GitHub](https://github.com/evoluteur/madeleine-radars) with MIT license. | ||
|
|
||
| Copyright (c) 2024 [Olivier Giulieri](https://evoluteur.github.io/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,116 @@ | ||
| <html lang="en"> | ||
| <head> | ||
| <script | ||
| async | ||
| src="https://www.googletagmanager.com/gtag/js?id=G-063933E3C2" | ||
| ></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag() { | ||
| dataLayer.push(arguments); | ||
| } | ||
| gtag("js", new Date()); | ||
| gtag("config", "G-063933E3C2"); | ||
| </script> | ||
| <title>Madeleine-Radars</title> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="theme-color" content="#bbdefb" /> | ||
| <link rel="icon" type="image/png" href="favicon.png" /> | ||
| <link href="css/madeleinology.css" rel="stylesheet" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css" | ||
| /> | ||
| <script src="https://d3js.org/d3.v3.js"></script> | ||
| <script src="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js"></script> | ||
| <script src="js/data.js" type="text/javascript"></script> | ||
| <meta | ||
| name="keywords" | ||
| content="d3, d3js, recipe, data science, radar, spider, chart, graph, madeleine, cake" | ||
| /> | ||
| <meta | ||
| name="description" | ||
| content="Proportion of flour, sugar, butter, and eggs in 147 recipes of Madeleine | ||
| cakes" | ||
| /> | ||
| <meta | ||
| property="og:image" | ||
| content="https://raw.githubusercontent.com/evoluteur/madeleine-radars/master/screenshot.png" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <section> | ||
| <h1> | ||
| Proportion of flour, sugar, butter, and eggs in 147 recipes of Madeleine | ||
| cakes | ||
| </h1> | ||
| <div id="radar_charts"></div> | ||
| </section> | ||
|
|
||
| <meta charset="utf-8"> | ||
| <link rel="icon" type="image/png" href="favicon.png" /> | ||
| <link href="css/madeleinology.css" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css"> | ||
| <script> | ||
| RadarChart.defaultConfig.color = function () {}; | ||
| RadarChart.defaultConfig.radius = 3; | ||
| RadarChart.defaultConfig.w = 400; | ||
| RadarChart.defaultConfig.h = 400; | ||
|
|
||
| <script src="https://d3js.org/d3.v3.js"></script> | ||
| <script src="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js"></script> | ||
| <script src="js/data-recipes.js" type="text/javascript"></script> | ||
| var recipeList = recipes.map((d) => { | ||
| return [ | ||
| { | ||
| className: "argentina", | ||
| title: d.title, | ||
| url: d.url, | ||
| axes: ["farine", "sucre", "beurre", "oeuf"].map(function (axis) { | ||
| return { | ||
| axis: axis, | ||
| value: d["pc_" + axis], | ||
| }; | ||
| }), | ||
| }, | ||
| ]; | ||
| }); | ||
|
|
||
| <body> | ||
| <section> | ||
| <h1>Proportion of flour, sugar, butter, and eggs in Madeleine cakes</h1> | ||
| var chart = RadarChart.chart(); | ||
| var cfg = chart.config(); | ||
| var content = d3.select("#radar_charts").attr("class", "h-radars"); | ||
|
|
||
| <div id="radar_charts"></div> | ||
| </section> | ||
| chart.config({ | ||
| w: cfg.w / 4, | ||
| h: cfg.h / 4, | ||
| axisText: false, | ||
| levels: 0, | ||
| circles: false, | ||
| }); | ||
|
|
||
| <script> | ||
| RadarChart.defaultConfig.color = function() {}; | ||
| RadarChart.defaultConfig.radius = 3; | ||
| RadarChart.defaultConfig.w = 400; | ||
| RadarChart.defaultConfig.h = 400; | ||
|
|
||
| var recipeList = recipes.map(d => { | ||
| return [{ | ||
| className: 'argentina', | ||
| title: d.title, | ||
| url: d.url, | ||
| axes: ['farine', 'sucre', 'beurre', 'oeuf'].map(function(axis) { | ||
| return { | ||
| axis: axis, | ||
| value: d['pc_'+axis] | ||
| }; | ||
| var divs = content.selectAll("div").data(recipeList); | ||
| divs | ||
| .enter() | ||
| .append("div") | ||
| .append("svg") | ||
| .attr("height", 120) | ||
| .attr("width", 120) | ||
| .append("g") | ||
| .classed("game", 1); | ||
| divs | ||
| .append("div") | ||
| .append("a") | ||
| .attr("target", "_new") | ||
| .attr("href", function (d) { | ||
| return d[0].url; | ||
| }) | ||
| }] | ||
| }) | ||
|
|
||
| var chart = RadarChart.chart(); | ||
| var cfg = chart.config(); | ||
| var content = d3.select('#radar_charts').attr('class','h-radars') | ||
|
|
||
| chart.config({w: cfg.w / 4, h: cfg.h / 4, axisText: false, levels: 0, circles: false}); | ||
|
|
||
| var divs = content.selectAll('div').data(recipeList) | ||
| divs.enter().append('div').append('svg').attr('height',120).attr('width',120) | ||
| .append('g').classed('game', 1) | ||
| divs.append('div').append('a').attr('target', '_new').attr('href', function(d){return d[0].url}) | ||
| .html(function(d){return d[0].title}) | ||
| content.selectAll('.game').call(chart); | ||
|
|
||
| </script> | ||
|
|
||
| .html(function (d) { | ||
| return d[0].title; | ||
| }); | ||
| content.selectAll(".game").call(chart); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> | ||
| <p> | ||
| <br /><br /> | ||
| © 2024 | ||
| <a href="https://evoluteur.github.io/" target="og" rel="noopener" | ||
| >Olivier Giulieri</a | ||
| > | ||
| </p> | ||
| </body> | ||
| </html> |
Oops, something went wrong.