Posts for Tag: interactive

Navigate the globe to the specified cities eating as many apples as you can

I coded a unique twist on the classic snake game, Snake on a Globe, where your mission is to eat as many apples as you can when given their location and find the best ways to navigate the globe.

The game includes the largest cities in the world and tests your geographical knowledge about country and city locations. Your challenge is to move to the next apple and city in the most efficient manner, moving only along lines of longitude or latitude. But remember you are on a sphere so you can move around the globe in any of four directions: over the poles and east and west.

Instructions

Sources and Tools:
The list of cities and their population is from Simplemaps. The game is coded with Three Globe and Three.js, 3D javascript libraries in javascript and HTML and CSS.

Which majors are most competitive across the University of California system?

The University of California consists of nine campuses with undergraduate programs and they are all ranked among the best universities in the US (according to US News). All nine rank within the top 45 public schools including #1 and #2 and top 85 national universities in the US.

This data visualization focuses on the acceptance rates for students based on their indicated preferred majors in their application to the various University of California campuses in the Fall of 2023 admissions cycle. When you apply to a given university campus, you need to specify a major and this choice can affect the student’s chances of getting accepted, especially if the major is very sought after. Subjects like computer science are very popular and as a result, the data shows that most campuses have a lower acceptance rate for computer science as compared to the university as a whole.

Data visualization

The graph shown in the data visualization is a marimekko graph which shows a percentage based bar graph showing the acceptance rate (in blue) for a given major at a given university. The height of each horizontal bar is proportional to the number of applicants to that major, so taller bars have more applicants vs bars that are shorter. If you hover over (or click on mobile) a bar, it provides more information about the acceptance rate, enrollment rate (i.e. yield rate) and the GPA of accepted students. You can choose to sort the graph by subject name, admit rate or number of applicants.

The data visualization can help you explore different campuses and major categories. If you are viewing “School View“, you can see how the various disciplines compare for a single university at one time. Whereas if you view “Subject View” you can see the comparison of a single discipline across the University campuses that offer those majors.

The University of California has over 240,000 undergraduate students and extends about 140,000 acceptances to fill out 42,000 slots for first year students. There is a significant amount of overlap as most students applying for admission apply to several campuses, and many students get accepted to multiple campuses.

The broad disciplines used in the visualization are composed of a number of individual majors and these are detailed in the table below.

GPA calculation

The University of California only considers grades from 10th grade and 11th grade for admissions decisions, and uses a weighted system where honors and AP classes are given an extra point in GPA calculations above the normal A=4, B=3, C=2, etc. . GPA calculation. So for an honors math class, for example, an A would be worth 5 points.

Sources and Tools:
Data comes directly from the University of California website for the fall of 2023, which has quite a bit of interesting data about students and admissions. I downloaded the data and processed it with python to organize it. The webtool is made using javascript, HTML and CSS and graphed using the open-source plotly graphing library.

Table of Disciplines to majors

This table lists the specific areas and majors that make up the broad disciplines shown in the data visualization.

This stylish font generator tool (𝕤𝕥𝕪𝕝𝕚𝕤𝕙 𝕗𝕠𝕟𝕥 𝕘𝕖𝕟𝕖𝕣𝕒𝕥𝕠𝕣 𝕥𝕠𝕠𝕝) allows you to easily convert your ordinary text into a variety of stylish formats. Just type your text below and the transformed styles appear instantly in the output fields. Click the clipboard on the right side to copy the stylized text to your clipboard. Explore all of the creative options (ꉓꋪꍟꍏ꓄ꀤꃴꍟ ꂦꉣ꓄ꀤꂦꈤꌗ).

Use this styled text generator in any circumstances where plain text is generally used and you don’t have control over fonts or styling (i.e. in text messages and social media posts).

Note: While using Stylish Textifier, please be aware that stylized text created through Unicode may not be accessible to all users. This is not for use where accessibility is important stylized text looks like letters but screen readers will not be able to read this text. Screen readers and other assistive technologies may struggle to interpret non-standard text formats, potentially hindering the experience for individuals with visual impairments.

To ensure inclusivity, consider providing a plain text alternative for critical information and avoid using stylized text for essential communication. Always prioritize clarity and accessibility in your content.

Sources and Tools: This tool and interface was made using HTML/Javascript/CSS. Python was used to convert plain text into various unicode variations that are read by the

Play with an interactive spirograph and share your creations with your friends. Just play around with the controls at the top and see what interesting designs you can come up with.

Instructions
– Wheel Size controls the size of the wheel inside the ring
– Hole Distance controls the distance from the center of the wheel and the edge
– Drawing Speed controls the speed at which the spirograph is spins
– Line Thickness controls the thickness of the line on the drawing
– Line Color is a color picker letting you change the color of the lines
– Show Ring and Wheel lets you toggle whether the Ring and Wheel are showing
– Clear erases the design
– generates a custom URL and copies it to the clipboard so you can share this exact design with your friends.
– / allows you to start and stop the spirograph animation

Equations
The spirographs shown here are hypotrochoids, which is described as a curve generated by tracing a point attached to a circle that rolls around the interior of a larger circle. The equations for the curve are:
\begin{aligned}&x(\theta )=(R-r)\cos \theta +d\cos \left({R-r \over r}\theta \right)\\&y(\theta )=(R-r)\sin \theta -d\sin \left({R-r \over r}\theta \right)\end{aligned}

Sources and Tools
The equations for the spirograph hypotrochoids are from Wikipedia. The drawings and UI are made using canvas and HTML/Javascript and CSS.

What are the main sources of California’s electricity?

I added the option to view the graph for any day or monthly average from April 2018 to the present using the calendar picker and a daily generation summary

In the United States, electric power plant emissions account for about 25% of greenhouse gas emissions. However, California has been a leader in the transition to clean and renewable energy, driven by ambitious climate policies and a commitment to reducing greenhouse gas emissions. The state has set an electricity target for the state of 60% renewables by 2030 and 100% zero-carbon, clean electricity by 2045. To meet these targets, the state has been investing heavily into solar and wind energy sources. Solar is the largest proportion of California’s electricity grid and California now generates more solar energy than any other state.

The California Independent System Operator manages the grid for around 32 million Californians or about 80% of the total demand in the state. Here is a map showing the service area and the other electricity districts in the state, the main exceptions include the city of LA and the Sacramento area.

How to read the graph of California’s electricity

The graphs shown here allow us to visualize how electricity generation in the California Independent System Operator (CAISO) region varies over the course of the day. We can see how solar ramps up to be a huge contributor in the middle of the day. And overall, the vast majority of the generation in the state is one form of renewable electricity or another (e.g. solar, wind, hydro, geothermal, biomass and biogas). Add in a small contribution from zero-carbon nuclear energy and we can see that a large majority of power generation comes from zero-carbon sources. It also shows the total electricity demand, which should always be less than the total electricity supply in the state.

Because of the intermittent nature of some renewables, like wind and solar, there are times where the demand for electricity is not able to be met by these sources, and other options are needed to maintain supply demand balance on the state’s grid. To address this issue, the state relies on importing power from outside of the state as well as energy storage (primarily batteries) to meet electricity demand when renewable energy supply is low. If demand is much less than supply, then likely there will be power exported or some charging of batteries. And if demand is less than total generation in the state, power will be imported and/or batteries will be discharged to make up for the power shortfall.

On the graph, positive values from batteries and imports is when those sources are supplying power to the California grid. Negative values for batteries and exports are when there is excess power in the state and batteries are being charged up or power is being exported to neighboring states.

You can view the graph in two forms:

• Detailed – shows all of the power plant fuel types that is provided in the CAISO data: Solar, Wind, Nuclear, Coal, Other, Natural Gas, Large Hydropower, Small Hydropower, Geothermal, Biomass and Biogas. In addition, it shows aggregated net imports into the state from other regions as well as battery discharging or charging.
• Simplified – I aggregated the categories from CAISO into Solar, Wind, Nuclear, Fossil Fuel (including Coal, Other and Natural Gas), Hydro (Large and Small Hydropower), and Other Renewable (Geothermal, Biomass and Biogas). In addition, it shows aggregated net imports into the state from other regions as well as battery discharging or charging.

Also, I added the ability to see yesterday’s data as well. In the future, I will add the ability to see other dates as well.

Data Sources and Tools
Data for electricity sources for California grid comes from the California Independent System Operator (CAISO). This data from this site is downloaded and processed using a python script and updated every 5 minutes. The graph is made using the open source Plotly javascript graphing library.

You can play new daily Digits puzzles

Calculate the solution to any digits puzzle

This tool lets you view all of the potential solutions to a Digits puzzle. Enter the goal number and the five starting numbers separated by a comma like “1,2,3,4,5” and hit the “Calculate Solutions” button to see all of the possible solutions to the puzzle. The list is likely quite long so you’ll probably need to scroll through all of the solutions in the list.

There is also a checkbox that lets you remove transpositions, which are operations that occur in different orders but the same set of operations are used to achieve the final number. For example, where the first two operations appear in reverse order and then are added together in the 3rd operation to hit the target.
e.g. these two solutions are an example of a transposition.
5 + 10 = 15 15 / 3 = 5 5 * 20 = 100
vs
15 / 3 = 5 5 + 10 = 15 5 * 20 = 100

Tools
A version of the solution code is written in Python code and is used to generate the puzzles. This code is re-written in javascript so it is solved inside the browser and the visuals are made with javascript, CSS and HTML and the graphs are made using the open source Plotly javascript graphing library.