Monthly Archives: May 2019

Idealistic Teacher

1 Reply

Idealism is an ancient philosophy that had a strong influence on education through the 20th century. Recently, this position has been overshadowed by realism, however, the influence of idealism can still be felt in education to this day. In this post, we will describe idealism, explain its implications, and examine how an idealistic teacher views education.

Description

Idealism is focused on reality as consisting of ideas, the mind, and the self. In other words, the mind makes the material world rather than the other way around as found in realism. Plato is the primary author of this philosophy.

The context of Plato’s life was one of change. This was during the time of the Persian Wars in which Greece, Athens in particular, did remarkably well. War naturally brought new ideas to both countries which was leading to changes. In addition, there was a push for individualism from a group of philosophers known as the sophists which were straining the communal culture of Athens.

Some have stated that Plato’s idealism was a reaction against this threat of change. Truth for Plato was permanent and unchanging. Since the world was changing, there could be no truth in this world. Truth must be found somewhere else. The real truth was found in the world of ideas a place that was beyond the senses used in this world.

Plato has rather negative views towards the senses. In his “Allegory of the Cave”, Plato essentially asserts that people who go by their senses are chained and trapped inside a cave of ignorance where they are bound to watch shadows of reality. Those who break free from these chains are those who have gone beyond their senses and used their intellect to reach the world of ideas. Naturally, only an elite handful of chosen ones or philosopher kings are able to do this.

Philosophical Implications

For idealists, the source of knowledge comes from intuition (knowing without conscious thought), revelation (knowing through supernatural encounters), and rationalism (knowing through conscious thought). What is important here is what is missing, which is empiricism (knowledge through the senses). Idealists do not require empirical verification of what is true. In the world today, this is almost laughable but was a core component of education for centuries.

Ethically, idealism emphasizes a belief in an external ethical standard for man. Man cannot be the one to decide what is right or wrong. Instead, morals are determined by the world of ideas through the intellect. There is something called the Absolute self that the individual self is trying to imitate. This Absolute Self is considered by many to be God as seen from a Christian perspective. Again this is something that would not be considered seriously by many educators.

There is an eternal consistency to truth for an idealist.  Something is true when it fits with the harmony of the universe. Even art must make sense and must be used in a way that is consistent with the perfect form of the world of ideas. This explains the sonority of early forms of music that have been lost gradually over time.

Idealism and Education

An idealistic teacher is going to focus on the development of the student’s mind. There is a constant striving for perfection in the study of various subjects. Speaking of subjects, the curriculum consists primarily of the humanities and math. History and literature help students to see what is ideal for humans and the study of math is powerful because of its universal nature along with it being self-evidently true. Generally, any subject that brings students into contact with ideas rather than things should be considered for the curriculum

The teacher’s responsibility is to pass their knowledge of the ultimate reality to the student as the teacher has more experience in this and the Absolute Self. Therefore, the teacher is an example for the student. Knowledge is seen as something that is transferred from the teacher to the student either verbally or in writing. This implies that lecturing and direct instruction are key methodologies.

One of the more shocking positions of the idealistic teacher is that the school is not an agent of change. The idealistic teacher and the idealistic school do not train and educate “change agents”. Rather, since absolute truth is unchanging the school should naturally reflect an unchanging nature and support the status quo. Anyone familiar with education in universities today would find this difficult to accept.

Conclusion

With a focus on an otherworldly perfect standard,  idealism is strongly out of place in a world that is governed or perhaps controlled by what they see and experience. Whenever people try to appeal to some sort of unqualified standard it is looked upon almost with ridicule. The exception seems to be when people share an emotional objection to something. Feelings have replaced some form of ethereal standard because emotions are experienced rather than thought about.

The overemphasis on ideals is perhaps the weakness of idealism. Plato thought that people who only rely on their senses were trapped in a cave and unaware of true reality. However, the same can be said of a person who is trapped in the world of ideas. The person who is truly free is the one who can move between the senses and the mind or who can move between the reality of t ideas and the physical world. Moving between these positions provides a flexibility that neither has by itself.

Tweening with D3.js

Leave a reply

Tweening is a tool that allows you to tell D3.js how to calculate attributes during transitions without keyframes tracking. The problem with keyframes tracking is that it can develop performance issues if there is a lot of animation.

We are going to look at three examples of the use of tweening in this post. The examples are as follows.

  • Counting numbers animation
  • Changing font size animation
  • Spinning shape animation

Counting Numbers Animation

This simple animation involves using the .tween() method to count from 0 to 25. The other information in the code determines the position of the element, the font-size, and the length of the animation.

In order to use the .tween()  method you must make a function. You first give the function a name followed by providing the arguments to be used. Inside the function  we indicate what it should do using the .interpolateRound() method which indicates to d3.js to count from 0 to 25. Below is the code followed by the animation.

1

You can see that the speed of the numbers is not constant. This is because we did not control for this.

Changing Font-Size Animation

The next example is more of the same. This time we simply make the size of a text change. TO do this you use the .text() method in your svg element. In addition, you now use the .styleTween() method. Inside this method we use the .interpolate method and set arguments for the font and font-size at the beginning and the end of the animation. Below is the code and the animation1

Spinning Shape Animation

The last example is somewhat more complicated. It involves create a shape that spins in place. To achieve this we do the following.

  1. Set the width and height of the element
  2. Set the svg element to the width and height
  3. Append a group element to  the svg element.
  4. Transform and translate the g element in order to move it
  5. Append a path to the g element
  6. Set the shape to a diamond using the .symbol(), .type(), and .size() methods.
  7. Set the color of the shape using .style()
  8. Set the .each() method to follow the cycle function
  9. Create the cycle function
  10. Set the .transition(), and .duration() methods
  11. Use the .attrTween() and use the .interpolateString() method to set the rotation of the spinning.
  12. Finish with the .each() method

Below is the code followed by the animation.

1

This animation never stops because we are using a cycle.

Conclusion

Animations can be a lot of fun when using d3.js. The examples here may not be the most practical, but they provide you with an opportunity to look at the code and decide how you will want to use d3.js in the future.

Intro to Animation with D3.js

Leave a reply

This post will provide an introduction to animation using D3.js. Animation simply changes the properties of the visual object over time. This can be useful for help the viewer of the web page to understand key features of the data.

For now we will do the following in terms of animation.

  • Create a simple animation
  • Animate multiple properties
  • Create chained transitions
  • Handling Transitions

Create a Simple Animation

What is new for us in terms of d3.js code for animation is the use of the .transition() and .duration() methods. The transition method provides instructions on how to changing a visual attribute over time. Duration is simply how long the transition takes.

In the code below, we are going to create a simply black rectangle that will turn white and disappear on the screen. This is done by appending an svg that contains a black rectangle into the body element and then have that rectangle turn white and disappear.

1

1.gif

This interesting but far from amazing. We simply change the color  or animated one property. Next, we learn how to animate more than one property at a time.

Animating Multiple Properties at Once

You are not limited to only animating one property. In the code below we will change the color will have the rectangle move as well. This id one through the x,y coordinates to the second .attr({}) method. The code and the animation are below.

12

You can see how the rectangle moves from the top left to the bottom right while also changing colors from black to white thus disappearing. Next, we will look at chained transitions

Chained Transitions

Chained transitions involves have some sort of animation take place. Followed by a delay and then another animation taking place. In order to do this you need to use the .delay() method. This method tells the  browser to wait a specify number of seconds before doing something else.

In our example, we are going to have our rectangle travel diagonally down while also disappearing only tot suddenly travel up while changing back to the color of black. Below is the code followed by the animation.

13

By now you are starting to see that the only limit to animation in d3.js is your imagination.

Handling Transitions

The beginning and end of a transition can be handle by a .each() method. This is useful when you want to control the style of the element at the beginning and or end of a transition.

In the code below, you will see the rectangle go from red, to green, to orange, to black, and then to gray. At the same time the rectangle will move and change sizes. Notice careful the change from red to green and form black to gray are controlled by .each() methods.

11

Conclusion

Animation is not to only be used for entertainment. When developing visualizations, an animation should provide additional understanding of the content that you are trying to present. This is important to remember so that d3.js does not suffer the same fate as PowerPoint in that people focus more on the visual effects rather than the content.

Adding labels to Graphs D3.js

Leave a reply

In this post, we will look at how to add the following to a bar graph using d3.js.

  • Labels
  • Margins
  • Axes

Before we begin, you need the initial code that has a bar graph already created. This is shown below follow by what it should look like before we make any changes.

1

1

The first change is in line 16-19. Here, we change the name of the variable and modify the type of element it creates.

1.png

Our next change begins at line 27 and continues until line 38. Here we make two changes. First, we make a variable called barGroup, which selects all the group elements of the variable g. We also use the data, enter, append and attr methods. Starting in line 33 and continuing until line 38 we use the append method on our new variable barGroup to add rect elements as well as the color and size of each bar. Below is the code.

1.png

The last step for adding text appears in lines 42-50. First, we make a variable called textTranslator to move our text. Then we append the text to the bargroup variable. The color, font type, and font size are all set in the code below followed by a visual of what our graph looks like now.

12

Margin

Margins serve to provide spacing in a graph. This is especially useful if you want to add axes. The changes in the code take place in lines 16-39 and include an extensive reworking of the code. In lines 16-20 we create several variables that are used for calculating the margins and the size and shape of the svg element. In lines 22-30 we set the attributes for the svg variable. In line 32-34 we add a group element to hold the main parts of the graph. Lastly, in lines 36-40 we add a gray background for effect. Below is the code followed by our new graph. 1.png

1

Axes

In order for this to work, we have to change the value for the variable maxValue to 150. This would give a little more space at the top of the graph. The code for the axis goes form line 74 to line 98.

  • Line 74-77 we create variables to set up the axis so that it is on the left
  • Lines 78-85 we create two more variables that set the scale and the orientation of the axis
  • Lines 87-99 sets the visual characteristics of the axis.

Below is the code followed by the updated graph

12

You can see the scale off to the left as planned..

Conclusion

Make bar graphs is a basic task for d3.js. Although the code can seem cumbersome to people who do not use JavaScript. The ability to design visuals like this often outweighs the challenges.

Defining Terms in Debates

Leave a reply

Defining terms in debates is an important part of the process that can be tricky at times. In this post, we will look at three criteria to consider when dealing with terms in debates. Below are the three criteria

  • When to define
  • What to define
  • How to define

When to Define

Definitions are almost always giving at the beginning of the debate. This is cause it helps to set up limits about what is discussed. It also makes it clear what the issue and potential propositions are.

Some debates focus exclusively on just defining terms. For example, highly controversial ideas such as abortion, non-traditional marriage, etc. Often the focus is just on such definitions as when does life beginning, or what is marriage? Defining terms helps to remove the fuzziness of the controversy and to focus on the exchange of ideas.

What to Define

It is not always clear what needs to be defined when staring a debate. Consider the following proposition of value

Resolved: That  playing videos games is detrimental to the development of children

Here are just a few things that may need to be  defined.

  • Video games: Does this refer to online, mobile, or console games? What about violent vs non-violent? Do educational games also fall into this category as well?
  • Development: What kind of development? Is this referring to emotional, physical, social or some other form of development
  • Children: Is this referring only to small children (0-6), young children (7-12) or teenagers?

These are just some of the questions to consider when trying to determine what to define. Again this is important because the affirmative may be arguing that videos are bad for small children but not for teenagers while the negative may be preparing a debate for the opposite.

How to Define

There are several ways to define a term below are just a few examples of how to do this.

Common Usage

Common usage is the everyday meaning of the term. For example,

We define children as individuals who are under the age of 18

This is clear and simple

Example

Example definitions give an example of the term to illustrate it as shown below.

An example of a video game would be PlayerUnknwon’s Battleground

This provides a context of the type of video games the debate may focus one

Operation

An operational definition is a working definition limited to the specific context. For example,

Video games for us is any game that is played on an electronic device

Fex define video games like this but this is an example.

Authority

Authority is a term that is defined by an expert.

According to technopedia, a video game is…..

Authority uses their experiences and knowledge to set what a term means and this can be used by debaters.

Negation

Negation is defining a word by what it is not. For example,

When we speak of video games we are not talking about educational games such as Oregon Trail. Rather, we are speaking of violent games such as Grand Theft Auto

The contrast between the types of games here is what the debater is using to define their term.

Conclusion

Defining terms is part of debating. Debaters need to be trained to understand the importance of this so that they can enhance their communication and persuasion.

Making Bar Graphs with D3.js

Leave a reply

This post will provide an example of how to make a basic bar graph using d3.js. Visualizing data is important and developing bar graphs in one way to communicate information efficiently.

This post has the following steps

  1. Initial Template
  2. Enter the data
  3. Setup for the bar graphs
  4. Svg element
  5. Positioning
  6. Make the bar graph

Initial Template

Below is what the initial code should look like.

1

Entering the Data

For the data we will hard code it into the script using an array. This is not the most optimal way of doing this but it is the simplest for a first time experience.  This code is placed inside the second script element. Below is a picture.

1

The new code is in lines 10-11 save as the variable data.

Setup for the Bars in the Graph

We are now going to create three variables. Each is explained below

  • The barWidth variable will indicate ho wide the bars should be for the graph
  • barPadding variable will put space between the bars in the graph. If this is set to 0 it would make a histogram
  • The variable maxValue scales the height of the bars relative to the largest observation in the array. This variable uses the method .max() to find the largest value.

Below is the code for these three variables

1

The new information was added in lines 13-14

SVG Element

We can now begin to work with the svg element. We are going to create another variable called mainGroup. This will assign the svg element inside the body element using the .select() method. We will append the svg using .append and will set the width and height using .attr. Lastly, we will append a group element inside the svg so that all of our bars are inside the group that is inside the svg element.

The code is getting longer, so we will only show the new additions in the pictures with a reference to older code. Below is the new code in lines 16-19 directly  under the maxValue variable.

1

Positioning

New=x we need to make three functions.

  • The first function will calculate the x location of the bar graph
  • The second function  will calculate the y location of the bar graph
  • The last function will combine the work of the first two functions to place the bar in the proper x,y coordinate in the svg element.

Below is the code for the three functions. These are added in lines 21-251

The xloc function starts in the bottom left of the mainGroup element and adds the barWidth plus the barPadding to make the next bar. The yloc function starts in the top left and subtracts the maxValue from the given data point to calculate the y position. Lastly, the translator combines the output of both the xloc and the yloc functions to position bar using the translate method.

Making the Graph

We can now make our graph. We will use our mainGroup variable with the .selectAll method with the rect argument inside. Next, we use .data(data) to add the data, .enter() to update the element, .append(“rect”) to add the rectangles. Lastly, we use .attr() to set the color, transformation, and height of the bars. Below is the code in lines 27-36 followed by actual bar graph. 1.png

1

The graph is complete but you can see that there is a lot of work that needs to be done in order to improve it. However, that will be done in a future post.

Types of Debate Proposition

Leave a reply

In debating, the proposition is the main issue or the central topic of the debate. In general, there are three types of propositions. The three types of propositions are propositions of

  • Fact
  • Value
  • Policy

Understanding the differences in these three types of propositions is important in developing a strategy for a debate.

Proposition of Fact

A debate that is defined as a proposition of fact is a debate that is focused on whether something is true or not. For example, a debate may address the following proposition of facet.

Resloved: human activity is contributing to global warming

The affirmative side would argue that humans are contributing to global warming while the negative side would argue that humans are not contributing to global warming. The main concern is the truthfulness of the proposition. There is no focus on ethics of the proposition as this is when we come to a proposition of value.

Proposition of Value

A proposition of value looks at your beliefs about what is right or wrong and or good and bad. This type of proposition is focused on ethics and or aesthetics. An example of a proposition of value would be the following..

Resolved: That television is a waste of time

This type of proposition  is trying to judge the acceptability of something and or make an ethical claim.

Value propositions can also have these other more nuances characteristics. Instead, affirming the good or bad of a proposition, a proposition of value can also make a case of one idea being better than another such as…

Resloved: That exercise is a better use of time than watching television

Now the debate is focus not on good vs bad but rather on better vs worst. It is s slightly different way of looking at the argument. Another variation on proposition of value is when the affirmative argues to reject a value such as in the following.

Resolved: That encouraging the watching of television is harmful to young people

The wording is slightly different from previous examples but the primary goal of the affirmative is to argue why television watching should not be valued or at least valued less.

One final variation of the proposition of value is the quasi-policy proposition of value. A quasi-policy value proposition is used to express a value judgement about a policy. An example would be

Resolved: That mandatory vaccinations would be beneficial to school age children

Here the affirmative is not only judging vaccinations but simultaneously the potential policy of making vaccinations mandatory.

Proposition of Policy

Propositions of policy call for change. This type of proposition in pushing strongly against the status quo. Below is an example.

Resolved: That the cafeteria should adopt a vegetarian diet

The example above is using for clear change. However, notice how there is no judgement on the current state affairs. In others words, there is not judgement that the non-vegetarian diet is good or bad or that a vegetarian diet is good or bad. This is noe reason why this is not a proposition of value.

In the case of a proposition of policy, the affirmative supports the change while the negative supports the status quo.

Conclusion

Debate propositions shape the entire direction and preparation for the debate itself. Therefore, it is important for debaters to understand what type of proposition they are dealing with. In addition, for teachers who are creating debates, they need to know exactly what they want the students to do in a debt when they create propositions.

SVG and D3.js

Leave a reply

Scalable Vector Graphics or SVG for short is a XML markup language that is the standard for creating vector-based graphics in web browsers. The true power of d3.js is unlocked through its use of svg elements. Employing vectors allows for the image that are created to be various sizes based on scale.

One unique characteristic of svg is that the coordinate system starts in the upper left with the x axis increases as normal from left to right. However, the y axis starts from the top and increases going down rather than the opposite of increasing from the bottom up. Below is a visual of this.

1

You can see that (0,0) is in the top left corner. As you go to the right the x-axis increases and as you go down the y axis increases.  By changing the x, y axis values you are able to position your image where you want it. If you’re curious the visual above was made using d3.js.

For the rest of post, we will look at different svg elements that can be used in making visuals. We will look at the following

  • Circles
  • Rectangles/squares
  • Lines & Text
  • Paths

Circles

Below is the code for making circle followed by the output

1.png

1.png

To make a shape such as the circles above, you first must specify the size of the svg element as shown in line 6. Then you make a circle element. Inside the circle element you must indicate the x and y position (cx, cy) and also the radius (r). The default color is black however you can specify other colors as shown below.

12

To change the color simply add the style argument and indicate the fill and color in quotations.

Rectangle/Square

Below is the code for making rectangles/squares. The arguments are slightly different but this should not be too challenging to figure out.

12

The x, y arguments indicate the position and the width and height arguments determine the size of the rectangle, square.

Lines & Text

Lines are another tool in d3.js. Below is the code for drawing a line.

1

2

The code should not be too hard to understand. You now need to separate coordinates. This is because the line needs to start in one place and draw until it reaches another. You can also control the color of the line and the thickness.

You can also add text using svg. In the code below we combine the line element with the text element.

12

With the text element after you set the position, font, font size, and color, you have to also add your text in-between the tags of the element.

Path

The path element is slightly trickier but also more powerful when compared to the elements we have used previously. Below is the code and output from using the path element.

12

The path element has a mini-language all to its self. “M” is where the drawing begins and is followed by the xy coordinate. “L”  draw a line. Essentially, it takes the original position and draws a line to next position. “V” indicates a vertical line. Lastly, “Z” means to close the path.

In the code below here is what it literally means

  1. Start at 40, 40
  2. Make a line from 40, 40 to 250, 40
  3. Make another line from 250, 40 to 140, 40
  4. Make a vertical line from 140,40 to 4,40
  5. Close the path

Using path can be much more complicated than this. However, this is enough for an introduction

Conclusion

This was just a teaser of what is possible with d3.js. The ability to make various graphics based on data is something that we have not even discussed yet. As such, there is much more to look forward to when using this visualization tool.